← All Tools
Color Picker🔒 100% local
HSL/Hex color conversion. Privacy-first, no server uploads, no tracking.
Related Tools
Converts one colour into every common representation in a single run: hex, short hex where the channels allow it, rgb(), rgba(), hsl(), plus a CSS block, the WCAG relative luminance, which of black or white makes the more readable text on it, and one lighter and one darker neighbour, 32 units per channel away. Six-digit and three-digit hex, rgb()/rgba() and hsl()/hsla() are all accepted on input. Conversion runs in the page, so a colour under NDA in a brand guide never leaves the machine.
How to use it
- Type the colour in whichever format you have it - #FF5733, rgb(255,87,51) or hsl(11,100%,60%).
- Press Process.
- Copy the CSS line for the colour, or the neighbour hexes for hover and active states.
Worked example
#FF5733becomesHEX: #FF5733
RGB: rgb(255, 87, 51)
RGBA: rgba(255, 87, 51, 1)
HSL: hsl(11, 100%, 60%)
CSS: color: #FF5733;
background: rgb(255 87 51); /* modern space syntax */
WCAG:
Relative luminance: 0.2832
vs white: 3.15:1 vs black: 6.66:1
Best text on this bg: #000000 (6.66:1 — AA)
Tailwind-ish neighbours:
lighter: #FF7753
darker: #DF3713
complement: hsl(191, 100%, 60%)The short-hex hint only appears when all three channels are double digits: #FF5733 has no shorthand, rgb(0,0,0) would print (short: #000).
When to use it
- Moving a design token from hsl() into a stylesheet that expects hex.
- Choosing the text colour for a coloured button or badge.
- Deriving lighter and darker shades for a hover and active state without opening a design tool.
What it does not do
- hsl() input must use the comma form with a percent sign - modern space-separated syntax such as hsl(11 100% 60%) is not parsed and raises an unrecognised-format error.
- Alpha is discarded: rgba(255,87,51,0.5) is converted as if it were opaque, and every output assumes alpha 1.
- The neighbours are a flat plus or minus 32 per channel, not a perceptual ramp, so already-saturated channels clip at 255 or 0.
- One colour per run; there is no palette or contrast-pair mode.