Designers, developers and printers each describe color their own way: hex codes in CSS and brand guides, RGB triplets in image editors, HSL when adjusting lightness, HSV in color pickers and CMYK for print. This converter accepts any of them — or a CSS color name like steelblue — and returns all the others at once, with a swatch, the closest named color and a strip of tints and shades you can drop straight into a palette.
How to use the color converter
- Paste a color in almost any notation:
#3a7ca5,#3a7,rgb(58, 124, 165),rgb(58 124 165 / 50%),hsl(203, 48%, 44%),hsv(203, 65%, 65%),cmyk(65%, 25%, 0%, 35%), a bare58, 124, 165or a name such asteal. - Choose which format to show in large type with Show as. Every format is listed on the tape regardless.
- Check the swatch panel for readability against white and black, and the tints-and-shades table for lighter and darker versions of the same hue.
Color conversion formulas
HEX ↔ RGB. Each pair of hex digits is one 0–255 channel: R = 16 × first digit + second digit.
RGB → HSL. Scale channels to 0–1 and find the largest (max) and smallest (min):
Hue is an angle from 0° to 360°, taken from whichever channel is largest: red near 0°, green near 120°, blue near 240°.
RGB → CMYK (device-independent):
Worked example
Convert #3A7CA5 (a muted steel blue).
RGB: 3A = 3 × 16 + 10 = 58; 7C = 7 × 16 + 12 = 124; A5 = 10 × 16 + 5 = 165 → rgb(58, 124, 165).
HSL: scaled channels 0.2275, 0.4863, 0.6471. L = (0.6471 + 0.2275) ÷ 2 = 43.7%. S = 0.4196 ÷ (1 − |0.8745 − 1|) = 48%. Blue is largest, so H = 60 × ((R − G) ÷ (max − min) + 4) = 60 × (−0.617 + 4) = 203°: hsl(203, 48%, 43.7%).
CMYK: K = 1 − 0.6471 = 35.3%; C = (1 − 0.2275 − 0.3529) ÷ 0.6471 = 64.8%; M = 24.8%; Y = 0% → cmyk(64.8%, 24.8%, 0%, 35.3%).
Nearest CSS name: steelblue (#4682B4). On white it reaches 4.56:1 contrast, just enough for body text.
Which format to use where
| Format | Best for | Example |
|---|---|---|
| HEX | CSS, brand guides, design hand-off | #3A7CA5 |
| RGB / RGBA | Screens, image editors, transparency | rgb(58, 124, 165) |
| HSL | Building palettes: change only L for tints | hsl(203, 48%, 44%) |
| HSV / HSB | Color pickers in design apps | hsv(203, 65%, 65%) |
| CMYK | Rough print estimates | cmyk(65%, 25%, 0%, 35%) |
All five describe the same sRGB color; the conversion is lossless apart from rounding, except CMYK, which needs a real press profile for accurate print output.
Building a palette with tints and shades
Because HSL separates lightness from hue and saturation, you can make a consistent scale by holding H and S fixed and stepping L. The table under the calculator does exactly that from 95% (near white) to 5% (near black) and lists each step’s contrast against white. Steps with 4.5:1 or more are safe for body text on a white page; 3:1 or more works for large headings and icons.
Named colors
CSS defines 148 color keywords, from aliceblue to yellowgreen. The converter recognizes all of them and, for any other color, finds the closest one using a weighted RGB distance that roughly follows how the eye perceives differences. It is a convenient label, not a match: always copy the hex code for exact work.
To check whether two colors are readable together, use the color contrast checker. For converting the hex digits themselves to binary or decimal, see the number base converter.
Frequently asked questions
How do I convert HEX to RGB?
Split the six hex digits into three pairs and convert each pair from base 16 to decimal. #3A7CA5 becomes 3A = 58, 7C = 124 and A5 = 165, so rgb(58, 124, 165). A three-digit code such as #F80 doubles each digit first: #FF8800.
What is the difference between HSL and HSV?
Both describe color by hue and saturation, but HSL's third value is lightness, where 100% is always white, while HSV's (also called HSB) is value or brightness, where 100% is the most vivid version of the hue. CSS supports hsl(); design apps such as color pickers often show HSB.
Why does my printed CMYK color look different?
The CMYK here is a simple formula with no printer profile. Real presses use profiles such as GRACoL or FOGRA that account for paper, ink and dot gain, and some bright screen colors are simply outside what ink can print. Ask your printer for the profile and convert in design software for production work.
What do the last two digits of an 8-digit HEX code mean?
They are the alpha (opacity) channel. #3A7CA580 is the same color at 80 hex = 128/255 ≈ 50% opacity. The converter shows it as rgba() and hsla() too.