Every colour on a screen is the same thing described three ways. HEX, RGB and HSL are different notations for identical values — which one you reach for depends on what you are trying to do with it.
How to use the Color Picker
- Pick a colour using the visual picker, or type a value directly
- Copy it in whichever format you need
- Use the generated shades and tints to build a consistent scale
- Check your text and background combinations for contrast
HEX, RGB and HSL
HEX — #7c6cff. Three byte pairs for red, green and blue. Compact and the most common format in design handoff, but you cannot look at it and predict the colour.
RGB — rgb(124, 108, 255). The same numbers in decimal. Marginally more readable, and rgba() adds transparency.
HSL — hsl(245, 100%, 71%). Hue as an angle on the colour wheel, saturation and lightness as percentages. This is the one worth learning, because it maps onto how people actually think about colour. Want a darker version? Lower the lightness. A muted version? Lower the saturation. The hue stays put.
Generating a consistent palette in HEX means guessing. In HSL it is arithmetic.
Building a usable scale
A single colour is rarely enough. Interfaces need a range — a light background tint, a mid tone for borders, the base for buttons, a darker shade for hover states.
Holding hue and saturation constant while stepping lightness gives a coherent family. The common refinement is to nudge saturation up slightly in the darker steps, because colours otherwise look washed out as lightness falls.
Whatever you generate, check it: a scale that looks balanced can still fail contrast requirements. Run your text and background pairs through the Contrast Checker before committing.
Frequently asked questions
Which format should I use in CSS?
Any of them work. HEX is most common in handoff; HSL is far easier to manipulate for variations. Define your palette as custom properties on :root so it lives in one place.
What is the difference between a shade and a tint?
A shade is the colour mixed with black (darker), a tint is mixed with white (lighter). A tone is mixed with grey, which reduces saturation without changing lightness much.
Why does my colour look different on another screen?
Displays vary in calibration, gamut and colour profile. The same HEX value genuinely renders differently across devices. Design with adequate contrast so the result survives imperfect displays.
What are the 8-digit HEX codes?
HEX with alpha — the last two digits are opacity, 00 fully transparent to FF fully opaque. Supported in all current browsers.