Color Tools
Convert between HEX, RGB and HSL, build palettes and check colour contrast for accessibility.
6 tools · all free, all run in your browser
Colour Contrast Checker
Check the WCAG contrast ratio between a text colour and its background and see which levels pass.
Open toolColour Shades Generator
Build a full 50-950 tint and shade scale from one base colour, ready to paste as CSS variables.
Open toolComplementary Colour Finder
Find complementary, analogous, triadic and tetradic colour harmonies from any base colour.
Open toolHEX to HSL Converter
Convert a HEX colour into hue, saturation and lightness so you can tune colours predictably.
Open toolHEX to RGB Converter
Convert any HEX colour code into RGB, RGBA and HSL values with a live swatch preview.
Open toolRGB to HEX Converter
Turn red, green and blue channel values into a HEX colour code you can paste into CSS.
Open toolColour tools cover the two jobs that come up constantly in design and front-end work: moving a colour between notations, and checking that a combination is actually readable. HEX is compact and ubiquitous in stylesheets, RGB maps directly to how a screen emits light, and HSL is far easier to reason about when you want a lighter tint or a shifted hue. Converting between them is lossless, so you can work in whichever notation suits the task and export in whichever your codebase expects.
Three notations, one colour
A HEX code is simply RGB written in base 16: the six digits are three pairs giving red, green and blue from 00 to FF, which is 0 to 255 in decimal. Three-digit shorthand doubles each digit, so #4f6 expands to #44ff66. HSL describes the same point differently — hue as an angle around the colour wheel from 0 to 360 degrees, saturation as a percentage of colourfulness, and lightness from black at 0% to white at 100%. Because HSL separates those attributes, producing a consistent set of tints and shades is a matter of adjusting lightness alone, which is exactly how most design systems build their colour ramps.
Contrast and accessibility
WCAG defines contrast as a ratio between the relative luminance of two colours, ranging from 1:1 for identical colours to 21:1 for pure black on pure white. Level AA requires at least 4.5:1 for normal text and 3:1 for large text, which means 18.66px bold or 24px regular and above. Level AAA raises those to 7:1 and 4.5:1. Crucially, luminance is not the same as perceived lightness: green contributes far more to luminance than blue does, so two colours that look similarly dark can have very different contrast against white.
Building a usable palette
Complementary colours sit opposite each other on the wheel, 180 degrees apart, and produce the highest visual tension — useful for a call to action, overwhelming as a background pairing. Analogous schemes, within about 30 degrees, feel calmer and more cohesive. Whatever scheme you choose, never rely on hue alone to carry meaning: around one in twelve men has some form of colour vision deficiency, so pair colour with a label, an icon or a pattern.