Colour Tools
Convert between colour formats, check text contrast against WCAG, and build a palette that holds together.
Runs in your browserPick a colour
Converted values
- HEX
#3b82f6 - RGB
rgb(59, 130, 246) - HSL
hsl(217, 91%, 60%) - HSV
hsv(217, 76%, 96%) - CMYK
cmyk(76%, 47%, 0%, 4%)
CMYK values are a naive conversion for reference only. Real print output depends on the ink, the paper and the colour profile — always get a proof.
Text contrast check
Sample heading
This is how body text looks in this combination. Read the sentence and decide whether your eyes agree with the number.
AA body text
≥ 4.5
AA large text
≥ 3
AAA body text
≥ 7
AAA large text
≥ 4.5
This combination fails AA for body text
Here is the nearest shade of the same colour that reaches 4.5:1. Hue and saturation are unchanged, so it still belongs to your palette.
#1c1c1c4.63:1 Palette
Lightness ramp — click a step to copy it
Harmony
Preview
Heading on this colour
Body text is shown here in whichever of white or near-black has the higher contrast against the selected colour.
The text colour above was chosen by comparing contrast ratios, not by judging brightness by eye.
Good to know
- Contrast thresholds come from WCAG 2.x: 4.5 for body text, 3 for large text at AA; 7 and 4.5 at AAA.
- CMYK here is a plain conversion with no colour management. Use it as a starting reference, not as a print specification.
- The ramp adjusts HSL lightness rather than mixing with white or black, so saturation survives and the light steps do not turn grey.
About this tool
Pick a colour and see it in every format at once, then do the two things that actually decide whether a palette works. First, contrast: the checker reports the WCAG ratio and whether it passes for normal and large text, and when it fails it offers the nearest colour that passes while keeping your hue and saturation, so you can apply it rather than guess. Second, the ramp: a ten-step lightness scale built by moving the HSL lightness channel, not by mixing toward white and black, because mixing also drags saturation down and produces the greyish pastels that give amateur palettes away.
How to use it
- 1Choose a base colour with the picker, the hex field, or the hue and saturation sliders. Every format updates together and each one can be copied with a click.
- 2For contrast, set the text colour and the background. Read the ratio and the four WCAG results — AA for body text needs 4.5, AAA needs 7.
- 3If the contrast fails, apply the suggested replacement, then take the ten-step ramp or a harmony set as the basis for the rest of the interface.
Frequently asked questions
What does the contrast ratio actually mean?
It is the ratio between the relative luminance of the lighter and the darker colour, from 1 for identical colours to 21 for black on white. WCAG sets thresholds against it: 4.5 for body text and 3 for large text at level AA, rising to 7 and 4.5 at level AAA. The number is not a matter of taste — it is a defined calculation, which is why this tool shows the value to two decimals rather than labelling colours as simply readable or not.
Why does the suggested fix only change lightness?
Because changing the hue changes what colour it is, and you chose that colour for a reason. Adjusting only lightness searches for the nearest shade that reaches the required ratio while preserving the hue and saturation you picked, so the result still belongs to the palette. If the suggestion also moved the hue, you would be replacing your brand colour to satisfy a contrast checker rather than fixing the one property that governs contrast.
Is the ramp the same as tinting and shading?
No, and the difference is visible. Tinting mixes toward white, which lowers saturation as it brightens, so the top of the ramp turns grey and washed out. This ramp moves the HSL lightness channel instead and trims saturation slightly at the extremes, so every step stays recognisably the same colour. It is the difference between a designed palette and a set of swatches that look like someone faded the original.