Color Converter Guide: HEX, RGB, HSL, and Why Designers Use Each
Every color on a screen can be described in several different ways β HEX codes, RGB triplets, HSL values, OKLCH, CMYK for print. Each notation makes some operations easy and others almost impossible. This guide explains the formats, when to use which, and the conversion rules.
A color on a digital display is just three numbers β how much red, green, and blue light to mix. The systems we use to write those numbers (HEX, RGB, HSL) are different ways of expressing the same thing, optimized for different kinds of work. HEX (#FF6B35) is compact and common in CSS. RGB (255, 107, 53) is closer to how the screen actually works. HSL describes the color the way humans perceive it β hue, saturation, lightness.
Understanding all three matters because tasks that are awkward in one format are trivial in another. 'Make this color 10% lighter' is hard with a HEX code but easy with HSL. 'Convert to a transparent version' is easy with RGB(A) but impossible with HEX (without converting first). Designers learn to switch between formats based on the task at hand.
The five main color formats
- HEX (#FF6B35)
- Six hexadecimal digits encoding red, green, blue values from 00 to FF (0 to 255). Compact, ubiquitous in CSS, but opaque to humans without conversion.
- RGB (255, 107, 53)
- Red, green, blue values from 0 to 255. The native format for digital displays. RGBA adds an alpha (transparency) channel from 0 (transparent) to 1 (opaque).
- HSL (15Β°, 100%, 60%)
- Hue (color around the wheel, 0β360Β°), saturation (intensity, 0β100%), lightness (0% black, 100% white). Easy to manipulate intuitively.
- OKLCH (70%, 0.18, 30Β°)
- A perceptually uniform color space. Modern alternative to HSL. Used in cutting-edge design tools because equal numerical changes produce equal perceived changes.
- CMYK (0%, 58%, 79%, 0%)
- Cyan, Magenta, Yellow, Key (black). Used for print, where ink subtracts from white paper rather than light adding to a black screen. Cannot represent all RGB colors.
When each format wins
| Task | Best format | Why |
|---|---|---|
| Pasting a color in CSS | HEX or RGB | Both are universally supported; HEX is shorter. |
| Making a color lighter or darker | HSL or OKLCH | Adjust lightness, leave hue/saturation alone. |
| Generating a hue palette (analogous, complementary) | HSL or HCL | Hue is a single rotatable value. |
| Adding transparency | RGBA or HSLA | HEX needs the 8-digit form (#FF6B35CC) which is less readable. |
| Print design | CMYK | What the printer actually mixes. |
| Accessibility / contrast checking | RGB | Contrast formulas operate on linearized RGB values. |
| Designer-friendly variation | OKLCH | Equal numerical steps look like equal perceptual steps. |
How HEX maps to RGB (and back)
Each pair of HEX digits is a value from 0 to 255 in base 16. #FF6B35 splits into FF (red), 6B (green), 35 (blue). FF in base 16 is 255 in decimal; 6B is 107; 35 is 53. So #FF6B35 = RGB(255, 107, 53).
The reverse works the same: take each RGB value, convert to base 16, pad to two digits, and concatenate. 0 becomes 00; 255 becomes FF; intermediate values fall in between. This calculator does the conversion automatically β paste any color in any format and see the equivalents in all formats simultaneously.
Color tips that improve almost any design
- β’Pick one base hue and stick to it. A site that uses 30 random colors looks chaotic; a site that uses 3 hues with varied lightness looks designed.
- β’Use HSL for variants. Same hue and saturation, vary lightness for hover states, disabled states, dividers.
- β’Always check contrast. Dark text on dark background (or its inverse) fails accessibility β aim for at least 4.5:1 contrast ratio for body text. Use the contrast checker tool.
- β’Beware of pure black (#000000). Most well-designed sites use a near-black like #111 or #222. Pure black is heavier than the surrounding UI tends to be.
- β’Limit pure red (#FF0000) and pure blue (#0000FF). Both can vibrate against each other and tend to look amateurish. Slightly desaturated alternatives feel more designed.
Extended FAQ
Why are some colors visible on screen but not in print?
Screens use additive color (RGB light) and can produce bright, saturated colors. Printers use subtractive color (CMYK ink on paper) and cannot reach the same saturation in some hues β especially neon greens and electric blues. The 'gamut' of CMYK is smaller than RGB.
What's the difference between #abc and #aabbcc?
Three-digit HEX is shorthand: each digit is doubled. #abc = #aabbcc. The shorter form can only express colors where each channel pair is identical (00, 11, 22, ... ff).
Should I use HSL or OKLCH for my design system?
Both work. HSL has wider browser support (universal). OKLCH is in all modern browsers as of 2023 and produces more visually consistent palettes β equal lightness in OKLCH actually looks equally light, which isn't true in HSL.
Why do different browsers render the same hex slightly differently?
Color management: each device has a slightly different color profile, ambient lighting, and gamut. The HEX value is correct everywhere, but the display interprets it slightly differently. This is normal and unavoidable for general web work.
Is the color I paste here saved?
No. The converter runs entirely in your browser. Nothing is uploaded.