#3B82F6#3B82F6rgb(59, 130, 246)hsl(217, 91%, 60%)hsv(217, 76%, 96%)About Color Picker & Converter
Color Picker is a visual colour wheel paired with a four-way converter: pick a hue and saturation on the wheel, fine-tune lightness on the slider, and read the same colour as HEX (`#1f2937`), RGB (`rgb(31, 41, 55)`), HSL (`hsl(216, 28%, 17%)`), and HSV simultaneously. Type a colour in any of the four fields and the others update — round-tripping is exact within the precision of the colour space.
Reach for it whenever you have a colour in one format and need it in another: a designer's HEX value going into a CSS-in-JS stylesheet that wants RGB, an HSL hue you want to translate into HEX for an OpenGraph image, or a colour from a screenshot you want to extract numerically. CSS Gradient Generator is the next step up — once you have two or more colours, it composes them into a linear / radial / conic gradient. CSS Units Converter is the unrelated numeric-unit tool (px ↔ rem ↔ vw); it has nothing to do with colour despite living in the same category.
Examples
(picked from the wheel: indigo)HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(244, 76%, 59%)
HSV: hsv(244, 69%, 90%)All four representations of the same colour. Type into any field to drive the others — the wheel and slider update with it.
Frequently asked questions
Which colour space should I use in CSS?
HEX and RGB are universal — every browser back to forever supports them. HSL is more intuitive for picking by hue and adjusting lightness, and is well supported in modern browsers. New colour spaces like `oklch` and `color-mix` are excellent for design systems but lag in older browsers; pick HEX for portability, HSL for human-friendliness.
Are colours converted exactly?
Within the precision of each space, yes. HEX is 8-bit per channel (256 levels); RGB matches HEX exactly; HSL and HSV use float arithmetic and round to the nearest integer for display. Round-tripping HEX → HSL → HEX usually returns the original; rare edge cases drift by 1 unit due to rounding.
Can I copy multiple formats at once?
Yes — the copy button next to each format puts that format on the clipboard; the *copy all* option produces a multi-line block with HEX / RGB / HSL / HSV stacked, useful for documentation or design tokens.
How is this different from CSS Gradient Generator?
Color Picker handles one colour at a time — picking it, converting between formats, copying it. CSS Gradient Generator takes two or more colours and composes them into a gradient with stops and angles. Use Color Picker first to nail the colours, then Gradient Generator to compose them.