Color Converter

How to Use the Color Converter

1. 1. Enter a color. Paste or type it in any notation the box accepts — #336699, rgb(51 102 153), hsl(210 50% 40%), hwb(210 20% 40%), cmyk(67%, 33%, 0%, 40%) or a CSS name such as rebeccapurple. A bare 51 102 153 is read as RGB.
2. 2. Or use the picker. The picker sets the color and keeps any transparency you already typed.
3. 3. Copy what you need. Each notation has its own copy button, and Copy CSS gives you the HEX, RGB, HSL and OKLCH values as custom properties for a stylesheet.
4. 4. Check the name. The tool shows the CSS keyword when your color is exactly one (rebeccapurple is #663399) and the nearest keyword when it is not.

How the Conversions Work

Everything is converted through sRGB, the color space a browser paints in. A HEX code is just RGB in base 16: #336699 is red 0x33 = 51, green 0x66 = 102, blue 0x99 = 153. The other notations rearrange the same three numbers.

• HSL describes a color as hue (an angle on the color wheel, 0–360°), saturation and lightness. With the largest channel max and smallest min (each divided by 255), lightness is (max + min) ÷ 2, and saturation is (max − min) ÷ (1 − |2L − 1|). Hue comes from which channel is largest.
• HSV (also called HSB) keeps the same hue but measures value as max and saturation as (max − min) ÷ max. It is the model most color pickers draw.
• HWB is whiteness (min) and blackness (1 − max) on top of a pure hue; it is easier to reason about than HSL when you want a tint or a shade. If whiteness plus blackness reaches 100%, the result is a grey.
• CMYK is shown as the simple device conversion: K = 1 − max, then each of C, M and Y is (1 − channel − K) ÷ (1 − K). It involves no inks, paper or profile.
• OKLCH is lightness, chroma and hue in Björn Ottosson’s OKLab space, which CSS Color 4 supports as oklch(). Equal steps in L look far closer to equal steps in brightness than they do in RGB or HSL.

Why CMYK Here Is Not a Print Color

Screens add light in red, green and blue; printers lay down cyan, magenta, yellow and black ink on paper. The two gamuts differ, and the ink on the page depends on the paper, the press and the ICC profile that describes them. A formula that works from RGB alone cannot know any of that, so the CMYK above is a notation, not a prediction: pure screen blue #0000ff becomes 100% cyan and 100% magenta, which prints as a duller violet. For a poster or a printed figure, give your printer the artwork in RGB and ask for their profile, or convert with that profile in a design application.

Rounding, Clamping and Transparency

• Rounding. HEX and rgb() hold whole numbers from 0 to 255, so a color typed as hsl(210 50% 41%) is rounded to the nearest 8-bit value. Converting that value back gives a slightly different HSL — the 8-bit grid is coarser than HSL’s.
• Out-of-range channels. Values outside the range are clamped, as browsers do: rgb(300 0 0) is #ff0000, and a negative channel becomes 0.
• Hue units. deg, grad, rad and turn are accepted, and hue wraps: −150° is the same as 210°.
• Alpha. #rrggbbaa, #rgba and / 50% all work. The alpha is stored to 8 bits in the 8-digit HEX, so 50% becomes 80 and reads back as 50.2%.

Frequently Asked Questions

How do I convert HEX to RGB?

Split the six digits into three pairs and read each pair as a base-16 number: #336699 is 33, 66 and 99, which are 51, 102 and 153. Paste the HEX code into the box and the RGB value appears at once, along with HSL, HWB, HSV, CMYK and OKLCH.

What is the difference between HSL and HSV?

Both use the same hue angle. HSL puts white at full lightness whatever the saturation, so its middle is the pure color; HSV puts the pure color at full value and saturation, and white at zero saturation. HSL is what CSS supports as hsl(), while HSV (or HSB) is what most color pickers display.

Is the CMYK value accurate for printing?

No. It is the naive conversion from RGB with no ink, paper or ICC profile, so it describes the same numbers differently rather than predicting what a press will print. Colors outside the printer’s gamut, such as bright screen blues and greens, will print duller. Use your printer’s profile for anything that matters.

What does the nearest CSS name mean?

CSS defines 148 color keywords. If your color is exactly one of them, the tool shows it without qualification. Otherwise it shows the keyword that is closest in OKLab, a space built so that distance matches perceived difference — useful for naming a color in a comment, not as a substitute for the code.

Why does my HSL value change slightly after a round trip?

HEX and RGB store each channel as one of 256 values, and HSL does not map one-to-one onto that grid. A color typed in HSL is rounded to the nearest RGB value, and the HSL shown is computed from the rounded value. Starting from a HEX code, every conversion is exact to the displayed precision.

Is my color data sent anywhere?

No. The conversion is plain arithmetic in your browser; nothing you type is uploaded or stored.