Color Tools
Convert between HEX, RGB and HSL, build palettes and check colour contrast for accessibility.
11 tools · all free, all run in your browser
Color Blindness Simulator
See how a colour looks to people with the eight main types of colour vision deficiency, and check whether two colours stay distinguishable.
Open toolColor Mixer
Blend two colours at any ratio and get the mixed HEX value, plus the full gradient of steps between them.
Open toolColour 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 toolHSL to HEX Converter
Enter hue, saturation and lightness and get the HEX code, the RGB triplet and a readable text colour for that background.
Open toolImage Color Palette Extractor
Pull the dominant colours out of any photo as a ready-to-use hex palette, right in your browser.
Open toolRGB to CMYK Converter
Convert screen RGB or HEX colours into CMYK percentages for print, and see the value converted back so you can judge the shift.
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.