Free Color Tools

Q: Does the shorthand #ABC mean the same as #AABBCC?

Yes. Each digit is doubled, so #F00 is #FF0000. It only works when all three channel pairs repeat, which is why most generated colours cannot be shortened.

Q: Why does my HEX have eight characters?

In CSS the order is #RRGGBBAA, so #3B82F680 is that blue with alpha 0x80, 128 of 255, just over 50% opacity. The trap is that Android's Color.parseColor, Flutter and .NET read eight digits as #AARRGGBB: hand them the same string and you get a 23% opaque pale green, not a half-opaque blue. Convert to rgba(59, 130, 246, 0.5) before the value leaves CSS.

Convert colour formats, build palettes and sample colours from images. Browser-based, no sign-up.

🎨HEX ↔ RGB ConverterConvert between HEX, RGB, HSL and CMYK with one input. 🌈Colour Palette GeneratorBuild harmonious 5-colour palettes from a base hue. 🖼️Image Color PickerClick any pixel on an image to read its colour.

Which tool for which problem

Colour work splits into two jobs that people often confuse. Converting is a notation change: #3B82F6, rgb(59 130 246) and hsl(217 91% 60%) are the same pixel written three ways. Checking contrast is a measurement: whether text at that colour is legible against its background. A converter will not tell you that #3B82F6 on white measures 3.68:1 and fails AA for a normal-size button label, and a contrast checker will not tell you what to paste into your stylesheet.

Use the converter when moving a value between systems that disagree on notation. A designer hands you HSL, your Tailwind config wants HEX, an ImageData buffer wants three integers from 0 to 255, and a WebGL shader wants three floats from 0 to 1. Use the contrast checker for any colour pair that carries text, an icon or a form border.

Why HSL is worth converting to

HEX and RGB are fine for storage and terrible for reasoning. Asked for "the same blue but darker", editing #3B82F6 by hand means guessing at three channels at once. In HSL you keep hue and saturation and drop lightness: hsl(217 91% 60%) becomes hsl(217 91% 45%). That is how most design systems generate a colour ramp, so converting a brand HEX to HSL once at the start saves the guesswork later.

The catch is that HSL lightness is not perceived lightness. Yellow at 50% lightness looks far brighter than blue at 50% lightness. Two swatches with identical L values can land on opposite sides of a WCAG pass, so generate in HSL and verify each step with the contrast checker.

Reading a contrast result properly

WCAG 2 contrast is a ratio from 1:1 (identical) to 21:1 (black on white). The thresholds that matter in practice:

4.5:1 for normal body text at AA
3:1 for large text, which means 18.66px bold or 24px regular and above
3:1 for non-text UI parts: input borders, focus rings, icons carrying meaning
7:1 for AAA body text, which grey-on-white marketing copy rarely reaches

The classic failure is placeholder text. #999999 on white is 2.85:1, which fails at any size, and it is the default in many component libraries. Another is white text on a mid-brand colour: #F59E0B with white measures 2.15:1, while the same amber under #1A1A1A reaches 8.1:1, which is why amber buttons carry near-black labels.

What the ratio cannot see

The checker measures two flat colours. It does not know your text sits on a gradient, a photo or a semi-transparent overlay. If your background is rgba(0,0,0,0.5) over an image, test against the lightest pixel the text can land on, not the average. It also ignores font weight below the large-text cutoff: a 300-weight face at 4.5:1 still reads thin and washed out.

Common questions

Does the shorthand #ABC mean the same as #AABBCC? Yes. Each digit is doubled, so #F00 is #FF0000. It only works when all three channel pairs repeat, which is why most generated colours cannot be shortened.

Why does my HEX have eight characters? In CSS the order is #RRGGBBAA, so #3B82F680 is that blue with alpha 0x80, 128 of 255, just over 50% opacity. The trap is that Android's Color.parseColor, Flutter and .NET read eight digits as #AARRGGBB: hand them the same string and you get a 23% opaque pale green, not a half-opaque blue. Convert to rgba(59, 130, 246, 0.5) before the value leaves CSS.

Is anything sent to a server when I paste a colour? No. Both tools run in your browser with JavaScript, so the value never leaves the page and there is nothing for us to log.

My design passes AA but still looks hard to read. Why? Contrast ratio is one input. Line height, font weight and the size of the coloured area all affect legibility, and pure black on pure white (21:1) is widely reported as harsher to read than #1A1A1A on #FAFAFA, which still measures 16.7:1. If body copy passes at 4.5:1 and still reads badly, raise the weight to 400 or the size to 16px before darkening the colour further.

Why colour tools?

Colour comes up everywhere in modern work: brand identity, web design, marketing graphics, dashboards, data viz, presentation decks. You'll constantly need to convert between formats (HEX for CSS, RGB for code, HSL for design adjustments, CMYK for print), build harmonious palettes for new projects, or pick exact colours out of existing images to match a brand.