Skip to content
ToolForge
Open menu

Free colour and design tools

Pick any hex code, build palettes and shade scales, and prove the result is readable. Includes an eyedropper, a WCAG 2.1 and APCA contrast checker, colour blindness simulation and a live CSS previewer.

Colour Picker & Palette Generator

Eyedrop any colour, get its hex code, and prove the palette is readable.

CSS Previewer & Design Playground

Paste CSS and watch it render. Build gradients and shadows by dragging.

Two questions come up constantly in design work: what is the hex code of this colour, and will anyone actually be able to read it. These tools answer both. The picker works from a screen eyedropper, from an image you load, or from nine colour notations entered by hand, and the contrast checker implements the actual WCAG 2.1 relative luminance formula rather than an approximation.

Palette generation is done in OKLCH rather than HSL, because HSL lightness steps are not perceptually even and produce shade scales that look uneven and muddy. Generating in a perceptual space and mapping the results back into sRGB gives ramps you can actually ship, with the hex values matching what you see on screen.

The CSS previewer covers the part static previews miss. Pasted CSS runs in a sandboxed frame while the tool reports every declaration the browser silently rejected, and a state switcher applies hover, focus-visible and disabled so you can check focus ring visibility before it becomes a keyboard accessibility bug.

Colour & Design Tools questions

What is a hex colour code?

A six-digit hexadecimal representation of an RGB colour, written as #RRGGBB. Each pair is one channel from 00 to FF, so #3B82F6 is red 0x3B, green 0x82 and blue 0xF6. The shorthand form #RGB expands each digit, giving #38F, which is the same colour as #3388FF.

How do I find the hex code of a colour in a photo?

Load the image into the colour picker's sampler and click the pixel you want, or use Analyse image to get the dominant colours at once. The eyedropper reads a colour from anywhere on your screen, which is faster when the colour is on a webpage or in another application.

What contrast ratio is accessible?

For WCAG 2.1 AA, normal body text needs 4.5:1 and large text needs 3:1. AAA requires 7:1 and 4.5:1. UI component borders, icons and focus rings need 3:1 regardless of size. The contrast checker shows the exact ratio and which thresholds the pairing passes.

Why is HSL not used to build the shade scales?

HSL lightness is not perceptually uniform: a lightness step from 20% to 30% looks like a much bigger jump in yellow than in blue. These scales are generated in OKLCH instead, where equal steps look equal, and then gamut-mapped back to sRGB so the hex value you copy is the colour you actually see.

Can I export my palette to Tailwind?

Yes. The export produces a Tailwind v4 @theme block with the full 50 to 950 scale plus semantic tokens for background, foreground, border, ring and the destructive colour, with dark mode overrides. Copying it gives you a working theme rather than a list of values to assign by hand.

Not finding what you need?

Tell us which tool would save you time and we will build it. Requests genuinely drive what gets added next.

Request a toolAll tools