Color Converter
Enter a CSS color name or code to see its RGB, HEX, HSL, HWB, CMYK, and NCol values, along with a color preview.
HEX ⇄ RGB ⇄ HSL Color Converter
Color Converter Formula
Where:
- \(h_1,\ldots,h_6\) — the six digits of a HEX color, read as values from 0 to 15; A through F represent 10 through 15.
- \(R\), \(G\), and \(B\) — the red, green, and blue channel values, each from 0 to 255.
This formula converts a six-digit HEX color to RGB. The calculator also accepts other supported color formats and converts between them.
Color Converter – Calculation Example
Example: the default input is skyblue. This named color corresponds to #87CEEB, so its HEX digit pairs can be converted to RGB.
\[R=8(16)+7=135,\qquad G=12(16)+14=206,\qquad B=14(16)+11=235\]
Result: skyblue has HEX value #87CEEB and RGB value rgb(135, 206, 235). Its HSL values are approximately 197° hue, 71% saturation, and 73% lightness.
How to use the Color Converter
- Enter a color in the Color field. You can start with the default
skyblue, type a CSS color name such asred, or enter a code such as#f00orrgb(255,0,0). - Check the Color result for a visual preview of the interpreted input.
- Copy the format you need from Name, RGB, HEX, HSL, HWB, CMYK, or NCol.
If Name says “no name,” the color has no matching name in the converter’s named-color list. The numeric results can still represent a valid color.
What the color formats mean
A digital color can be described in several ways without changing its appearance. HEX writes red, green, and blue as hexadecimal digit pairs: #87CEEB means red 87, green CE, and blue EB in base 16. RGB expresses those same channels as decimal numbers from 0 to 255. If you want to work through the base-16 arithmetic separately, use the Hex Converter; it converts numbers, not complete CSS color values.
HSL describes hue, saturation, and lightness. Hue is a position around a color wheel, usually expressed in degrees; saturation describes color intensity, and lightness runs from black toward white. HWB uses hue, whiteness, and blackness instead. These formats can be easier to read when you are comparing shades or adjusting a color by eye. RGB and HEX are often more convenient when a specification calls for exact channel values.
CMYK gives cyan, magenta, yellow, and black values derived from the screen color. NCol is a hue-based notation provided by the converter; it is not as commonly used in CSS as HEX, RGB, or HSL. The output format changes how a color is written, not the underlying color chosen. Small differences in displayed percentages can result from rounding.
Practical limits and tips
The converter needs an input its color parser recognizes. Standard CSS color names and common CSS-style color codes are useful starting points. A three-digit HEX code is shorthand: for example, #f00 expands to #ff0000. HEX letters are case-insensitive, so #87ceeb and #87CEEB represent the same color.
Some inputs include an alpha value, which controls transparency. For recognized alpha-bearing inputs, the RGB, HSL, HWB, and NCol results use alpha-bearing forms. Check each result before copying it into another application: not every listed format describes transparency in the same way. The preview can also look different against a different background when a color is partly transparent.
CMYK here is a mathematical conversion from a digital color, not a print-profile conversion. Printed appearance depends on the printer, inks, paper, and color-management settings, so use a suitable print workflow when exact production color matters. Likewise, a color’s appearance on screen depends on the display and its settings; matching numeric values alone cannot guarantee identical appearance on every device.
If you place a HEX color in a URL query parameter, remember that # has a special meaning in URLs. Use the URL Encoder to encode the value when needed.
Frequently Asked Questions
How do I convert RGB to HEX by hand?
Convert each RGB channel from decimal to two hexadecimal digits, then join the three pairs after a #. Divide a channel value by 16: the whole-number quotient is the first digit, and the remainder is the second. For example, 206 gives quotient 12 (C) and remainder 14 (E), so it becomes CE. A value below 16 needs a leading zero, such as 9 becoming 09.
How can I calculate HSL from RGB?
First divide each RGB channel by 255, then find the largest value \(M\) and smallest value \(m\). Lightness is \(L=(M+m)/2\). If \(M=m\), saturation is zero and hue has no meaningful value. Otherwise, saturation is \((M-m)/(1-|2L-1|)\); hue depends on which channel is largest. For example, pure red, rgb(255, 0, 0), is hsl(0, 100%, 50%).
What is a good contrast ratio for text and background colors?
For common WCAG 2.2 AA targets, aim for at least 4.5:1 for normal text and 3:1 for large text. AAA targets are 7:1 and 4.5:1, respectively. A color converter alone cannot tell you whether a pairing meets those targets: contrast depends on both colors. Check the actual foreground and background together, including the background visible behind transparent colors.
Why does a gray color have a hue value?
Hue is mathematically undefined when a color has no saturation, as with RGB values whose three channels are equal. A converter may display a placeholder hue, often 0°, to keep the HSL or HWB notation complete. That number does not make the gray reddish. As saturation approaches zero, small channel changes can also cause large changes in the reported hue without much visible change.
Does an alpha value change the color's RGB channels?
Alpha controls how much of a color shows over its background; it does not, by itself, change the color's stored RGB channels. An alpha value of 0 is fully transparent, while 1 is fully opaque. The visible result depends on the background: for each channel, the displayed value is approximately \(\alpha\times\text{foreground}+(1-\alpha)\times\text{background}\). A transparent red can therefore look pink over white.
Why might a color change slightly after converting it back and forth?
Conversions can introduce rounding. RGB channels are commonly stored as whole numbers from 0 to 255, while HSL and other formats may show rounded degrees or percentages. Re-entering those rounded results can produce slightly different RGB values. To preserve an exact RGB color through edits or copies, keep its original RGB or six-digit HEX value rather than relying on rounded intermediate results.