utoolslib Logo
utoolslib

Color Picker

Data Stays on Your Device

Pick a color and copy its HEX value.

#3498db

What is the Color Picker?

The Color Picker lets you select a colour visually and converts it between the formats used on the web, HEX, RGB, HSL, and HSV, so you can copy whichever one your stylesheet or design tool expects.

The same colour can be written several ways. HEX is compact and ubiquitous in CSS. RGB states the red, green, and blue channels directly and adds an alpha channel in its rgba form. HSL describes hue, saturation, and lightness, which maps far better to how people actually think about colour.

HSL is particularly useful when building a palette. Producing a lighter or darker variant of a colour means adjusting one number, the lightness, whereas the equivalent change in HEX or RGB requires recalculating all three channels.

Contrast is the other half of choosing colours responsibly. WCAG defines minimum contrast ratios between text and background: 4.5:1 for normal body text at level AA, and 3:1 for large text. Colours that look fine to you may be unreadable for someone with low vision.

How to use the Color Picker

  1. Pick a colour. Use the visual picker, or type a value in any supported format to start from a known colour.
  2. Read the converted formats. HEX, RGB, HSL, and HSV values update together as you adjust the selection.
  3. Copy what you need. Take the format your stylesheet or design tool uses.
  4. Build variants using HSL. Hold hue and saturation constant while changing lightness to generate a coherent set of tints and shades.

Worked examples

One colour in four formats

All of these describe an identical colour; they differ only in how the value is expressed.

Input
A medium blue
Output
HEX:  #2563EB
RGB:  rgb(37, 99, 235)
HSL:  hsl(221, 83%, 53%)
HSV:  hsv(221, 84%, 92%)

Generating a palette with HSL

Fixing hue and saturation and varying only lightness produces a naturally coherent scale, the technique behind most design-system colour ramps.

Input
hsl(221, 83%, 93%)  ->  #DBE6FD
hsl(221, 83%, 73%)  ->  #8FB2F8
hsl(221, 83%, 53%)  ->  #2563EB
hsl(221, 83%, 33%)  ->  #17409A
hsl(221, 83%, 13%)  ->  #09193C
Output
Only the lightness value changes.
Doing the same in HEX would require
recalculating every channel each time.

Common use cases

  • Converting design handoffs. Design tools often export one format while your stylesheet uses another.
  • Building a colour scale. Generating consistent tints and shades from a single brand colour.
  • Matching an existing colour. Getting the exact value from a screenshot or reference and expressing it in the format you need.
  • Checking accessibility. Evaluating whether a text and background pairing meets contrast requirements.

Features and limitations

  • Visual selection with live conversion between HEX, RGB, HSL, and HSV.
  • Accepts input in any of the supported formats.
  • Supports alpha transparency via rgba and hsla.
  • Runs entirely in the browser with no network requests.
  • Values are in the sRGB colour space, which is what browsers assume by default. Wide-gamut spaces such as Display P3 are outside its scope.

Frequently asked questions

What is the difference between HSL and HSV?

Both use hue and saturation but differ in the third component. In HSL, 50% lightness is the pure hue and 100% is white. In HSV, 100% value is the pure hue and there is no path to white without reducing saturation. HSL tends to be more intuitive for web work.

Which format should I use in CSS?

All are equally valid. HEX is most common and compact. HSL is easier to reason about when generating variants. RGB is convenient when working with values computed in JavaScript.

How do I add transparency?

Use rgba() or hsla() with an alpha between 0 and 1, or an eight-digit HEX value where the last two digits are the alpha channel.

What contrast ratio do I need?

WCAG level AA requires 4.5:1 for normal text and 3:1 for large text, 18pt, or 14pt bold. Level AAA raises those to 7:1 and 4.5:1.

Why does the colour look different on another screen?

Displays vary in calibration, gamut, and colour profile. The same sRGB value renders differently across devices, which is why relying on precise colour matching across uncontrolled screens is unwise.

All processing happens locally in your browser, your data never leaves your device.