Color Picker

Converting a color: worked example

#3b82f6 converts to rgb(59, 130, 246) and hsl(217°, 91%, 60%). That's the math this tool runs on every change: normalize each channel to 0–1 (0.231, 0.510, 0.965), average the max and min for lightness (59.8% → 60%), derive saturation from how wide that range is relative to the lightness (91%), and compute hue from which channel is largest — blue here, giving 217°.

Two more you can check against the palette swatches: #f97316 → rgb(249, 115, 22) → hsl(25°, 95%, 53%), and #22c55e → rgb(34, 197, 94) → hsl(142°, 71%, 45%).

Exact supported behavior

• Three formats: HEX (6-digit, #RRGGBB), RGB (0–255 per channel), and HSL (hue 0–360°, saturation/lightness 0–100%). Changing a value in any tab updates the other two immediately.
• 64 preset swatches across 8 color families, plus a native OS color picker (<input type="color">). On Chromium browsers (Chrome, Edge), that native picker adds a built-in eyedropper for sampling any pixel on your screen; Firefox and Safari don't expose that option.
• Each tab's copy button puts the active value on the clipboard in that format's exact syntax: #rrggbb, rgb(r, g, b), or hsl(h°, s%, l%).

Known limitations

• The HEX field only accepts full 6-digit values. Shorthand like #fff is rejected — expand it to #ffffff first.
• No alpha/opacity channel: this tool can't produce rgba(), hsla(), or an 8-digit hex.
• No CMYK, LAB, or Oklch output.
• Clipboard copy uses the async Clipboard API, which needs a secure (HTTPS) context and can be silently blocked by some browsers' privacy settings.
• No built-in contrast-ratio or WCAG accessibility check.

Test it yourself

Type each HEX value below and confirm the RGB and HSL tabs update to match:

• #3b82f6 → 59, 130, 246 → 217°, 91%, 60%
• #f97316 → 249, 115, 22 → 25°, 95%, 53%
• #22c55e → 34, 197, 94 → 142°, 71%, 45%

When not to use this tool

• You need alpha transparency or a wide-gamut space like LAB or Oklch — this tool only covers HEX, RGB, and HSL.
• You want to sample a color from an uploaded photo rather than type or pick one — there's no image eyedropper here, only the OS picker's on-screen eyedropper where the browser supports it.
• You need a formal contrast or accessibility check between two colors.

Privacy

All conversion math runs locally in your browser; nothing is uploaded. Pair it with the Box Shadow Generator or Website Design Simulator to build out a full set of design tokens.