About the Color Converter (HEX to RGB)
This color converter takes a color in almost any format — a HEX code like #1E90FF or #1e9, rgb() or rgba(), hsl(), hsv()/hsb(), cmyk() or a common CSS color name — and returns the same color in every other format at once. Each output is written in copy-ready CSS or design-tool syntax, so you can move a brand color from a style guide into code, Figma or a print brief without doing the maths by hand.
It is built for front-end developers, designers and marketers who constantly switch between systems: CSS favours HEX and HSL, design tools use HSV/HSB, and printers ask for CMYK. The tool also reports the color's relative luminance and its WCAG contrast ratio against white and black text, and suggests which one is more readable on top of it.
CMYK values here are the simple device-independent formula, not a calibrated ICC profile conversion, so treat them as a starting point and confirm with your print provider for exact matches.
How to use the color converter (hex to rgb)
- 1Paste or type a color in any supported format, e.g. #1E90FF or rgb(30, 144, 255).
- 2Read the HEX value at the top and every other format below it.
- 3Copy the format you need with the copy button next to it.
- 4Check the contrast ratios and suggested text color before using the color as a background.
Formula and method
A HEX code is simply the red, green and blue channels (0–255) written as two hexadecimal digits each. To get HSL, the channels are scaled to 0–1 (R′, G′, B′); lightness is the average of the largest and smallest channel, saturation is the channel range divided by 1 − |2L − 1|, and hue is the angle on the color wheel determined by which channel is largest. HSV uses the same hue, V = max and S = (max − min) ÷ max.
CMYK uses the naive conversion K = 1 − max, C = (1 − R′ − K) ÷ (1 − K), and likewise for M and Y. Relative luminance follows WCAG 2: each channel is linearised with the sRGB curve and weighted 0.2126 R + 0.7152 G + 0.0722 B. Contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the lighter color.
- R′, G′, B′
- Red, green and blue channels divided by 255
- H, S, L
- Hue (degrees), saturation (%), lightness (%)
- C, M, Y, K
- Cyan, magenta, yellow and key (black) ink percentages
- L (luminance)
- WCAG relative luminance, 0 (black) to 1 (white)
Worked examples
Dodger blue #1E90FF
1E, 90 and FF in hexadecimal are 30, 144 and 255. Blue is the largest channel, giving a hue of 210°, and lightness (255 + 30) ÷ 2 ÷ 255 ≈ 56%. White text reaches only 3.24:1, so black text (6.49:1) is the readable choice.
RGB to HEX: rgb(255, 87, 51)
255 → FF, 87 → 57 and 51 → 33, so the HEX code is #FF5733. Red is the dominant channel, so the hue sits near 11° (a red-orange), and for print the color needs no cyan or black: 0% C, 66% M, 80% Y.
HSL to HEX: hsl(210, 50%, 40%)
A 210° hue at 50% saturation and 40% lightness converts to rgb(51, 102, 153), the classic web-safe #336699. It is dark enough that white text reaches 6.0:1 contrast, passing WCAG AA.
Frequently asked questions
How do I convert HEX to RGB?+
Split the 6-digit code into three pairs and convert each pair from base 16 to base 10. For #FF5733: FF = 255, 57 = 87 and 33 = 51, giving rgb(255, 87, 51). A 3-digit code like #F53 is shorthand for #FF5533.
What is the difference between HSL and HSV?+
Both use the same hue angle, but HSL lightness puts pure colors at 50% and white at 100%, while HSV value puts pure colors at 100%. CSS uses HSL; Photoshop and Figma color pickers use HSV (often called HSB).
Are the CMYK values accurate for printing?+
They use the standard mathematical conversion, which is fine for rough work. Real print output depends on the paper, inks and ICC color profile, so ask your printer for a proofed conversion when color accuracy matters.
What contrast ratio do I need for accessible text?+
WCAG 2 level AA requires at least 4.5:1 for normal text and 3:1 for large text (about 24px, or 18.66px bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text.
What does an 8-digit HEX code mean?+
The last two digits are the alpha (opacity) channel. #1E90FF80 is Dodger blue at 50% opacity (80 hex = 128 ÷ 255 ≈ 0.5). All modern browsers support 8-digit HEX in CSS.