Colour Tools
Colour tools for web, design and decorating: converters from hex to OKLCH, WCAG contrast checks, palette builders and RAL matching. Learn more
Accessible Text Colour Finder
White, black and on-brand text colours that pass WCAG AA and AAA.
Alpha/Opacity Overlay Calculator
Work out the flattened colour of a transparent overlay.
CMYK Converter
CMYK to and from hex, with a total ink check.
Colour Blend Interpolator
Evenly stepped colours between two, in OKLab or sRGB.
Colour Blindness Simulator
See a colour or palette as people with colour blindness might, with clash warnings.
Colour Contrast Checker
WCAG AA/AAA contrast ratio, APCA score and passing suggestions.
Colour Distance Calculator
See how different two colours look, as a Delta E (ΔE2000) score.
Colour Harmony Generator
Complementary, triadic, analogous, tetradic and square schemes.
Colour Mixer
Blend two colours at any ratio, in OKLab, OKLCH or sRGB.
Colour Name Finder
The three nearest CSS colour names to any colour.
Colour Palette Generator
Complementary, analogous, triadic palettes.
Colour Picker
Pick visually or from screen, and copy hex, RGB, HSL and more.
Colour Psychology Reference
Look up the common moods and associations of a colour.
CSS Gradient Generator
Build a linear or radial gradient visually, with OKLab blending.
CSS Named Colours Reference
All 148 CSS colour names, searchable by name or hex.
Design-Tool Colour Format Converter
Colour codes for CSS, Tailwind, SwiftUI, Compose, Flutter, Unity, Unreal and more.
Duotone Image Generator
Spotify-style two-colour image effect.
Gradient Name Generator
Get an evocative name for a two-colour gradient.
Hex ↔ RGB Converter
Convert between hex and RGB, including transparency.
HSL Converter
HSL, hex and RGB in sync, plus HSV and HWB.
Hue Rotation Generator
Rotate a colour around the wheel
Image Colour Palette Extractor
Pull the main colours from any image, with how much each covers.
Kelvin Colour Temperature
Light bulb/white-balance colour.
LAB/LCH Colour Converter
CSS lab() and lch() to and from hex, both ways.
Modern CSS Colour Syntax
Two-way conversion between hex, rgb(), hsl(), lab(), oklch() and more.
Multi-Image Dominant Colour Extractor
Dominant colours from several images, plus a combined palette.
Palette Consistency Checker
Flag duplicate, near-identical or same-lightness colours in a palette.
Print-Safe Colour Checker
Check whether a screen colour is too vivid to print well in CMYK.
RAL Nearest-Match Finder
The closest RAL Classic shades to any colour, or look up a RAL code.
Random Colour Generator
A random colour, with all its values.
Seasonal/Mood Palette Generator
Generate a ready-made palette for a season or mood.
Shades & Tints Generator
A ramp of darker and lighter versions.
Warm/Cool Colour Mood Board Grouper
Sort a set of colours into warm, cool and neutral groups.
WCAG Contrast Ratio Matrix
Check WCAG contrast for every pair in a palette at once.
Free colour tools for designers, developers and decorators
Whether you're building a website, a brand or a bedroom colour scheme, these tools take the guesswork out of colour, and all of them run in your browser. Convert between every common format with the Hex ↔ RGB Converter, the HSL Converter and the two-way Modern CSS Colour Converter, which handles oklch(), lab() and the other newer CSS colour functions. Developers can copy ready-to-paste code for SwiftUI, Jetpack Compose, Flutter, Unity and more with the Design-Tool Colour Format Converter, or sample any pixel on screen with the Colour Picker.
Accessibility is built in. The Colour Contrast Checker tests text against the WCAG AA and AAA levels that UK public sector websites must meet, and suggests the nearest passing colour when yours falls short. The WCAG Contrast Matrix checks a whole brand palette at once, the Accessible Text Colour Finder finds readable text colours in your own brand hue, and the Colour Blindness Simulator shows a palette as people with colour vision deficiency may see it, flagging any pairs that become hard to tell apart.
For creating palettes, start from one colour with the Colour Harmony Generator or the Shades & Tints Generator, or pull the colours straight out of a photo with the Image Palette Extractor. The Colour Mixer, Blend Interpolator and Gradient Generator can blend in OKLab for smooth, clean transitions. Going to print or paint? The Print-Safe Colour Checker warns when a screen colour is too vivid for CMYK ink, and the RAL Colour Finder matches any colour to the RAL Classic shades used for windows, doors and powder coating.
Questions and answers
- What's the difference between the Contrast Checker, the WCAG Contrast Matrix and the Accessible Text Colour Finder?
- The Contrast Checker tests one text colour against one background in detail, with the WCAG ratio, an APCA score, a live preview and suggested fixes. The WCAG Contrast Matrix checks every pair in a palette at once, which is quickest for signing off a set of brand colours. The Accessible Text Colour Finder works the other way round: give it a background and it finds text colours that pass, including tinted versions of your own colour.
- Should I use HSL, Lab or OKLCH?
- HSL is easy to read and supported everywhere, but its lightness isn't how bright a colour actually looks: a yellow and a blue at "50% lightness" look very different. Lab and LCH, and the newer OKLab and OKLCH, are designed so that equal number changes look like equal visual changes, which makes them much better for building colour scales and accessible palettes. OKLCH is now supported by every major browser and is the usual choice for new CSS. The Modern CSS Colour Converter converts between all of them.
- Why do the Colour Mixer and Blend Interpolator offer different blend spaces?
- The space you blend in changes the colours in between. Blending in plain sRGB, as older CSS and many image editors do, can give a dull grey middle (blue to yellow goes through grey). OKLab keeps the steps even and the middle clean, OKLCH keeps the colours vivid by travelling round the hue wheel, and linear light behaves like mixing coloured light. OKLab is the best default for most design work.
- How do the Colour Name Finder, RAL Colour Finder and Colour Distance Calculator decide what's "closest"?
- All three use CIEDE2000 (written ΔE or Delta E), the formula used in printing, paint and textiles to judge how different two colours look to the human eye. Under 1 is invisible, under about 3.5 is close enough for most uses, and over 10 means the colours are clearly different. It gives far more sensible matches than comparing raw RGB numbers.
- Will my colours look the same when printed or painted?
- Not exactly. Screens mix light, while printers and paint use pigment, which can't reach some of the brightest screen colours, especially neon greens, electric blues and vivid purples. The Print-Safe Colour Checker estimates how much a colour will dull in CMYK print and the CMYK Converter gives a starting point, but for important work ask your printer for a proof. RAL screen values are approximations too, so always check a physical RAL fan deck before ordering.