Color Converter
Convert one colour into every common CSS notation and check whether text on it will actually be readable.
Your data stays on your device
#2542eb#2542ebffrgb(37, 66, 235)hsl(231, 83%, 53%)hsv(231, 84%, 92%)Contrast (WCAG 2.1)
Against white: 6.87:1
- AA normal text (4.5:1) — pass
- AA large text (3:1) — pass
- AAA normal text (7:1) — fail
- AAA large text (4.5:1) — pass
Against black: 3.06:1
- AA normal text (4.5:1) — fail
- AA large text (3:1) — pass
- AAA normal text (7:1) — fail
- AAA large text (4.5:1) — fail
Computed against a solid background. A semi-transparent colour composites with whatever sits behind it, so measure the rendered result instead.
About this tool
CSS accepts several colour notations and each is convenient for a different task. HEX is compact for design handoff, RGB maps to how screens work, and HSL is the only one where "slightly darker" or "less saturated" is a single-number adjustment.
Alongside the conversions the tool computes the WCAG contrast ratio against white and black, which turns a colour choice from a guess into a decision you can defend against accessibility requirements.
How to use this tool
- Enter a colour in any supported notation, or use the colour picker.
- Read the equivalent HEX, RGB, HSL and HSV values, all updated together.
- Adjust the alpha channel if you need a transparent variant.
- Check the contrast ratios to decide whether to use light or dark text on it.
Key features
- HEX, RGB, HSL and HSV conversion in every direction
- Alpha channel support with HEX8, rgba and hsla output
- Native colour picker input
- WCAG 2.1 contrast ratio against white and black
- AA and AAA pass indicators for normal and large text
- Live swatch preview of the current colour
Example
Input — Color
#2542ebOutput — Color
rgb(37, 66, 235)
hsl(231, 84%, 53%)
hsv(231, 84%, 92%)
contrast vs white 6.34:1 (AA pass)Good to know
- Conversions operate in the sRGB colour space. Wide-gamut notations such as oklch and display-p3 are not converted.
- Contrast ratio is computed for a solid background; semi-transparent colours depend on what is behind them.
- Named CSS colours are recognised on input but the output always uses numeric notations.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA raises those to 7:1 and 4.5:1 respectively.
HSL or RGB?
HSL when you are manipulating a colour — adjusting lightness or saturation is a single value change. RGB when you are matching an exact rendered value.
How is alpha written in HEX?
As two extra hex digits at the end, producing an eight-digit value such as #3b62f6cc. Modern browsers support it everywhere.
What is the difference between HSV and HSL?
They differ in the third component. HSL lightness reaches white at 100 percent; HSV value reaches the fully saturated colour. Design tools tend to use HSV, CSS uses HSL.
Your data stays on your device
Your data is processed locally in your browser and is not uploaded to our server. This page keeps working after you go offline, because there is nothing to send.