PRPickrack

Color Converter

Convert between HEX, RGB, HSL, HSV. Live preview + WCAG contrast check. Browser-side.

HEX
RGB
HSL
HSV

WCAG contrast

Sample text

vs White

4.47:1

AA Large

Sample text

vs Black

4.70:1

AA

AAA ≥ 7:1 · AA ≥ 4.5:1 · AA Large ≥ 3:1 (for 18pt+ or 14pt bold text).

Preview

Convert HEX, RGB, HSL, HSV in one place with live preview and a built-in WCAG contrast check vs white and black.

Color Converter turns any color into HEX, RGB, HSL, and HSV at once — paste in one format, instantly see the other three plus a live preview swatch and WCAG contrast ratios. Built for designers, frontend devs, and accessibility auditors who need to switch between CSS color formats without opening Photoshop or DevTools.

Each format has its own quirks: HEX is compact for CSS, RGB is universal for canvas/SVG/print, HSL is intuitive for tweaking lightness, and HSV (HSB) matches what Photoshop and Figma color pickers show. The converter handles all four with floating-point precision internally and rounds only for display, so round-tripping HEX → HSL → HEX is stable.

Free, no signup, runs entirely in your browser. The contrast panel shows the WCAG luminance ratio against white and black, plus the rating (AAA / AA / AA Large / Fail) so you can pick brand colors that won't fail accessibility audits.

Key features

  • Four formats live — Edit any of HEX, RGB, HSL, or HSV — the others recompute instantly. No 'convert' button to click.
  • Native color picker — Click the picker to drag through the full sRGB gamut. The RGB channel inputs let you nudge by 1 for exact values.
  • WCAG contrast check — Live ratio + rating (AAA / AA / AA Large / Fail) vs white and vs black. Sample text rendered in each pair so you can see readability.
  • CSS-ready copy — Each Copy button outputs the canonical CSS form: #FF0000 for HEX, rgb(255, 0, 0) for RGB, hsl(0, 100%, 50%) for HSL.
  • Browser-side, no tracker — Every conversion happens locally in JavaScript. No upload, no logging, no analytics on your color choices.

How to use

  1. Step 1: Enter a color in any format — Type #FF0000, 255, 0, 0, 0, 100%, 50%, or use the system color picker on the right.
  2. Step 2: Read the converted values — All other formats update instantly. Copy any one with the inline button.
  3. Step 3: Check contrast (optional) — Scroll to the WCAG card. Aim for AA (≥4.5:1) for body text, AAA (≥7:1) for max accessibility.

When to use

  • Design system audit — paste each brand color, verify it has AA contrast against the background it sits on
  • Convert HSL slider values from Figma to HEX for CSS variables
  • Build dark mode variants — take a HEX, drop lightness 30-40% in HSL, copy the new HEX
  • Generate CSS variable values for --brand-primary: #...; --brand-primary-hsl: 239 84% 67%; (HSL component split lets Tailwind v4 / CSS use color-mix)
  • Accessibility QA — confirm body text passes 4.5:1 ratio and large headings pass 3:1
  • Match a screenshot color — use the system color picker, get the HEX, paste into your design tool

Frequently asked questions

What's the difference between HSL and HSV?

Both use Hue (0-360°) and Saturation (%), but the third channel differs. HSL's Lightness is 0% (black) to 50% (pure) to 100% (white). HSV's Value is 0% (black) to 100% (pure). HSV doesn't reach white at max V — saturation must drop too. HSL is more intuitive for 'lighter/darker'; HSV matches Photoshop and Figma pickers.

How is WCAG contrast calculated?

WCAG uses relative luminance (gamma-corrected sRGB) then (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color. AAA ≥ 7:1, AA ≥ 4.5:1 (body text), AA Large ≥ 3:1 (18pt+ regular or 14pt+ bold). The chip shows the worst-passing tier.

Can I enter colors with alpha (e.g., #FF0000AA)?

v1 supports 3-digit and 6-digit HEX only — alpha (8-digit hex or rgba/hsla) is on the roadmap. For now, drop alpha and convert the base color.

Does this support OKLCH or LAB color spaces?

Not yet. OKLCH is on the roadmap — it's the new CSS Color Level 4 space that gives perceptually uniform lightness. For now, stick with HSL for intuitive lightness adjustments.

Why does HEX → HSL → HEX sometimes change the HEX by 1?

Floating-point rounding during conversion. RGB is integer (0-255), HSL channels are integer percentages. Going RGB(120, 200, 100) → HSL → RGB might round to RGB(120, 199, 100). Pickrack rounds only on display; internal math is full precision, so successive edits don't drift.

Does the color picker support transparent / no-color?

No — the picker is HTML5 native <input type="color"> which always returns an opaque RGB. For transparency, see the alpha FAQ above (roadmap).

Can I convert a CSS color name like 'cornflowerblue'?

Not directly in v1. Workaround: open browser DevTools, set body { color: cornflowerblue }, read the computed value as rgb(...), paste here. A name dictionary is on the roadmap.

Related tools

CSS Gradient Generator

Build linear, radial, or conic CSS gradients with live preview. Multi-stop, angle slider, Tailwind v4 ready.

Color Palette Extractor

Extract dominant colors from any image with median-cut quantization. Hex + RGB output, CSS array export. Browser-side.

Regex Tester

Test regular expressions live with match highlighting and capture groups. Supports JavaScript regex flags.