Color Converter
Type or paste a colour in any format and get it in HEX, RGB, HSL and OKLCH, ready to copy into your CSS. It also checks the contrast against white and black text.
Type or paste a HEX, RGB, HSL or OKLCH value, or pick one.
#c23c19rgb(194 60 25)hsl(12 77% 43%)oklch(54.84% 0.1764 34.91)Contrast: 5.3:1 with white text (passes AA for normal text), 4.0:1 with black text (fails).
Questions
Which colour formats can I paste in?
HEX in 3, 4, 6 or 8 digits, rgb() and rgba(), hsl() and hsla(), and oklch(). Both the older comma style and the newer space style work, and a transparency value is kept.
What is OKLCH and why would I use it?
OKLCH describes a colour as lightness, chroma (how vivid it is) and hue. Colours with the same lightness look equally bright, which makes it easier to build palettes that feel balanced. Current browsers support it in CSS.
Why does my HEX change slightly after converting?
It should not for ordinary colours: the tool rounds to whole 0 to 255 values, which is how HEX works. Very vivid OKLCH colours that fall outside the standard screen range are pulled back to the nearest colour that fits.
How is the contrast worked out?
With the WCAG formula, comparing the colour with white and with black. Normal text needs a ratio of at least 4.5 to 1 to pass level AA. Large text needs 3 to 1.
Is anything uploaded?
No. The conversion happens in your browser as you type, and nothing is sent anywhere.
More free tools
- CSS Clamp GeneratorFluid CSS clamp() values for type and spacing, with a live preview and px to rem.
- QR Code GeneratorQR codes for links, Wi-Fi, WhatsApp and more, in your colours, with a logo in the centre.
- Favicon and App Icon GeneratorEvery favicon and app icon size from one logo, with the manifest and the HTML to paste in.
Made by Bulb Studio, a design and development studio in Kolkata.