/

Color Picker

Processed Client Side

Pick any color and instantly copy it as HEX, RGB, HSL, or OKLCH. Fine-tune each channel with the sliders and preview live.

Pick a color
Red
Green
Blue
Color formats
4 formats
HEX#7c5cff
RGBrgb(124, 92, 255)
HSLhsl(252, 100%, 68%)
OKLCHoklch(59.9% 0.230 286.20)

Bookmark this tool now — skip the search next time you need it.

About Color picker

This tool runs entirely in your browser. Whatever you paste is processed on your own device and is never uploaded, logged, or sent to any server.

Pick a colour and get it in every format CSS accepts — HEX, RGB, HSL, and OKLCH — all at once, with per-channel sliders for fine adjustment. Which format you want depends on the job: hex to paste into a stylesheet, RGB when your code needs to compute with the channels, HSL when you want to nudge a hue or lightness by hand, and OKLCH when you are building a scale that has to look evenly spaced. Seeing all four side by side also makes the relationships between them concrete, which is the fastest way to build an intuition for what a hue number actually means. Copying takes every format at once, so a colour can go straight into a token file with its alternate notations already written out as comments.

Key features

  • Four formats generated simultaneously: HEX, RGB, HSL, and OKLCH
  • Per-channel sliders for precise adjustment
  • Native colour picker for choosing visually
  • Large live preview swatch
  • Per-format copy, so you take exactly the notation you need
  • Copy-all, which takes the same colour in all four notations in one go — useful when a token needs both a hex fallback and a modern value
  • Sliders and the native picker stay in sync, so a colour chosen visually can still be adjusted channel by channel
  • OKLCH included, for perceptually even colour scales
  • Runs entirely in your browser

How to use it

  1. Choose a colour with the picker, or set the channels with the sliders.
  2. Fine-tune individual channels until the preview swatch is right.
  3. Read the four formats in the output.
  4. Copy the one that matches where the colour is going, or take all four at once if the value is heading into a token file.

Tips & common mistakes

  • Pick the format for the job: hex for stylesheets, RGB for JavaScript colour maths, HSL for hand-tuning a hue, OKLCH for building an even scale.
  • HSL is easy to reason about but perceptually uneven — the same lightness value looks much brighter in yellow than in blue. OKLCH fixes exactly that.
  • To build a tint and shade ramp, hold hue and saturation and vary only lightness. In OKLCH the steps will look even; in HSL expect to hand-correct them.
  • A colour that looks right in isolation can fail against your actual background. Check any text colour with the Colour Contrast Checker before committing.
  • HSL hue and OKLCH hue are both in degrees but are not the same scale — a hue of 250 means different things in each.
  • For a design system, define colours once as tokens and reference them everywhere, rather than pasting hex codes throughout your stylesheets.
  • OKLCH can describe colours outside the sRGB gamut, which is the point of it on wide-gamut displays. Convert to hex and those colours are clipped back to the nearest sRGB equivalent, so the two values will not always match exactly.
  • Need several colors pulled from an existing image rather than picked by hand? Use the Color Palette Extractor.
  • Before committing to a text/background pairing, check it meets WCAG contrast requirements with the Color contrast checker.

Related tools

Browse all 19 Frontend / CSS tools

Frequently asked questions

9

Click the color field to choose a color or adjust the Red, Green, and Blue sliders, then click the copy icon next to the HEX, RGB, HSL, or OKLCH value you want.

It shows HEX, RGB, HSL, and OKLCH simultaneously, each with its own copy button, plus a copy-all option in the toolbar.

Both describe color by hue, but OKLCH is perceptually uniform, so its lightness matches how bright a color actually appears. HSL is simpler but its lightness can be misleading across hues.

Yes. Once the page has loaded, it runs entirely in your browser with no network access required.

Hex for stylesheets, RGB for colour maths in JavaScript, HSL for hand-tuning a hue, and OKLCH for building a scale that has to look evenly spaced.

Hold the hue and saturation and vary only the lightness. In OKLCH the resulting steps look even; in HSL you will usually need to hand-correct them.

No. Both are expressed in degrees but on different scales, so a hue value cannot be copied from one space to the other.

Not necessarily — a colour in isolation behaves differently against a real background. Check any text colour with the Colour Contrast Checker first.

Yes. Everything is computed in your browser, so once the page has loaded it needs no connection.