How to use the Color Converter
- 1
Type or paste a color in any supported format, such as #1765ee, rgb(23, 101, 238), hsl(218, 86%, 51%) or a CSS name like teal, or choose one with the picker.
- 2
Copy the format you need from the list, or copy the ready-made CSS snippet.
- 3
Check the contrast cards to see whether text in this color passes WCAG AA and AAA on white, on black or on a background you enter.
- 4
Click any tint or shade swatch to copy its HEX code for hover states, borders and backgrounds.
The color formats, and when to use each
All of these formats describe the same thing, a point in the sRGB color space that screens display, but they slice it differently. Picking the right one makes a design easier to adjust later.
| Format | Example | Best for |
|---|---|---|
| HEX | #1765ee | Compact codes in CSS, design handoff and brand guidelines |
| HEX with alpha | #1765ee80 | The same color at 50 percent opacity (80 hex = 128 of 255) |
| RGB | rgb(23, 101, 238) | Programming, canvas drawing and mixing channels |
| HSL | hsl(218, 86%, 51%) | Making lighter or darker versions by changing one number |
| HSV / HSB | hsv(218, 90%, 93%) | Color pickers in Photoshop, Figma and similar apps |
| CMYK | cmyk(90%, 58%, 0%, 7%) | A rough starting point for print artwork |
HEX is just RGB written in base 16: each pair of characters is one channel from 00 to ff (0 to 255). The short form #3a7 expands to #33aa77. HSL describes hue as an angle on the color wheel (0 is red, 120 green, 240 blue), then saturation and lightness as percentages, so hsl(218, 86%, 70%) is a lighter blue with the same character. HSV swaps lightness for value, where 100 percent means the brightest version of the hue rather than white.
Additive RGB versus subtractive CMYK
Screens make color by adding light. Red, green and blue subpixels at full strength combine to white, and all three off is black. That is the additive model, and it is why RGB is the native language of monitors, phones and televisions.
Printers work the other way. Cyan, magenta and yellow inks absorb, or subtract, parts of the white light reflected from paper. In theory all three make black, but in practice they give a muddy dark brown and waste ink, so a separate black (the K, for "key") is added. Converting between the two models means describing how much light each ink should remove.
The CMYK values shown here use the standard simple formula, which is fine for sketching a color idea or filling a form field. Professional printing uses ICC color profiles tied to a specific press and paper, such as FOGRA39 in Europe, GRACoL in the United States or Japan Color in Japan. The same RGB color can produce quite different ink percentages under each profile, so ask your printer for their profile or a Pantone reference when color accuracy matters.
Why screen colors shift when printed
A monitor can display bright, saturated colors that ink on paper simply cannot reproduce. Vivid electric blues, neon greens and intense oranges sit outside the printable range, or gamut, of typical CMYK presses, so they come out duller. Paper type adds another layer: uncoated paper absorbs more ink and makes colors softer and darker than glossy coated stock.
Your screen matters too. Laptop screens set to maximum brightness, phones with vivid display modes and uncalibrated office monitors all show the same HEX code a little differently. For brand work, compare a printed proof under daylight-balanced light rather than judging from the screen.
WCAG contrast rules for readable text
The Web Content Accessibility Guidelines (WCAG) measure contrast as a ratio between the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). Luminance weights green most heavily and blue least, because that is how human eyes perceive brightness. Low contrast affects far more people than those with low vision: anyone reading a phone in sunlight benefits from it.
| Level | Normal text | Large text | Notes |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | The level required by most accessibility laws and policies |
| AAA | 7:1 | 4.5:1 | Enhanced level, recommended for long reading |
| Non-text (AA) | 3:1 | 3:1 | Icons, form field borders, focus rings and chart lines |
Large text means at least 24 CSS pixels (18 pt), or 18.66 pixels (14 pt) if bold. The thresholds are strict: medium gray #777777 on white has a ratio of 4.48:1 and fails AA for normal text, while the slightly darker #767676 reaches 4.54:1 and passes. Do not round up. AA is referenced by the European Accessibility Act, the US Section 508 rules and accessibility laws in many other countries, so it is the practical minimum for public websites.
For translucent colors, the contrast cards first flatten the color onto the background, because that is what the reader actually sees.
Building a palette from one color
Design systems usually need more than one shade of each brand color: a pale background for alerts, a mid tone for buttons, a darker one for hover states and text. The tints row mixes your color with white in 10 percent steps, and the shades row mixes it with black. Clicking a swatch copies its HEX code.
Mixing with black can make some hues look dull, especially yellows and oranges, which turn olive or brown. If that happens, try adjusting the hue a few degrees toward red in HSL for darker steps. Always run the final pairings through the contrast check, because a shade that looks dark enough on a bright monitor may still fall short of 4.5:1.
Frequently asked questions
How do I convert HEX to RGB?
Split the six-digit code into three pairs and convert each from base 16 to decimal. For #1765ee, 17 is 23, 65 is 101 and ee is 238, giving rgb(23, 101, 238). Paste the code into the converter and it does this instantly.
What is the difference between HSL and HSV?
Both use the same hue angle, but they define brightness differently. In HSL, 100 percent lightness is always white and 50 percent is the pure color. In HSV, 100 percent value is the brightest form of the color, and lowering saturation moves it toward white.
Are the CMYK values accurate for printing?
They are a mathematical conversion without a printer profile, so treat them as an approximation. Real print values depend on the press, inks and paper. For important jobs, ask your print shop which ICC profile to use or specify a Pantone color.
What contrast ratio do I need for accessible text?
WCAG AA asks for at least 4.5:1 for normal body text and 3:1 for large text. AAA raises that to 7:1 and 4.5:1. The converter shows pass or fail for all four checks against white, black and any background color you enter.
What does an 8-digit HEX code mean?
The last two digits are the alpha channel, or opacity. ff is fully opaque and 00 is fully transparent, so #1765ee80 is the same blue at about 50 percent opacity. Modern browsers support this in CSS.
Why does my color look different on another screen?
Displays differ in brightness, color gamut and calibration, and some phones boost saturation by default. Wide-gamut screens may also render sRGB colors more vividly if an app doesn't manage color correctly. The HEX code stays the same, but what you see depends on the device.
Last updated on November 9, 2026