Color converter
Paste a colour in any CSS format and get every other one, plus its contrast.
Paste HEX, rgb(), hsl(), hwb() or a CSS colour name, or pick one
Tints and shades
Values
- HEX
- #3a5bd9
- RGB
- rgb(58, 91, 217)
- HSL
- hsl(227.5, 67.7%, 53.9%)
- HSV / HSB
- hsv(227.5, 73.3%, 85.1%)
- HWB
- hwb(227.5 22.7% 14.9%)
- CMYK
- cmyk(73%, 58%, 0%, 15%)
- An approximation. Printed colour depends on the inks and paper, so ask your printer for exact values.
- OKLCH
- oklch(52.35% 0.1965 267.75)
- Nearest CSS name
- royalblue
Contrast (WCAG)
Text in this colour on each background. Normal text needs 4.5:1 for AA and 7:1 for AAA; large text (18pt, or 14pt bold) needs 3:1 and 4.5:1.
On white
Large text
The quick brown fox jumps over the lazy dog
5.71:1
- AA normal passes
- AAA normal fails
- AA large passes
- AAA large passes
On black
Large text
The quick brown fox jumps over the lazy dog
3.68:1
- AA normal fails
- AAA normal fails
- AA large passes
- AAA large fails
On #ffffff
Large text
The quick brown fox jumps over the lazy dog
5.71:1
- AA normal passes
- AAA normal fails
- AA large passes
- AAA large passes
Report a problem with this tool
How to use Color converter
Enter a colour
Paste a HEX code, rgb(), hsl(), hwb() or a name like tomato, or pick one with the colour picker.
Copy the format you need
Every format updates as you type. Copy any one with its button, or pick your usual format for the big Copy button.
Check the contrast
See the WCAG contrast ratio on white, on black and on a background of your choice, with AA and AAA results for normal and large text.
Why use Utils365
Reads any CSS colour
3, 4, 6 and 8-digit HEX, rgb() and hsl() in old comma or new space syntax, hwb(), percentages, hue units and all 148 colour names.
Modern formats too
Get OKLCH for design systems and wide-gamut CSS, HWB and HSV for colour pickers, and HEX with alpha for see-through colours.
Accessibility built in
Contrast ratios follow WCAG 2 exactly and are never rounded up into a pass, so 4.49:1 doesn’t pass as 4.5:1.
Tints and shades
Five lighter and five darker steps sit under the swatch. Click one to make it the current colour.
Frequently asked questions
What’s the difference between HEX and RGB?
None in the colour itself. Both give red, green and blue from 0 to 255. HEX writes each as two hex digits, so rgb(58, 91, 217) is #3a5bd9. HEX is shorter, while rgb() is easier to read and adjust by hand.
What is HSL?
Hue, saturation and lightness. Hue is the position on the colour wheel in degrees (0 is red, 120 green, 240 blue), saturation is how vivid it is, and lightness runs from black at 0% to white at 100%. It makes lighter, darker or muted versions of a colour easy to write.
Why doesn’t the CMYK match my printed colour?
Screens mix light and printers mix ink, and the result depends on the inks, paper and printer profile. The CMYK shown uses the simple standard formula, so treat it as a starting point and ask your printer for exact values.
What is a WCAG contrast ratio?
A measure of how far apart two colours are in brightness, from 1:1 (the same) to 21:1 (black on white). WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text; AAA asks for 7:1 and 4.5:1.
What is OKLCH?
A newer way of writing colours in CSS by lightness, chroma and hue, based on how people see colour. Changing the lightness keeps the hue looking the same, which makes it popular for design systems and colour scales.
How does the colour name work?
If the colour matches one of the 148 CSS colour names exactly, that name is shown. Otherwise you get the closest one by how similar they look, which is handy for describing a colour in words.