Developer Tools

Color Picker

Pick colors and convert between common color formats.

DeveloperColor Picker
Developer utility

Color Picker

Pick colors and convert between common color formats.

HEX#0F766E
RGBrgb(15, 118, 110)
HSLhsl(175, 77%, 26%)
Complementary#750F18
Contrast on white5.47:1 (AA)
Contrast on black3.84:1 (AA large)
#9FC8C5
#579F9A
#0F766E
#0B534D
#062F2C

About this color picker

The color picker lets you choose a color and see its value in the common web formats — HEX, RGB, and HSL — converting between them as you adjust. That saves the mental arithmetic of translating a HEX code into RGB for a canvas call, or into HSL when you want to nudge lightness.

It is a quick reference while working on CSS, mockups, or brand palettes: settle on a shade, then copy it in whatever format the destination expects. Seeing the same color across formats also makes it easier to build consistent variations.

Common uses

  • Pick a color and copy it as HEX, RGB, or HSL for CSS or design work.
  • Convert a HEX code into RGB or HSL without doing the math by hand.
  • Adjust hue, saturation, or lightness to build a palette around a base color.

Helpful tips

  • Use HSL when you want to change lightness or saturation while keeping the same hue.
  • Copy HEX, RGB, or HSL depending on what your CSS or design tool expects.
  • Check colors against a contrast guideline when they will carry text.

How to use Color Picker

  1. Paste or enter a small code, data, text, URL, or configuration sample before using Color Picker on a larger task.
  2. Remove secrets, tokens, private URLs, customer data, and production credentials before testing examples online.
  3. Run the tool and review the generated code or data for syntax, escaping, formatting, and target-environment compatibility.
  4. Copy the result into a test file, sandbox, API client, or staging environment before using it in production.
  5. Use related developer tools when you need to format, encode, decode, minify, inspect, or validate another step.

Frequently asked questions

What is the difference between HEX, RGB, and HSL?

They describe the same colors differently: HEX and RGB specify red, green, and blue channels, while HSL uses hue, saturation, and lightness, which is friendlier for adjustments.

Does it give colors with transparency?

It outputs solid HEX, RGB, and HSL values. If you need transparency, take the RGB numbers it gives you and add an alpha channel yourself, for example as an rgba() value.

Is Color Picker free, and does it work on mobile?

Yes. Color Picker is free to use on JustBloc with no account or installation, and the page is designed to work on desktop, tablet, and mobile browsers.