DEV3 Technologies home

Design tool

Colour Palette and Contrast Checker

Check WCAG contrast, get a nearest passing colour, convert HEX, RGB, HSL and HSV, and build palettes you can export as CSS variables, Tailwind JSON or SCSS.

Free, no sign-up. Runs in your browser; nothing is uploaded.

Colours

Hex, rgb() or hsl()

Hex, rgb() or hsl()

Contrast

14.67: 1
  • AA normal text (4.5:1)Pass
  • AA large text (3:1)Pass
  • AAA normal text (7:1)Pass
  • AAA large text (4.5:1)Pass
  • UI components (3:1)Pass

Live preview

Normal text, 16px. The quick brown fox jumps over the lazy dog.

Large text, 24px

UI component

Suggest the nearest passing colour

Target

The current pair already reaches 4.5:1.

Convert

Colour

Palette generator

Hex, rgb() or hsl()

Complementary

Shades and tints of the base (100 to 900)

Click a swatch to copy its hex code.

Export

Colours
Format
:root {
  --brand-base: #3366cc;
  --brand-complement: #cc9933;
}

How to use the colour palette and contrast checker

Check contrast first, then style

Pick a text colour and a background, either with the colour pickers or by typing a value such as #1a237e, rgb(26 35 126) or hsl(235 65% 30%). The ratio and the pass or fail badges update instantly, and the live samples show how normal and large text actually look.

What each badge means

  • AA normal text (4.5:1) is the usual legal and policy target for body copy.
  • AA large text (3:1) applies to headings of about 24px or 18.66px bold and above.
  • AAA (7:1 and 4.5:1) is the enhanced level; worth aiming for in long-form reading and for low-vision audiences.
  • UI components (3:1) covers borders of inputs, focus rings, icons and chart lines needed to understand the interface.

Fix a failing pair

Use the suggestion helper. It keeps your hue and saturation and shifts only the lightness until the target is met, so the result still looks like your brand. Decide whether it should go darker or lighter by looking at the preview. If you cannot reach the target at that hue, change the background instead.

Build a palette

Set a base colour and choose a scheme:

  1. Complementary gives high-energy pairs; use one as the accent.
  2. Analogous keeps neighbours on the wheel for calm interfaces.
  3. Triadic and tetradic give richer sets; let one colour lead and keep the others for small accents.
  4. Split-complementary is a softer alternative to complementary.
  5. Monochromatic produces a nine-step scale from light tints to dark shades, ideal for backgrounds, borders and text on one hue.

Click any swatch to copy its hex code, or export the set as CSS custom properties, a Tailwind colour object or SCSS variables.

Practical tips

  • Never rely on colour alone to show state; add text or an icon.
  • Check hover, disabled and focus states, not only the default one.
  • Test in both light and dark themes, since a pair that passes on white may fail on charcoal.
  • Text over images or gradients should be checked against the lightest and darkest area behind it.

Frequently asked questions

What contrast ratio do I need to meet WCAG?

Level AA asks for 4.5:1 for normal text and 3:1 for large text (about 24px, or 18.66px bold) and for UI components such as input borders and icons. Level AAA asks for 7:1 for normal text and 4.5:1 for large text.

How is the contrast ratio calculated?

Each colour is converted to linear light and weighted into a relative luminance between 0 and 1 using the WCAG 2.x formula. The ratio is (lighter + 0.05) divided by (darker + 0.05), so black on white is 21:1 and identical colours are 1:1.

How does the suggested colour work?

It keeps the hue and saturation of your foreground and moves the lightness the smallest amount needed to reach your chosen target, trying both lighter and darker. If no lightness at that hue can reach the target, it says so.

Which colour formats can I type?

HEX in three, four, six or eight digits (with or without #), rgb() and rgba(), and hsl() and hsla(), in comma or space syntax. Alpha is accepted but the checker treats colours as opaque.

Is the OKLCH value exact?

It is a close approximation computed from the sRGB value, handy for CSS oklch() experiments. Rounding means converting back may differ by a unit.