About Colour Formats
Colours on the web can be written in several equivalent ways: a six-digit hex code like #2563eb, an RGB triple like rgb(37, 99, 235), or an HSL triple like hsl(221, 83%, 53%). Under the hood they all refer to the same pixel value, but each notation is useful for different things. Hex is compact and copy-pastable between design tools; RGB is easy to manipulate programmatically; HSL is by far the most intuitive for picking related colours — tweak the lightness, keep the hue, and you have a darker shade of the same colour.
This picker lets you pick visually and read all three formats at once, or enter any of the three and see the conversion. Designers often use it to translate between what a design tool exports (usually hex) and what a CSS framework expects (hex, RGB, or HSL depending on the framework).
The picker also works the other way: paste a colour you found in the wild and immediately see its family. Knowing that #2563eb is really hsl(221, 83%, 53%) tells you the hue (blue, around 220°), the saturation (quite saturated at 83%), and the lightness (mid-range at 53%) — and that unlocks picking complementary or analogous colours by shifting those numbers.
How to Pick and Convert Colours
- Drag the colour wheel or click a point on the gradient to pick a colour visually.
- Alternatively, paste a hex, RGB, or HSL value into the corresponding input field.
- All three formats update together, so you always have the exact value you need for the tool you are pasting into.
- Copy whichever representation your workflow uses with the copy button.
Examples
The same colour in three notations
Output
#2563eb / rgb(37, 99, 235) / hsl(221, 83%, 53%)
A common Tailwind-like blue. Pick this in any of the three fields and the other two fill in automatically.
Common Use Cases
- Translating a designer's hex palette into the HSL values a CSS framework expects.
- Building tonal ramps from a single brand colour by varying lightness in HSL.
- Checking contrast by picking two colours side-by-side and eyeballing their relationship.
- Grabbing an exact colour from a screenshot and writing it into your CSS.
Tips
- HSL is the most human-friendly format for creating shades. Start with a base colour, keep the hue and saturation fixed, and change only the lightness to get a set of consistent tints.
- The three-digit hex shorthand (#f0a) is legal and expands to #ff00aa — useful for very round values but easy to misread.
- Colour on screen can differ from colour in print or from colour on another monitor. For anything important, test on the actual target device.
Frequently Asked Questions
What is the difference between HSL and HSV?
Both describe colours by hue, saturation, and a brightness-like dimension. HSL uses lightness, where 50% is the pure colour and 100% is white. HSV uses value, where 100% is the pure colour and there is no path to white. HSL is more common in CSS; HSV is more common in design tools.
How do I get a darker or lighter version of a colour?
Convert to HSL, keep the hue and saturation, and change the lightness. Lower for darker, higher for lighter. This keeps the family consistent, unlike darkening RGB values directly.
Can I specify alpha (transparency)?
CSS supports rgba() and hsla() forms, plus eight-digit hex (#2563ebcc). This picker focuses on the opaque colour; you can append an alpha value manually when needed.
Is anything sent to a server?
No. The tool runs entirely in your browser.