Color Picker

A colour picker turns a colour you can see into a value you can use. You choose it by eye — dragging around a square until it looks right — and the tool hands back the notation your stylesheet, design file or print shop expects.

This one goes further than that. Alongside the picker and the conversions there is a palette generator built on the geometry of the colour wheel, a gradient builder that writes its own CSS, a contrast checker against the WCAG thresholds, a simulation of how the colour looks to someone with colour vision deficiency, and a searchable library that includes the whole Tailwind palette.

If you already have a value and only want it written another way, the colour converter is the narrower tool for that — it takes hex, RGB, HSL, HSV, CMYK or OKLCH in and gives back the rest.

All of it is arithmetic, and all of it happens in your browser. There is no server in the loop because a colour picker does not need one — converting hex to HSL is a dozen lines of maths, not a service.

The square and the slider beside it are not decoration — they are a colour model drawn out. The slider is hue, the angle around the colour wheel. The square is the other two dimensions of HSV: saturation left to right, and value — brightness — bottom to top. Every colour a screen can show is somewhere in that cylinder.

There is a reason this tool holds its state in HSV rather than RGB, and it shows up the moment you use it. At the bottom of the square every hue is the same black; at the left edge every hue is the same grey. If the tool stored RGB, dragging down to black and back up would lose the hue you had chosen, because black has no hue to remember. Storing HSV means the handle stays where you put it.

1#4F46E5              hex2rgb(79, 70, 229)     the same three channels, in decimal3hsl(244, 75%, 59%)   hue angle, saturation, lightness4hsv(244, 69%, 90%)   hue angle, saturation, value5cmyk(66%, 69%, 0%, 10%)   four inks, for paper

Every conversion routes through sRGB, the space your screen actually works in. That is what makes them reversible: take a colour through hex, RGB, HSL and HSV and back, and you get the original bytes. CMYK is the exception, and deliberately so — it describes ink on paper, not light from a screen, and the two do not cover the same set of colours.

HEX

Three pairs of hexadecimal digits — red, green, blue — each running 00 to FF, which is 0 to 255. #FF0000 is full red. The three-digit shorthand #F00 expands by doubling each digit, so it can only express 4,096 of the 16.7 million colours. Hex is what people write down and recognise; nobody reasons in it.

RGB and RGBA

The same three channels in decimal: rgb(255, 0, 0). This is the model the hardware uses, since a pixel really is a red, a green and a blue element side by side. RGBA adds an alpha channel from 0 to 1 — rgba(255, 0, 0, 0.5) is red at half opacity. Modern CSS also accepts rgb(255 0 0 / 50%), which means the same thing.

HSL and HSLA

Hue, saturation, lightness. Hue is an angle: 0 is red, 120 green, 240 blue. Saturation runs from grey to vivid. Lightness runs from black at 0%, through the pure colour at 50%, to white at 100%. It is the format to reach for when you want to adjust a colour, because the adjustment is usually one number.

1--brand-100: hsl(244, 75%, 92%);2--brand-300: hsl(244, 75%, 78%);3--brand-500: hsl(244, 75%, 59%);4--brand-700: hsl(244, 75%, 42%);5--brand-900: hsl(244, 75%, 26%);

HSV

Also called HSB. Shares the hue with HSL and measures the rest differently: in HSL, 100% lightness is always white, while in HSV, 100% value is the brightest version of the colour and you reach white by also dropping saturation. That is exactly the layout of a picker square, which is why almost every design tool uses HSV internally and offers you HSL to copy.

CMYK

Cyan, magenta, yellow and key — black. Printing is subtractive: ink takes light away from white paper, where a screen adds light to a black one. The conversion here is the standard naive one, with no colour profile behind it, and it is right for reasoning about a colour and wrong for sending to a press. A real conversion needs an ICC profile for the specific paper and ink, and your printer has one.

All three describe exactly the same colours — every hex value has an RGB and an HSL equivalent, and converting between them loses nothing. The difference is what each one makes easy.

In practice most projects use two: HSL while designing a scale, and hex in the token file everyone else reads. There is no wrong answer, and the tool copies whichever you want.

Colour harmony is the observation that colours at particular angles from each other on the wheel look deliberate together. It is a set of starting points, not a law — plenty of good design ignores all of it — but as a way to get from one colour to a set of five, it works.

Complementary

Opposite hues, 180° apart. The highest contrast two colours can have, which makes it loud: a complementary pair used in equal amounts will fight. It works best when one colour is the field and the other is a small accent on it.

Analogous

Neighbours on the wheel, usually within 30° or 60°. Calm and cohesive the way a landscape photograph is cohesive, because that is what natural light does. Low contrast is the trade — you will usually need a separate accent colour for anything that has to stand out.

Triadic

Three hues evenly spaced 120° apart. Vivid and balanced, and the classic advice applies: let one dominate and use the other two as accents, or the result is a circus.

Tetradic

Two complementary pairs — four hues. The richest scheme available and the hardest to control, for the same reason. Four colours in equal amounts have no hierarchy, so pick a dominant one before you start.

Monochromatic

One hue at many lightnesses. The safest scheme there is, because it cannot clash with itself, and the one most interface design actually uses — a brand colour, its tints for backgrounds and its shades for pressed states.

• Shades mix in black. Hover and active states.
• Tints mix in white. Backgrounds, disabled states, subtle fills.
• Tones mix in grey. Quieter without going lighter or darker.

WCAG

The Web Content Accessibility Guidelines are the standard almost every accessibility law points at. The colour parts are narrow and precise: text must have enough contrast against its background, and colour must not be the only way information is conveyed.

Contrast ratio

How far apart two colours are in perceived brightness, from 1:1 for identical colours to 21:1 for black on white. It is computed from relative luminance rather than raw channel values, which is why two colours that look equally bright can score very differently against the same background.

AA and AAA

• AA — 4.5:1 for body text, 3:1 for large text (18pt, or 14pt bold). This is the level most organisations are legally held to.
• AAA — 7:1 and 4.5:1. The enhanced level, rarely mandated and worth aiming at for anything read at length.
• 3:1 for non-text — icons, form borders, focus rings. Frequently missed, because people check their text and stop.

Two caveats worth carrying. First, passing is necessary and not sufficient: text can clear 21:1 and still be unreadable at nine pixels, and a red-green status indicator can pass every threshold while telling a colour-blind reader nothing — which is why the colour-vision preview sits next to the ratio here. Second, the WCAG 2.1 formula itself is imperfect. It is unkind to dark backgrounds and overstates some mid greys. APCA models perception better and is not yet normative, so until it is, 2.1 is what an audit will use.

A CSS gradient is an image the browser draws for you. It costs no network request, scales to any size without blurring, and animates. Three kinds cover almost everything.

Linear

Travels in a straight line. The angle is the direction of travel: 0deg points up, 90deg points right — which catches people out, because it is measured clockwise from north rather than counterclockwise from east.

1background: linear-gradient(2  90deg,3  #4F46E5 0%,4  #06B6D4 100%5);

Radial

Spreads out from a point. It has no angle — it has a shape (circle or ellipse) and a position instead. Useful for spotlights, soft vignettes and the glow behind a hero heading.

1background: radial-gradient(2  circle at center,3  #4F46E5 0%,4  #06B6D4 100%5);

Conic

Sweeps around a centre point like a colour wheel. This is how you draw a pie chart, a progress ring or a hue wheel in one line of CSS. Its angle is where the sweep begins.

1background: conic-gradient(2  from 0deg at center,3  #4F46E5 0% 65%,4  #06B6D4 65% 100%5);

One thing worth knowing about all three: browsers interpolate between stops in sRGB by default, which is why a gradient from a saturated blue to a saturated yellow passes through a muddy grey in the middle. Adding an intermediate stop is the usual fix — easier to judge by eye in the CSS gradient generator, which keeps a live preview beside the stops.