Developer Tools New Tool

Free Online Colour Picker and Palette Generator

Pick a colour on a draggable saturation and value square with a hue strip and an alpha slider, and read it as hex, rgb, hsl, hsv, cmyk and a CSS name at once. Then build harmonies, a tint and shade ramp and a 50 to 900 scale, and export as CSS, SCSS, Tailwind or JSON.

Free Forever Nothing Uploaded Every format at once Runs in your browser

Free Online Colour Picker and Palette Generator

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

Colour Picker & Palette Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Pick a colour

Alpha 100%

hex
hex with alpha
rgb
rgba
hsl
hsla
hsv
cmyk
CSS name
relative luminance	-
contrast on white	-
contrast on black	-

Export

Export As Name

Harmonies

Rotations of the hue, holding saturation and value. Click any swatch to copy it.

Tints and shades

A 50 to 900 scale

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

What the 50 to 900 Scale Is For

The numbering everybody uses, and what each step is usually doing.

A design system rarely uses one blue. It uses nine or ten of them, numbered so that a component can ask for "the light one" without hard-coding a hex value. The scale here keeps your hue and saturation and walks the lightness, and marks the step closest to the colour you picked so you can see where your brand colour lands.

Step	Usually used for
50, 100	Page and panel tints, hover states on white, the background of a selected row. Too light for text of any size.
200, 300	Borders, dividers, disabled controls, and chart fills that need a label on top.
400, 500	The colour people mean when they say the brand colour. Buttons, links and icons, though check the contrast before putting white text on it.
600, 700	Hover and pressed states for those buttons, and the safe choice for coloured text on a white background.
800, 900	Headings, dark panels, and the background when you invert the whole thing. Nearly always passes contrast with white text.

Two warnings. The steps are lightness targets, not measured perceptual steps, so a yellow scale will feel flatter at the light end than a blue one; the contrast figures on this page are the honest check. And a scale generated from one colour is a starting point for a designer, not a replacement for one.

How to Pick a Colour and Build a Palette

A few steps, and nothing is uploaded.

Pick the colour Drag on the square for saturation and brightness, drag the strip for hue, and use the slider for alpha. Or type a value into any of the format boxes.

Read it in every format Hex, hex with alpha, rgb, rgba, hsl, hsla, hsv and cmyk all at once, with the CSS colour name where one matches exactly, and the relative luminance underneath.

Look at the palette Harmonies from the colour wheel, a tint and shade ramp, and a 50 to 900 scale. Click any swatch to copy its hex value.

Export the lot CSS custom properties, SCSS variables, a Tailwind config fragment or JSON, with a name you choose.

What to Know About Colour Values

Including why one colour in a hue-rotated palette always looks wrong.

HSL lightness is not perceptual, which is why one colour in a hue-rotated palette always looks wrong. Pure yellow and pure blue are both at 50% lightness in HSL, yet the yellow is roughly ten times brighter to the eye. So when a harmony rotates the hue and holds the lightness, the yellows and cyans come out glaring and the blues and violets come out muddy, and no amount of staring at the numbers explains it. The relative luminance figure on this page is the one that tracks how bright a colour actually looks, and it is worth checking it on each swatch before trusting a generated set.

The CMYK values here are a plain arithmetic conversion, not a print profile. Real print colour depends on the paper, the ink, the press and an ICC profile, and any honest conversion needs all four. The figures on this page are the standard naive formula, which is fine for a rough idea and for talking to a printer, and wrong if you use it to predict what will come off the press. Send the printer your hex values and let their profile do the work.

Alpha only survives in the formats that have room for it. It appears in hex with alpha, rgba and hsla. It cannot appear in plain hex, rgb, hsl, hsv, cmyk or a CSS colour name, so those four ignore it rather than pretending. The palette, the ramps and the scale are all generated from the opaque colour, because a semi-transparent swatch has no fixed appearance until you know what is behind it.

The eyedropper uses the browser's own EyeDropper API, and only some browsers have it. Where it exists, in current Chrome and Edge, it can sample any pixel on your screen, including outside the browser. Where it does not, in Firefox and Safari at the time of writing, the button is disabled and says so rather than sitting there doing nothing. There is no fallback, because a web page cannot read your screen without that API.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

A real picker A draggable saturation and value square with a hue strip, drawn on canvas.

Every format at once Hex, rgba, hsla, hsv, cmyk and the CSS name, each editable.

Real harmony maths Complementary, split, triad, tetrad, analogous and monochromatic.

Ramps and a scale Tints, shades, and a 50 to 900 scale of the sort a design system uses.

Four export formats CSS custom properties, SCSS, a Tailwind fragment or JSON.

Luminance shown Relative luminance and contrast on white and black, next to the values.

About the Colour Picker

Most colour pickers on the web are an input of type colour with a list of hex values next to it. That is fine until you need to nudge the saturation without changing the hue, or you want to know what the same colour looks like in HSL, or you need nine shades of it for a component library. This page is the fuller version: a square and a strip you can drag, every format at once, and a palette built from the colour you chose.

The square and the strip are drawn on a canvas, which is the only honest way to do it: the square is a hue at full saturation with white laid across it and black laid down it, and the position of the marker is the saturation and the value. Dragging works with a mouse, a trackpad or a finger, because pointer events cover all three. Everything else is arithmetic that the shared engine on this site already had, so the conversions here are the same ones the contrast checker uses.

The palette half is where the care went. Harmonies are rotations of the hue on the colour wheel, which is the correct maths and also the reason the results sometimes look odd, so the page says why instead of quietly fixing it. The 50 to 900 scale walks the lightness against fixed targets and marks the step your own colour is nearest to. And the export is a plain text block in whichever of the four formats you use, with a variable name you choose rather than one invented for you.

Frequently Asked Questions

Formats, alpha, CMYK, the eyedropper and what the scale is for.

Because HSL and HSV treat lightness as a number rather than as perceived brightness. Yellow at 50% lightness is far brighter to the eye than blue at 50% lightness, so a triad built by adding 120 degrees to the hue produces one swatch that jumps out and one that sinks. The fix is to adjust the lightness of the offending swatch by hand, and the relative luminance figure on this page tells you which one it is.

They describe the same colour space with different axes. In HSL, 100% lightness is always white and 50% is the pure hue. In HSV, 100% value is the pure hue at full brightness and there is no white at the top unless saturation is zero. Picker squares are almost always HSV, because it maps neatly onto a square, which is why the square here is saturation across and value down.

Yes. Type or paste into any of the format boxes and press tab or enter: hex in three, four, six or eight digits, rgb and rgba, hsl and hsla, hsv, cmyk, and the common CSS colour names are all accepted. The other boxes, the square, the strip and the whole palette update from whatever you typed.

Because your browser does not have the EyeDropper API. It is in current Chrome and Edge and not yet in Firefox or Safari. There is no way for a web page to read the colour of a pixel on your screen without it, so rather than show a button that fails silently the page disables it and says why. In those browsers, take a screenshot and pick the colour from an image editor instead.

The numbering is the same convention, but the values will not match a specific system such as Tailwind's built-in palettes, because those were hand-tuned rather than generated. Use this as a starting point: it gives you a consistent set from one colour in a few seconds, which is usually enough for an internal tool, and a sensible base for a designer to adjust for anything public facing.