Free online colour tools - a colour picker with HEX, RGB, HSL, and OKLCH output, a WCAG contrast checker, a colour palette generator with harmonious schemes, a colour format converter, a colour blindness simulator, an image colour palette extractor, a CSS gradient generator, and Tailwind CSS colour references. All tools run in the browser with no account required. The Contrast Checker validates colour combinations against WCAG 2.1 AA and AAA standards - essential for accessibility compliance. The Colour Blindness Simulator shows how designs appear to users with deuteranopia, protanopia, tritanopia, and achromatopsia.

When to use Color Tools

1Accessibility audits: check every foreground/background colour combination in your design against WCAG contrast ratios - AA requires 4.5:1 for normal text, 3:1 for large text.
2Brand colour system: generate a complete colour palette (complementary, triadic, analogous) from your brand's primary colour, or extract the dominant palette from your logo.
3CSS development: use the Gradient Generator to build linear and radial gradients visually, then copy the generated CSS property directly into your stylesheet.
4Cross-tool colour conversion: translate between HEX (for web), RGB (for design tools), CMYK (for print), and OKLCH (for modern CSS colour systems) without manual calculation.
5Inclusive design: simulate colour blindness to ensure your charts, status indicators, and form validation messages are understandable to users with any type of colour vision deficiency.

Frequently Asked Questions

What contrast ratio do I need to pass WCAG AA?+

WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). User interface components and graphical elements require 3:1 contrast against adjacent colours. Level AAA requires 7:1 for normal text. The Contrast Checker shows your ratio and which criteria it passes.

What is OKLCH and why use it for colour systems?+

OKLCH is a perceptually uniform colour space where equal numeric steps look equally different to the human eye - unlike HEX and HSL where the same numeric change produces wildly different perceived differences depending on the hue. It is ideal for generating accessible colour scales because you can predict how light or dark a colour will appear without visual testing.

How do I extract colours from an image?+

Upload your image to the Image Colour Picker or Image Palette tools. The Colour Picker samples the exact pixel colour you click on (with a magnified loupe for precision). The Image Palette uses k-means clustering to identify the 5–10 dominant colours across the full image. Both return HEX, RGB, and HSL values.

What are the Tailwind CSS colour shades?+

Tailwind CSS provides 22 named colour scales (slate, gray, zinc, red, orange, amber, yellow, green, teal, blue, indigo, violet, purple, pink, rose, etc.) each with 11 shades from 50 (very light) to 950 (very dark). The Tailwind Colours reference lets you browse all 242 swatches and copy the class name, HEX, or CSS variable for each.

About Color Tools

When to use Color Tools

1Accessibility audits: check every foreground/background colour combination in your design against WCAG contrast ratios - AA requires 4.5:1 for normal text, 3:1 for large text.

2Brand colour system: generate a complete colour palette (complementary, triadic, analogous) from your brand's primary colour, or extract the dominant palette from your logo.

3CSS development: use the Gradient Generator to build linear and radial gradients visually, then copy the generated CSS property directly into your stylesheet.

4Cross-tool colour conversion: translate between HEX (for web), RGB (for design tools), CMYK (for print), and OKLCH (for modern CSS colour systems) without manual calculation.

5Inclusive design: simulate colour blindness to ensure your charts, status indicators, and form validation messages are understandable to users with any type of colour vision deficiency.

Frequently Asked Questions

What contrast ratio do I need to pass WCAG AA?+

What is OKLCH and why use it for colour systems?+

How do I extract colours from an image?+

What are the Tailwind CSS colour shades?+