How to use Color Converter
- Type a colour in any form (#047857, rgb(4, 120, 87), hsl(163 94% 24%), teal) or tap the swatch to pick one.
- Copy the format you need from the list: HEX, RGB, HSL, HSB, HWB, CMYK, 0–1 values, Swift, Android.
- Read the contrast on white and on black and whether text passes WCAG AA or AAA.
- Tap a tint or shade to convert it in turn, for hover states and borders.
Why use Color Converter
Every format at once
Nine forms, each with Copy, including the new CSS space syntax and the values app code wants.
Contrast built in
The WCAG 2 ratio against white and black with the grade, and which text colour to use on the swatch.
Named colours
All 148 CSS names understood, and the nearest one named for any colour.
Tints and shades
Nine steps lighter and darker that keep the hue, for a quick palette.
About this tool
The same colour is written many ways: #047857 in CSS, rgb(4, 120, 87) in older code, hsl() when you want to tweak lightness, CMYK percentages for print, 0–1 floats in Swift and 0xFF hex in Android. Converting by hand is error-prone and most converters do one pair at a time. This page reads any of them and shows all of them, so a brand colour can go from a style guide into CSS, a print file and an app in one visit.
The maths is sRGB throughout; CMYK is the simple conversion designers use for a quick check, not a press profile. Contrast follows WCAG 2 relative luminance, the rule accessibility checkers apply: 4.5:1 for normal text, 3:1 for large text, 7:1 for AAA. Everything runs in your browser.
Frequently asked questions
How do I convert RGB to hex?
Type rgb(4, 120, 87) or just 4, 120, 87 and copy the HEX row: #047857.
What is HSL good for?
Adjusting a colour: keep the hue, change the lightness for hover and disabled states. The tints and shades row does exactly that.
Is the CMYK accurate for print?
It is the standard formula, good for a quick check. Real ink values depend on the press profile; ask the printer for theirs or convert in your design tool with that profile.
What contrast does text need?
WCAG AA: 4.5:1 for normal text and 3:1 for large text (24 px, or 19 px bold). AAA: 7:1. The swatch shows the ratio on white and black.
Does it support transparency?
Yes: #04785780, rgb(4 120 87 / 0.5) and hsl(… / 50%) keep the alpha in the CSS forms.