Color code conversions
Pick a conversion for a focused converter with the formula and a reference table, or use the full color converter for every format at once.
Convert a color code
Choose a conversion
Color formats at a glance
| Format | Example | Used for |
|---|---|---|
| Hex | #3B82F6 | CSS, design tools, brand guidelines |
| RGB | rgb(59, 130, 246) | Screens, CSS, image editors |
| HSL | hsl(217, 91%, 60%) | Adjusting colors by hand in CSS |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Printing |
| OKLCH | oklch(62.3% 0.188 259.81) | Modern CSS and perceptual color systems |
A hex code is a color written as three pairs of hexadecimal digits, one each for red, green and blue, such as #3B82F6. It is the most common way to write colors in CSS and design tools.
RGB describes a color by how much red, green and blue light it contains, each from 0 to 255, such as rgb(59, 130, 246). Screens build every color from these three lights.
HSL describes a color by hue (an angle from 0 to 360°), saturation and lightness (both percentages), such as hsl(217, 91%, 60%). It is easier to adjust by hand than RGB.
CMYK describes a printed color by the cyan, magenta, yellow and black (K) ink it needs, as percentages. Printers mix inks, which subtract light, so CMYK covers fewer bright colors than RGB.
Which format should you use?
- Websites and apps: hex or RGB, or OKLCH in modern CSS for design tokens.
- Tweaking colors by hand: HSL or OKLCH, because hue, saturation and lightness are separate.
- Print: CMYK, ideally from your printer’s ICC profile rather than a formula.
- Sharing with developers: hex, which every tool understands.
- Brand guidelines: list hex, RGB and CMYK for each color, plus a Pantone reference if your printer needs one.
Frequently asked questions
Which color format should I use?
Use hex or RGB for the web and design tools, HSL when you tweak colors by hand, OKLCH for modern design systems that need even steps, and CMYK only when preparing files for print.
What is the most common color format?
Hex codes such as #3B82F6 are the most common in web and design work; RGB is how screens actually produce color.
Why does my CMYK print look different from the screen?
Screens mix light (RGB) and printers mix ink (CMYK), and ink cannot reproduce the brightest screen colors. Use your printer’s profile and a proof.
What is OKLCH?
OKLCH is a perceptual color format in modern CSS: lightness, chroma and hue, spaced so equal steps look equal. The full color converter supports it.