Free online color picker — HEX code finder & color code finder

Picking a colour and reading the three formats

Choose a colour from the swatch or type a HEX value directly, and the same colour is shown as HEX, RGB, and HSL together with a one-click copy for each. All three describe an identical colour — they differ only in how they are written and in which is easier to reason about.

Worked example: building a tint scale from one brand colour

You have a brand blue, #3B82F6, and need lighter and darker variants for hover states, borders, and disabled controls. Guessing HEX values produces a scale that drifts in hue; HSL makes it systematic.

1. Enter #3B82F6. The HSL reading is roughly hsl(217, 91%, 60%) — hue 217, saturation 91%, lightness 60%.
2. Keep hue and saturation fixed and change only lightness. Lightness 70% gives a hover tint; 50% gives a pressed state; 85% gives a subtle background.
3. For a disabled state, drop saturation instead — hsl(217, 30%, 60%) reads as muted rather than simply pale.
4. Copy each result as HEX if your stylesheet uses HEX. The values stay a coherent family because only one dimension moved.

Why HSL is the one worth learning

HEX and RGB describe how much red, green and blue to mix, which is how a screen works but not how people think about colour. Making #3B82F6 "20% lighter" in HEX means adjusting three values by unequal amounts and hoping the hue survives.

HSL separates the three properties you actually want to adjust. Hue is position on the colour wheel from 0 to 360. Saturation is intensity from grey to vivid. Lightness runs from black at 0% through the pure colour at 50% to white at 100%. Change one, and the others hold — which is exactly what a consistent palette requires.

Common mistakes

• Assuming equal lightness means equal perceived brightness. HSL lightness is a mathematical midpoint, not a perceptual one: yellow at 50% lightness looks far brighter than blue at 50%. For accessibility work you need a contrast ratio, not a lightness value.
• Copying a HEX value into a context expecting RGB components. CSS accepts both, but a canvas API or a design token pipeline may not.
• Trusting on-screen colour for print. Screens are additive RGB; print is subtractive CMYK, and vivid RGB colours frequently have no CMYK equivalent. Expect a shift, and proof anything that matters.
• Treating three-digit HEX as a different colour. #F00 and #FF0000 are identical — the short form simply doubles each digit.
• Picking text and background colours by eye. A pairing that looks fine on a bright laptop can fail WCAG contrast requirements; check the ratio rather than judging visually.

When not to use this

Related workflow

Colour values are frequently stored in configuration or design-token files. If your palette lives in JSON, the JSON formatter will validate and tidy it after you paste new values in.

When you need to work out how much lighter one lightness value is than another as a percentage, the percentage calculator handles increase and decrease in one step.

Building a palette for a QR code? The QR code generator accepts custom colours — but keep strong contrast between foreground and background or scanners will fail to read it.