Colour Converter
Pick a colour or type HEX, RGB or HSL to convert between them and check accessibility contrast.
Este conteúdo está em inglês.
Exemplos resolvidos
Converting a brand orange
#ff4a1f typed into the colour box
RGB 255, 74, 31; HSL 12, 100%, 56%. Contrast against white is 3.36:1.
That contrast is below 4.5:1, so white text on this orange would fail the AA check for normal text; it is better used for large headings or as a background with dark text.
Converting an RGB blue
rgb(0, 102, 204) typed into the colour box
HEX #0066cc; HSL 210, 100%, 40%. Contrast against white is 5.57:1.
This passes the 4.5:1 AA check for normal text but not the 7:1 AAA level, so check the text size before choosing it for body copy.
Sobre Colour Converter
A colour converter translates a colour between the formats used in design tools, stylesheets and code. HEX codes such as #1A73E8 are common in web design, RGB describes a colour by its red, green and blue channels, and HSL describes hue, saturation and lightness. Switching between them helps when you need to match a brand colour or adjust a shade without guessing the values.
The tool also shows the WCAG contrast ratio of your colour against white and black text. WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text, while AAA requires 7:1 for normal text. Checking early helps you choose text and background pairs that stay readable for more people, including those with low vision.
Como usar Colour Converter
- Enter a colour as a HEX code, RGB values or HSL values.
- Read the equivalent values in the other two formats.
- Note the contrast ratio against white and black text.
- Compare the ratio with 4.5:1 for AA or 7:1 for AAA on normal text.
- Change the colour and check again if the ratio falls short.
Usos comuns
- Matching a brand colour between design files and website code
- Checking that button text is readable on a coloured background
- Converting a HEX value from a design file into RGB for an app
- Adjusting the lightness of a colour in HSL to build a shade range
Perguntas frequentes
What contrast ratio do I need for accessible text?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text, meaning 18pt or 14pt bold. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. Aim for the level your project needs, and check each pairing of text and background colour separately rather than assuming one colour works everywhere.
What is the difference between HEX, RGB and HSL?
HEX and RGB describe the same colour in different notation. HEX writes red, green and blue as pairs of hexadecimal digits, such as #FF0000 for pure red. RGB uses decimal values from 0 to 255 for each channel. HSL describes a colour by hue, saturation and lightness, which is often easier for adjusting shades by hand.
How do I check if my colour passes WCAG?
Enter the colour, then read its contrast ratio against white and black text. Compare the figure with the WCAG threshold for your text size. For normal text, the ratio must be at least 4.5:1 for AA and 7:1 for AAA. Remember that the tool checks only white and black text, so test your actual background and text colours as a pair if your text is another colour.
Can I convert HEX to RGB?
Yes. Enter the six-digit HEX code, and the tool shows the matching RGB values. Each pair of HEX digits converts to a decimal number from 0 to 255. For example, #3366CC becomes RGB 51, 102, 204. The same colour also appears in HSL, so you can compare all three formats.
Why is my contrast ratio lower than expected?
Contrast depends on relative luminance, so two colours can look quite different yet score a low ratio if their brightness is close. Mid-tones are a common problem, because a colour of medium lightness can score poorly against both white and black text. Adjust the lightness of one colour and recheck until the ratio meets the level you need.