Color formats and what each one is for
Every format on this page describes the same thing: how much red, green and blue light a screen should send out. They only differ in how they write it down and in what is easy to change by hand. That is why a color converter can move between them without losing anything, apart from small rounding.
Before you use a color for text, check it against its background with the Color Contrast Checker.
- HEX is the short form of RGB that design tools, brand guides and CSS have used for decades. #FF5733 means red FF (255), green 57 (87) and blue 33 (51). Two more digits add transparency.
- RGB writes the same three channels as numbers from 0 to 255. It is easy to read in code and in APIs, and rgba() or the slash syntax adds an alpha value.
- HSL stands for hue, saturation and lightness. You turn the hue around a circle from 0 to 360 degrees and set how colorful and how light it is, which makes quick variations easy to write in CSS.
- HSV, also called HSB, uses value or brightness instead of lightness. It is the model behind the square and slider in most image editors, so it helps when you match a color from one of those apps. CSS does not accept it.
- CMYK describes cyan, magenta, yellow and black ink. It belongs to print, and the numbers here come from the simple formula, not from a printer profile.
- OKLCH describes lightness, chroma and hue in a way that matches how people see color. It is the newest of the group and works in every current major browser.
Why OKLCH is popular in modern CSS
HSL has a known flaw: its lightness is math, not perception. hsl(60, 100%, 50%) yellow and hsl(240, 100%, 50%) blue share the same 50% lightness, yet the yellow looks far brighter. Build a palette in HSL and some steps jump while others barely move, and text contrast becomes hard to predict.
OKLCH fixes that. Its L value tracks how light a color looks, so two colors with the same L feel equally bright across hues. That makes it a good fit for design systems, where you want a blue 500 and a red 500 to sit at the same visual weight, and for hover states, where you lower L a little and keep the hue. Tailwind CSS 4 ships its default palette in OKLCH for this reason.
OKLCH can also describe colors outside sRGB, the range HEX and RGB can store. Wide gamut screens show some of them, which is another reason modern sites use it. When you enter such a color here, the converter lowers only the chroma until the color fits, says so, and converts that version. The tints and shades row uses the same method: each step changes OKLCH lightness by an equal amount and keeps the hue.
Sample colors in every format
These values come from the same code as the converter above. HSL, HSV and CMYK are rounded to whole numbers.
| Color | HEX | RGB | HSL | HSV | CMYK | OKLCH |
|---|---|---|---|---|---|---|
| Warm red orange | #FF5733 | rgb(255, 87, 51) | hsl(11, 100%, 60%) | hsv(11, 80%, 100%) | cmyk(0%, 66%, 80%, 0%) | oklch(68.04% 0.21 33.69) |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) | hsv(39, 100%, 100%) | cmyk(0%, 35%, 100%, 0%) | oklch(79.27% 0.171 70.67) |
| Green | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) | hsv(120, 100%, 50%) | cmyk(100%, 0%, 100%, 50%) | oklch(51.98% 0.1769 142.5) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | hsv(240, 100%, 100%) | cmyk(100%, 100%, 0%, 0%) | oklch(45.2% 0.3132 264.05) |
| Mid gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | hsv(0, 0%, 50%) | cmyk(0%, 0%, 0%, 50%) | oklch(59.99% 0 0) |
A note on CMYK and print
The CMYK formula here takes the darkest part of the color as black ink and spreads the rest over cyan, magenta and yellow. It is handy for a rough idea or for tools that only accept CMYK numbers. A print shop works differently: it converts with an ICC profile that knows its paper, inks and press, and bright screen colors like this orange red often cannot be printed as vivid as they look on screen. For brand colors that must match on paper, ask your printer for their profile or pick a spot color from a printed swatch book.
How to use the color converter
- 1Paste a color from your CSS, a design file or a brand guide, or open the color picker and choose one.
- 2Read the color in every format and press Copy next to the one you need, for example the CSS variable line or the Tailwind class.
- 3Click a tint or shade to load a lighter or darker version, then copy a link to share the color with your team.
Frequently asked questions
Why does my HEX code change a little when I convert to HSL and back?
HSL, HSV and CMYK are shown with whole numbers, the way design apps show them. Rounding a hue to 11 instead of 10.59 can shift one RGB channel by a step when you convert back, so #FF5733 can return as #FF5833. The difference is too small to see. Copy the HEX, RGB or OKLCH value when you need the exact color.
Can I send the CMYK values straight to a printer?
Use them as a starting point only. The converter uses the simple formula that ignores paper, ink and press. Real print values come from an ICC color profile such as the one your print shop uses, and the same RGB color can get quite different CMYK numbers from two profiles. Ask your printer for their profile and convert in your design app.
What does it mean when an OKLCH color is outside sRGB?
OKLCH can describe colors that are more saturated than HEX and RGB can store. Wide gamut screens can show some of them, standard screens cannot. The converter keeps the lightness and hue, lowers the chroma until the color fits into sRGB and tells you how far it had to go. In CSS you can still use the original oklch() value; the browser maps it to what the screen can show.
What is the difference between HSL and HSV?
Both use the same hue, but they treat brightness differently. In HSL, 100% lightness is always white and 50% is the pure color. In HSV, also called HSB, 100% value is the brightest version of the color and white needs 0% saturation too. HSL is what CSS understands, HSV is common in the color pickers of image editors.
How do I convert a transparent color?
Enter an 8 digit HEX code like #FF573380, rgba(255, 87, 51, 0.5) or oklch(68% 0.21 34 / 0.5). The converter keeps the alpha in HEX, RGB, HSL and OKLCH. HSV and CMYK have no alpha channel, so they show the solid color.