How to use the Color converter
- 1Type a color value, such as #2563eb, rgb(37 99 235), hsl(221 83% 53%) or a named color, or use the color picker.
- 2Read the equivalent HEX, RGB(A), HSL(A), HSV and CMYK values and copy whichever you need.
- 3Check the contrast panel to see whether white or black text on this color meets WCAG AA and AAA.
- 4Use the row of tints and shades to find lighter and darker versions for hover states, borders and backgrounds.
How it works
Everything is converted through RGB, the red, green and blue channels a screen actually uses, each from 0 to 255. HEX is the same three numbers written in base 16, so #2563EB means red 0x25 (37), green 0x63 (99) and blue 0xEB (235). The 3-digit shorthand doubles each digit (#F80 is #FF8800), and 8-digit HEX adds an alpha channel for transparency.
HSL and HSV rearrange the same information into hue (the position on the color wheel, 0 to 360°), saturation, and either lightness or value. They are easier to adjust by hand: to make a color lighter in HSL, raise the L value and leave hue alone. Tints and shades are produced by mixing the color with white or black in steps.
CMYK is calculated with the standard simple formula from RGB. Real print color depends on the paper, ink and the ICC color profile your printer uses, none of which a browser tool can know, so treat the CMYK figures as a starting point and ask your printer for a proof when color accuracy matters.
Formulas
Contrast = (L₁ + 0.05) ÷ (L₂ + 0.05)- L₁
- relative luminance of the lighter color (0 to 1)
- L₂
- relative luminance of the darker color
Ratios range from 1:1 (identical) to 21:1 (black on white).
K = 1 − max(R′, G′, B′); C = (1 − R′ − K) ÷ (1 − K), and likewise for M and YR′, G′ and B′ are the channels divided by 255. No ICC profile is applied.
Worked examples
#2563EB in every format
- 1RGB: 37, 99, 235
- 2HSL: 221°, 83%, 53%
- 3HSV: 221°, 84%, 92%
- 4CMYK (naive): 84%, 58%, 0%, 8%
One blue, five ways to write it.
Is white text readable on #2563EB?
- 1Relative luminance of #2563EB ≈ 0.153; white = 1
- 2(1 + 0.05) ÷ (0.153 + 0.05) ≈ 5.17
- 3Black on the same blue: (0.153 + 0.05) ÷ (0 + 0.05) ≈ 4.06
White text passes AA for all text sizes (5.17:1) but not AAA for normal text. Black text only passes for large text.
Adding transparency
- 1#2563EB80: the final pair 80 is 128 in decimal
- 2128 ÷ 255 ≈ 0.50
Equivalent to rgba(37, 99, 235, 0.5), a half-transparent blue.
What contrast ratio do I need for accessibility?
AA is the level most accessibility laws and policies reference. Mid-tone colors, like many brand blues, oranges and greens, often pass with only one of white or black text, which is why both are checked.
- WCAG AA, normal text: at least 4.5:1.
- WCAG AA, large text (roughly 24 px regular or 18.66 px bold and above): at least 3:1.
- WCAG AAA, normal text: at least 7:1.
- WCAG AAA, large text: at least 4.5:1.
Why does my color look different in print?
Screens create color by emitting light (additive RGB), while print reflects light off inks (subtractive CMYK). Many bright screen colors, especially vivid blues, greens and oranges, fall outside what standard inks can reproduce, so they print duller. For brand work, agree on a printed reference, such as a Pantone match or a profile-based conversion in professional design software, rather than relying on a formula.
Frequently asked questions
What is the difference between HSL and HSV?
Both use hue and saturation, but HSL's lightness puts pure color at 50% with white at 100%, while HSV's value puts pure color at 100%. HSL is what CSS uses; HSV is common in color pickers in design apps.
Are HEX codes case-sensitive?
No. #2563eb and #2563EB are the same color.
Which CSS color names are supported?
The standard named colors defined in CSS, from common ones like red and navy to less obvious names like rebeccapurple and papayawhip.
How accurate is the CMYK conversion?
It is mathematically consistent but device-independent: it ignores ink, paper and ICC profiles. It is fine for rough mock-ups; for production print, get values from your printer or from profile-aware design software.
Why do I get slightly different HSL values in other tools?
HSL is usually rounded to whole numbers, and converting back and forth can shift a channel by 1. The HEX and RGB values are the exact reference.