Colour Tools for Design
Use the colour wheel, colour picker, and colour palette generator to choose colours, convert values, explore colour codes and charts, build gradients, and check contrast for websites, apps, and design systems.
Colour Wheel
Pick a base colour on an interactive wheel and create complementary, analogous, triadic, tetradic, and split-complementary harmonies.
OpenColour Palette Generator
Generate complementary, analogous, triadic, and monochromatic palettes.
OpenColour Picker
Pick a colour and inspect HEX, RGB, HSL, CMYK, LAB, tints, shades, and harmonies.
OpenColour Picker From Image
Upload an image and extract accurate colours and palettes from it.
OpenRGB To HEX
Convert CSS rgb() colours to copy-ready HEX codes.
OpenHEX To RGB
Convert HEX colour codes to RGB values and CSS rgb().
OpenColour Mixer
Mix two colours by percentage and copy the resulting HEX colour.
OpenColour Codes
Browse standard CSS named colours with HEX values and copy-ready codes.
OpenColour Contrast Checker
Check text and background contrast for accessible colour combinations.
OpenGradient Generator
Create CSS gradients, edit colour stops, and copy code for interfaces, backgrounds, and brand visuals.
OpenColour Chart
Browse flat, material, Tailwind, and web safe colour charts with interactive copy-ready swatches.
OpenColour Library
Explore organised colour families, shades, tints, and UI-ready palettes.
OpenTools
Create palettes, mix colours, build gradients, and explore colour relationships for interface work.
Pickers
Select colours directly from controls or uploaded images and copy useful values quickly.
Converters
Convert between common colour formats when preparing CSS, design tokens, or documentation.
Colours
Browse organised colour references, charts, and libraries for naming and choosing colours.
Checkers
Check contrast and accessibility details before using colour combinations in production.