ColorFinderscolour instruments

Color picker

Color picker

Choose a colour by hue, saturation and value, then take it away in any notation.

#3498db

All notations

  • HEX#3498db
  • RGBrgb(52, 152, 219)
  • RGBArgba(52, 152, 219, 1)
  • HSLhsl(204, 70%, 53%)
  • HSLAhsla(204, 70%, 53%, 1)
  • HSVhsv(204, 76%, 86%)
  • CMYKcmyk(76%, 31%, 0%, 14%)approx
  • LABlab(60.16 -6.1 -42.23)approx
  • CSSrgb(52 152 219)

Closest CSS keyword: steelblue approximate: #4682b4 is 12.81 ΔE away, so it is not the same colour

Tints and shades

The same hue and saturation mixed toward white and toward black. Useful for hover states, borders and disabled variants that still read as the same colour.

Harmonies

Sets built by rotating the hue. They are a starting point, not a rule. The proportions you use them in matter more than the angles.

Complementary

Opposite hues. Highest contrast pairing, good for a single accent.

Analogous

Neighbouring hues. Calm, low-tension schemes.

Triadic

Three hues evenly spaced. Balanced and lively.

Tetradic

Two complementary pairs. Needs one dominant colour to work.

Split complementary

The complement, split in two. Contrast without the clash.

Monochromatic

One hue at five lightnesses.

How this control works

Screens mix red, green and blue light, but almost nobody thinks in those terms. HSV rearranges the same information into three questions people do ask: what colour is it, how strong is it, and how bright is it.

The hue slider answers the first. It runs the full 360 degrees of the colour wheel, from red at 0 through yellow, green, cyan, blue and magenta and back to red at 360. Because the scale wraps, 350 and 10 are neighbours even though the numbers look far apart.

The plane answers the other two. Moving right increases saturation, so the colour goes from grey at the left edge to as colourful as that hue gets at the right. Moving up increases value, so the colour goes from black along the bottom to full brightness at the top. The top-left corner is always white and the entire bottom edge is always black, in every hue, which is why those regions look the same no matter where the hue slider is.

Reading the numbers

Whatever you pick is converted and shown in nine notations at once. HEX, RGB and RGBA are exact restatements of the same three bytes. HSL and HSV are exact conversions too, though rounding to whole degrees and percentages means converting back can land one unit away. CMYK is marked as approximate because it has no colour profile behind it, and LAB is marked as approximate because it depends on an assumed illuminant.

A worked example

Say you need a hover state for a button that is currently #3498db. In RGB you would have to change all three channels and guess. In HSV it is one move: keep the hue at 204 and the saturation at 70, and drop the value by about ten percent. The result is recognisably the same blue, one step darker. That is what a hover state should be.

Frequently asked questions

What is the difference between the plane and the hue slider?

The slider sets the hue, which is the position around the colour wheel. The plane then sets saturation from left to right and value from bottom to top within that hue. With the three kept apart, a colour is easy to adjust: you can make something lighter without accidentally changing what colour it is.

Why does the hue stay put when I drag saturation to zero?

Grey has no hue; mathematically the value is undefined. If the control reset to red every time you passed through grey it would be unusable, so the last real hue is remembered until you change it deliberately.

Can I type a value in instead of dragging?

Yes. The hue, saturation and value fields under the plane accept typed numbers, and the whole control works from the keyboard: tab to the plane and use the arrow keys, holding shift for larger steps.

What are tints, shades and tones?

A tint is the colour mixed with white, a shade is the colour mixed with black, and a tone is the colour mixed with grey. The ramp on this page shows tints on one side of your colour and shades on the other, which is usually what you want when building hover and disabled states.

Read the guide

  • HEX vs RGB vs HSLThree ways of writing the same colour. What each notation is good at, and when to reach for which.
  • How to create a website color paletteGoing from one colour to a working system: how many steps you need, why neutrals are most of the work, and where to check before committing.