Color Picker & Converter

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand Color Picker & Converter

Converts a color between hex, RGB, HSL, HWB, and OKLch, with a visual picker and live preview.

How it works

Hex and RGB describe the same thing in two notations: each pair of hex digits is one channel from 0 to 255, so #FF5733 is rgb(255, 87, 51). HSL is a cylindrical rearrangement of those same sRGB numbers — hue as an angle on the color wheel, saturation and lightness as percentages — which makes it easy to derive tints and shades but does not change the color space. OKLch is different in kind: it is a perceptual space, so equal steps in its lightness channel look equal to the eye, which is why an OKLch ramp produces an even palette where an HSL ramp bunches up in the yellows.

When to use it

  • Turning a hex value from a design file into the rgb() or hsl() form a stylesheet or a canvas API expects
  • Building a tint and shade scale from a brand color by holding hue and saturation and varying lightness
  • Reading a color out of a screenshot or a rendered page and getting every notation for it at once
  • Comparing two colors that look similar by their numbers rather than by eye

Watch out for

  • There is no alpha channel here. Eight-digit hex (#RRGGBBAA), rgba(), and hsla() are not parsed, and transparency is dropped rather than carried through.
  • Round-tripping can shift the value by one. HSL output is rounded to whole degrees and whole percent, so hex → HSL → hex does not always return the byte you started with.
  • HSL lightness is not perceived brightness. hsl(60, 100%, 50%) is a vivid yellow and hsl(240, 100%, 50%) is a dark blue, despite both claiming 50% lightness — use OKLch when the comparison has to match what the eye sees.
  • Named CSS colors are not accepted. Enter `#FF0000` rather than `red`.

Frequently Asked Questions

How to convert hex to RGB?

Split the 6-digit hex code into three pairs: #FF5733 → R=0xFF=255, G=0x57=87, B=0x33=51, giving rgb(255, 87, 51). For shorthand hex like #F73, double each digit first (#FF7733). Paste any hex code here and the RGB, HSL, and HWB values appear instantly.

How to convert RGB to hex?

Convert each channel (0–255) to two hexadecimal digits: R=255 → FF, G=87 → 57, B=51 → 33, giving #FF5733. In JavaScript: "#" + [r, g, b].map(v => v.toString(16).padStart(2, "0")).join(""). Paste rgb() values here to get the hex code automatically.

What is the difference between RGB and HSL?

RGB defines colors by red, green, and blue light intensity (0–255 each) — it maps to how screens work. HSL uses Hue (0–360° on the color wheel), Saturation (0–100% vividness), and Lightness (0–100%). HSL is more intuitive for creating tints, shades, and design system color scales.

How to Use Color Picker & Converter

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.