About this color picker
Designers and front-end engineers constantly translate between HEX swatches from brand guidelines, rgb() tuples from design tokens, and hsl() values when tweaking lightness in CSS. This page centralizes those conversions with a native color input for fast exploration plus text fields for precise edits.
The picker normalizes shorthand HEX (three-digit) into six-digit lowercase form so downstream tools receive predictable strings. RGB output uses 8-bit channels; HSL values are rounded integers suitable for quick prototyping even though design tools may show decimals.
When to use it
- Copying ready-to-paste CSS color functions from a brand HEX.
- Checking contrast pairs by bouncing between HEX and HSL lightness.
- Teaching how sRGB hex maps to cylindrical HSL coordinates.
How to use this page
- Drag the native color thumb or paste a HEX string into the text field.
- Confirm the swatch matches your intent.
- Copy HEX,
rgb(), orhsl()using the per-row buttons.
Color science caveats
This tool operates in sRGB space like most web canvases. It does not model wide-gamut displays or OKLCH unless you extend the code separately.
Frequently asked questions
- Does it support alpha channels?
- Not in this UI—opaque colors only.
- Why does HSL differ slightly from Figma?
- Rounding and gamut assumptions differ across implementations; treat values as starting points.
- Is anything uploaded?
- No. Colors stay inside the browser tab.
- Can I enter hsl manually?
- Currently you drive the picker via HEX or the native control; extend the app if you need reverse parsing.