Color Converter
Convert colours between HEX, RGB, and HSL formats instantly. Pick, edit, and copy.
Colour Formats: When to Use What
Every colour on your screen can be described in multiple formats. HEX (#FF5733) is the web standard — compact and universally recognised. RGB (255, 87, 51) is intuitive because it maps directly to how screens work: red, green, and blue light mixed at different intensities. HSL (14, 100%, 60%) describes colour the way humans think about it: hue (the colour), saturation (how vivid), and lightness (how bright).
Different situations call for different formats. Designers usually think in HSL because adjusting lightness or saturation is intuitive — just change one number. Developers often work in HEX because it's what Figma and design tools export. Backend systems and APIs sometimes use RGB integers.
This converter lets you enter any format and instantly see all others. Edit one value and everything updates in real time.
Colour Format Comparison
| Format | Example | Range | Best For |
|---|---|---|---|
| HEX | #FF5733 | #000000 - #FFFFFF | CSS, design tools, compact notation |
| RGB | rgb(255, 87, 51) | 0-255 per channel | Programmatic colour manipulation |
| HSL | hsl(14, 100%, 60%) | H: 0-360, S: 0-100%, L: 0-100% | Intuitive colour adjustments |
| RGBA | rgba(255, 87, 51, 0.8) | 0-255 + alpha 0-1 | Semi-transparent colours |
| HSLA | hsla(14, 100%, 60%, 0.8) | HSL + alpha 0-1 | Transparent colour with HSL control |
What this means for you: Use HEX for static colours in CSS. Use HSL when you need to create colour variations (just adjust lightness for hover states). Use RGBA/HSLA when you need transparency. Modern CSS supports all formats natively.
Practical Colour Tips
Creating colour scales with HSL
Keep hue and saturation constant, vary lightness: 95% for backgrounds, 60% for primary, 40% for hover, 20% for text. That's how design systems like Tailwind generate their colour palettes — one hue, multiple lightness stops.
Accessible colour contrast
WCAG requires 4.5:1 contrast ratio for normal text and 3:1 for large text. In HSL terms, you generally need at least 40% lightness difference between text and background. Dark text on light backgrounds is almost always safer.
Shorthand HEX
#FFF is shorthand for #FFFFFF (each digit doubled). Only works when each pair is the same digit: #ABC = #AABBCC. #F53 = #FF5533. Modern CSS also supports #RRGGBBAA for HEX with alpha.
CSS colour keywords
CSS supports 147 named colours (tomato, cornflowerblue, rebeccapurple). They're convenient for prototyping but imprecise for design systems. Use HEX or HSL values from your design tool for production.
Modern CSS Colour Functions
CSS has moved beyond just HEX and RGB. Newer colour spaces offer wider gamuts and more intuitive manipulation:
| Function | Example | Why It Matters |
|---|---|---|
| oklch() | oklch(70% 0.15 150) | Perceptually uniform — equal lightness changes look equal |
| oklab() | oklab(70% -0.1 0.1) | Best for colour mixing and interpolation |
| color() | color(display-p3 1 0 0) | Access wider gamut colours on modern displays |
| color-mix() | color-mix(in oklch, red 50%, blue) | Mix colours directly in CSS — no preprocessor needed |
| light-dark() | light-dark(#333, #eee) | Automatic dark mode colours without media queries |
oklch() is becoming the recommended default for design systems because changing lightness or chroma by the same amount across different hues produces visually consistent results — something HSL can't do.
Related Tools
How to use this tool
Enter a colour in HEX, RGB, or HSL
See all other formats update instantly
Click any value to copy it
Common uses
- Converting Figma HEX colours to CSS RGB values
- Creating HSL colour variations for design systems
- Translating colour values between design and code
- Checking colour values for accessibility contrast
Share this tool