Color Code Converter — HEX, RGB, HSL and CSS Color Format Converter

Our free color code converter instantly converts between HEX, RGB, HSL color formats with a live preview. Use the color picker or type any hex code to see all formats update in real time. Essential for web developers, UI designers, CSS developers and anyone working with digital colour in code.

Color Format Reference

HEX (#RRGGBB) — Six hexadecimal digits representing Red, Green, Blue intensity (00–FF each). The standard format for HTML and CSS. #000000 is black, #FFFFFF is white, #FF0000 is red. Shorthand (#RGB) can be used when each pair repeats (#FF5500 = #F50).
RGB (r, g, b) — Three decimal values (0–255) for Red, Green, Blue. Natively understood by all displays. rgb(255, 0, 0) is pure red. Also supports rgba() with an alpha (opacity) channel.
HSL (hue, saturation, lightness) — More intuitive for design work. Hue is the colour angle (0–360°), Saturation is the intensity (0–100%), Lightness is the brightness (0–100%). hsl(0, 100%, 50%) is red. Great for creating colour variations by adjusting lightness.

Web Accessibility and Colour Contrast

The WCAG 2.1 accessibility standard requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text between foreground and background colours. The contrast ratio is calculated from the relative luminance of both colours. Using a colour with insufficient contrast fails AA accessibility compliance and makes your content unreadable for users with visual impairments, colour blindness or in bright lighting conditions.

Colour in CSS — Best Practices

Use CSS custom properties (variables) to define your colour palette once and reference it throughout your stylesheet — making theme changes a single-line update. Define colours in HSL format in your design system to make it easy to generate consistent lighter and darker variants. For dark mode support, use prefers-color-scheme media queries with CSS variable overrides.