Skip to content

Hex Color Picker

DesignColor Converters and Codes

3, 4, 6 or 8 hex digits; the # is optional.

Normalised hex —
RGB
—
HSL
—
HSV
—
CMYK
—
Relative luminance
—
Contrast with white
—
Contrast with black
—
More readable text
—

Enter a hex code such as #FF5733 and the picker splits it into red, green and blue pairs: FF = 255, 57 = 87, 33 = 51, giving rgb(255, 87, 51) and hsl(11, 100%, 60%). It also reports HSV, CMYK, relative luminance and the WCAG contrast ratio against white and black text.

About this tool

Designers and front-end developers move between colour notations all day: a brand guide lists hex, a CSS variable wants HSL, a print vendor asks for CMYK. This tool reads one hex code and shows every common form of it at once, with the pair-by-pair working. It accepts shorthand codes like #F00, full six-digit codes and eight-digit codes with an alpha channel. It also computes relative luminance and the contrast ratio against pure white and pure black, so you can tell at a glance which text colour stays legible on it. One limit: the CMYK figures are a naive device-independent conversion, not a profile-managed separation, so a printer working in a specific ICC profile will produce different percentages.

How to use it

  1. Type the hex code

    Enter 3, 4, 6 or 8 hex digits, with or without the leading #. Case does not matter.

  2. Read the conversions

    RGB, HSL, HSV and CMYK appear in the results and in the table, ready to copy into CSS or a design file.

  3. Check contrast

    Compare the contrast ratios with white and black against the 4.5:1 WCAG AA level for normal text.

Examples

#FF5733, a warm orange-red

Hex colour code
#ff5733

Result Normalised hex: #FF5733
RGB: rgb(255, 87, 51)
HSL: hsl(11, 100%, 60%)
HSV: hsv(11, 80%, 100%)
CMYK: cmyk(0%, 66%, 80%, 0%)
Relative luminance: 0.2832
Contrast with white: 3.15
Contrast with black: 6.66
More readable text: Black text

  1. Split #FF5733 into pairs: FF = 255, 57 = 87, 33 = 51.
  2. Max = 1, min = 0.2, so lightness = 60% and hue = 11°.
  3. Relative luminance = 0.2126·R + 0.7152·G + 0.0722·B (linearised) = 0.2832.
  4. Contrast with white = 1.05 ÷ (0.2832 + 0.05) = 3.15:1; with black = 6.66:1.

Lowercase input is normalised to uppercase. Full saturation in HSL but 80% in HSV shows how the two models scale saturation differently.

Shorthand #F00

Hex colour code
f00

Result Normalised hex: #FF0000
RGB: rgb(255, 0, 0)
HSL: hsl(0, 100%, 50%)
HSV: hsv(0, 100%, 100%)
CMYK: cmyk(0%, 100%, 100%, 0%)
Relative luminance: 0.2126
Contrast with white: 4
Contrast with black: 5.25
More readable text: Black text

  1. Split #FF0000 into pairs: FF = 255, 00 = 0, 00 = 0.
  2. Max = 1, min = 0, so lightness = 50% and hue = 0°.
  3. Relative luminance = 0.2126·R + 0.7152·G + 0.0722·B (linearised) = 0.2126.
  4. Contrast with white = 1.05 ÷ (0.2126 + 0.05) = 4:1; with black = 5.25:1.

Three-digit codes double each digit. Pure red reaches only 4:1 against white, just under the 4.5:1 WCAG AA level for body text.

Dodger blue at 50% alpha

Hex colour code
#1E90FF80

Result Normalised hex: #1E90FF80
RGB: rgba(30, 144, 255, 0.5)
HSL: hsl(210, 100%, 56%)
HSV: hsv(210, 88%, 100%)
CMYK: cmyk(88%, 44%, 0%, 0%)
Relative luminance: 0.2744
Contrast with white: 3.24
Contrast with black: 6.49
More readable text: Black text

  1. Split #1E90FF into pairs: 1E = 30, 90 = 144, FF = 255.
  2. Max = 1, min = 0.118, so lightness = 56% and hue = 210°.
  3. Relative luminance = 0.2126·R + 0.7152·G + 0.0722·B (linearised) = 0.2744.
  4. Contrast with white = 1.05 ÷ (0.2744 + 0.05) = 3.24:1; with black = 6.49:1.

The last pair, 80, is alpha 128/255, about 0.5. Contrast figures treat the colour as opaque.

How it is calculated

R, G, B = base-16 value of each pair; L = 0.2126·R' + 0.7152·G' + 0.0722·B'; contrast = (L1 + 0.05) ÷ (L2 + 0.05)

R, G, B
channel values from 0 to 255, read from the hex pairs
R', G', B'
channels scaled to 0–1 and linearised with the sRGB transfer curve
L
relative luminance, 0 for black and 1 for white

Each two-digit pair is a base-16 number, so FF is 15 × 16 + 15 = 255. HSL and HSV come from the largest and smallest of the three scaled channels, following the CSS Color Module conversion. CMYK takes K as 1 minus the largest channel. Luminance and contrast follow the WCAG 2 definitions, where white on black gives the maximum 21:1.

When not to use it

  • For press-ready CMYK, use your print profile in a colour-managed application instead of this naive conversion.
  • For text over a semi-transparent colour, contrast depends on the background behind it, which this tool does not know.

Common mistakes

  • Reading #F00 as #F00000; shorthand doubles each digit, so it is #FF0000.
  • Treating HSL saturation and HSV saturation as the same number; they differ for most colours.
  • Putting the alpha pair first, as some Android tools do; CSS expects #RRGGBBAA.

Frequently asked questions

How do I convert a hex code to RGB by hand?

Split the six digits into three pairs and read each as a base-16 number. For #1E90FF: 1E is 1 × 16 + 14 = 30, 90 is 9 × 16 = 144, FF is 255, so the colour is rgb(30, 144, 255).

What does an eight-digit hex code mean?

The last two digits are alpha, the opacity. 00 is fully transparent and FF is opaque; 80 is 128 out of 255, roughly 50%. Modern browsers accept this #RRGGBBAA form in CSS.

Which contrast ratio do I need for text?

WCAG 2 level AA asks for at least 4.5:1 for normal body text and 3:1 for large text, roughly 24 px regular or 19 px bold. Level AAA raises those to 7:1 and 4.5:1.

Why is pure red hard to read white text on?

Red has a relative luminance of 0.2126, which puts its contrast with white at exactly 4:1. That passes for large headings but falls short of the 4.5:1 level for body copy.

Why do HSL and HSV give different saturation?

HSL measures saturation relative to lightness, HSV relative to brightness. For #FF5733 HSL saturation is 100% while HSV saturation is 80%, though both describe the same orange-red.

Can I paste a code without the hash sign?

Yes. The leading # is optional, and both upper and lower case letters are accepted. The result is always shown as an uppercase code with the hash added back.

Cite this tool

Using this tool in an assignment, article or report? Copy a citation, or a link for your website.

APA

Tools Directory Editorial Team. (2026, October 12). Hex Color Picker. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/design/color-converters-and-codes/hex-color-picker/

MLA

Tools Directory Editorial Team. “Hex Color Picker.” Tools Directory, 12 Oct. 2026, https://tools.milunir.com/design/color-converters-and-codes/hex-color-picker/. Accessed 26 Oct. 2026.

Chicago

Tools Directory Editorial Team. “Hex Color Picker.” Tools Directory. Last modified October 12, 2026. Accessed October 26, 2026. https://tools.milunir.com/design/color-converters-and-codes/hex-color-picker/.

Link<a href="https://tools.milunir.com/design/color-converters-and-codes/hex-color-picker/">Hex Color Picker – Tools Directory</a>