Color Converter (HEX, RGB, HSL, CMYK)

Designers, developers and marketers juggle colour formats all the time: HEX in CSS, RGB in design apps, HSL for theming, CMYK for print. Type any colour – a hex code, an rgb() or hsl() value, a CMYK value or a CSS colour name such as “tomato” – and get every format at once, plus an accessibility contrast check and a palette of tints and shades.

Common uses

• Convert brand colours from a style guide into CSS-ready codes.
• Check that text colours pass WCAG contrast requirements.
• Create lighter and darker variants for hover states and themes.
• Translate screen colours into approximate CMYK for print briefs.

Tips for best results

• Use HSL when building themes – changing only lightness keeps the same hue.
• Check contrast for both light and dark mode backgrounds.
• Click any swatch to copy its HEX code.
• For colours taken from a photo, use the Color Picker from Image tool.

Colour models in brief

RGB mixes red, green and blue light and is how screens work. HEX is simply RGB written in hexadecimal. HSL and HSV describe colour by hue (0–360°), saturation and lightness or brightness, which is more intuitive for adjusting colours. CMYK describes cyan, magenta, yellow and black inks for print. Conversions between RGB-based models are exact; CMYK is an approximation without a colour profile.

Accessible colour choices

Around 1 in 12 men and 1 in 200 women have some form of colour vision deficiency, and many people read screens in bright sunlight. Good contrast helps everyone. The contrast ratios here follow the WCAG formula based on relative luminance, the same method used by Lighthouse and accessibility checkers, and they are required by laws and standards such as the European Accessibility Act and the ADA.