Color Tools
Every Color Tools tool on Toolz.dev: 5 free utilities that run entirely in your browser. No signup, no uploads, no downloads.
Colour on a screen is three numbers, and every format here is a different way of writing the same three. HEX and RGB are the same values in different notation. HSL restates them as hue, saturation and lightness, which is the form a human can reason about. CMYK is the odd one out, because it describes ink rather than light and cannot be converted exactly without knowing the press and the paper.
The five tools cover the whole loop: pick a colour, convert it between formats, build a palette around it, derive its lighter and darker steps, and check the result is legible. The last one is the one that gets skipped and the one with a legal dimension, since contrast is where most accessibility complaints about a site start.
Colour formats and what each is good for
| Format | Written as | Use it when |
|---|---|---|
| HEX | #3b82f6 | Pasting a value into CSS or a design tool |
| RGB | rgb(59 130 246) | You need the channel values, or an alpha |
| HSL | hsl(217 91% 60%) | Building variations: change lightness, keep the hue |
| HWB | hwb(217 23% 4%) | Thinking in terms of adding white or black |
| CMYK | cmyk(76% 47% 0% 4%) | Sending artwork to print, with a proof |
Contrast is a ratio, and the numbers are specific
WCAG defines contrast as a ratio between the relative luminance of two colours, from 1:1 for identical colours to 21:1 for black on white. Success criterion 1.4.3 asks for at least 4.5:1 for normal text and 3:1 for large text, which means 18.66px bold or 24px regular and up. The enhanced criterion 1.4.6 raises those to 7:1 and 4.5:1. Non-text elements - the border of an input, the icon in a button, the bars of a chart - are covered separately by 1.4.11, which asks for 3:1.
Two things routinely surprise people. Luminance is not brightness as the eye reports it: the formula weights green far above red and blue, so a mid-green and a mid-blue of the same apparent lightness have very different contrast against white. And logos and purely decorative images are exempt, which is why a brand colour that fails as text can still appear in a wordmark. The contrast checker computes the ratio from the W3C definitions and states which criteria pass rather than giving a single verdict.
Why HSL is the format to build with
HEX and RGB are storage formats. Neither tells you anything about a colour by looking at it, and neither lets you make a systematic change: darkening #3b82f6 by hand means adjusting three numbers and hoping. HSL splits the same colour into hue, saturation and lightness, so a scale of tints and shades is one number moving, and a set of colours that belong together is one hue rotating. This is why the palette generator works in HSL to produce complementary, analogous, triadic, tetradic and monochromatic sets, and why the shades generator can turn a single brand colour into a full scale of tints, shades and tones by moving lightness alone.
Those harmonies are geometry on the hue wheel rather than taste. Complementary is 180 degrees apart and maximises contrast. Analogous takes neighbours 30 degrees either side and is calm because it barely moves. Triadic and tetradic space three or four colours evenly. Monochromatic holds the hue and varies lightness, which is the safest starting point for an interface, since the palette cannot clash with itself. Whatever the geometry says, run the result through the contrast checker before shipping it, because a harmonious pair is not necessarily a legible one.
CMYK, and the conversion nobody can do exactly
RGB is additive: a screen emits light and all three channels at full make white. CMYK is subtractive: ink absorbs light and the page supplies the white. The two gamuts do not match, so there are screen colours no ink can reproduce - saturated cyans, bright oranges and most neon shades - and the conversion is an approximation chosen by a colour profile that knows the specific press, ink and paper.
The practical consequence is that a CMYK value from any web converter, this one included, is an estimate for reference rather than a production value. If a colour matters, the answer is a printed proof or a spot colour specified by a Pantone number, not a screen. The colour converter is honest about this: it will give you the numbers, and they are the right starting point for a conversation with a printer rather than the end of one. Everything here runs client-side.
Frequently asked questions
- What contrast ratio does my text need?
- At least 4.5:1 for normal text and 3:1 for large text, which WCAG defines as 24px regular or 18.66px bold and above. The enhanced level, AAA, asks for 7:1 and 4.5:1. Interface components and meaningful graphics need 3:1 against their surroundings under a separate criterion, 1.4.11.
- Does my logo have to meet contrast requirements?
- No. WCAG explicitly exempts logotypes and purely decorative content from the text contrast criteria, which is why a brand colour that fails as body text can still appear in a wordmark. Any text that conveys information, including text inside an image, is not exempt.
- Are HEX and RGB the same thing?
- Yes, in different notation. #3b82f6 is the three channel values 59, 130 and 246 written in hexadecimal, two digits each. The conversion between them is exact and lossless in both directions, which is not true of the conversion to CMYK.
- Why does my colour look different when printed?
- Because a screen emits light and ink absorbs it, and the two gamuts do not overlap completely. Saturated cyans, bright oranges and neon shades exist on a display and have no ink equivalent, so they are approximated. An accurate result needs a colour profile for the specific press and paper, or a spot colour, and a printed proof to confirm it.
- What is HWB?
- A colour format that describes a hue plus the percentage of white and black mixed into it, which matches how people describe mixing paint. It uses the same hue angle as HSL, is supported in CSS in every current browser, and converts exactly to and from RGB.
- How do I build a colour palette that works?
- Start with one colour and generate a harmony from it: monochromatic or analogous for calm interfaces, complementary where you need one accent to stand out. Then check every foreground and background pairing you intend to use against the contrast thresholds, because harmony on the hue wheel says nothing about legibility.