Color Code Converter — HEX, RGB & HSL
Convert colors between HEX, RGB, and HSL formats with a live color preview. Essential for designers and front-end developers.
How to Convert Color Codes
- 1Enter a HEX color code (e.g., #6366f1) in the HEX field
- 2RGB and HSL values update automatically
- 3You can also enter RGB or HSL values directly
- 4Copy any format with the copy button
Key Benefits
- Bidirectional conversion between all three formats
- Live color preview swatch
- Copy any format with one click
- Instant update as you type
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?
HEX (#RRGGBB) encodes each colour channel as two hexadecimal digits — compact and the most common format in design tools, style guides, and CSS. RGB (red, green, blue) uses decimal values from 0–255 per channel — easier to reason about when mixing colours programmatically. HSL (hue, saturation, lightness) describes colour by its perceived properties: hue as a 0–360° angle on the colour wheel, saturation as intensity, and lightness from black to white. HSL makes it intuitive to create related colour variants by adjusting a single axis.
Why is HSL useful for designers and design systems?
HSL lets you create tints, shades, and muted variants of a colour by changing only the L or S value while keeping the hue constant. For example, hsl(230, 70%, 50%) and hsl(230, 70%, 85%) are visually the same colour family — one darker, one lighter — which is exactly how design tokens and accessible colour palettes are built. It is much harder to achieve the same intuition with HEX values alone.
What is the RGBA format and how does it relate to this tool?
RGBA adds a fourth alpha channel (0–1) for transparency, as in rgba(99, 102, 241, 0.5) for 50% opacity. This tool converts between the three opaque formats (HEX, RGB, HSL). For alpha support, use CSS's rgba() or hsla() notation directly, or the 8-digit hex form #RRGGBBAA.
Which colour format should I use in CSS?
All three work in CSS and produce identical results. HEX is the most compact and widely used for static values in stylesheets. RGB is convenient when you need transparency (rgba()). HSL shines in design systems and component libraries where you want to derive lighter/darker variants by adjusting the L value rather than computing a new hex code. Pick the format that makes the intent clearest in your codebase.
How does colour choice affect accessibility?
The colour format you use does not affect accessibility — HEX and RGB for the same colour have identical contrast ratios. What matters is the luminance difference between foreground and background. WCAG 2.1 recommends a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. If you are auditing colours, converting to RGB is a useful step since contrast checkers work from RGB values.
Why do some tools use 3-digit HEX codes like #fff?
#fff is shorthand for #ffffff. When both hex digits in each RGB pair are identical — like ff, cc, or 00 — you can abbreviate each pair to a single digit. So #aabbcc becomes #abc and #ffffff becomes #fff. It is valid CSS and produces the exact same colour. Not all colours can be shortened — only those where every pair has matching digits.