PocketPlay
中文

Color Converter

Paste any colour — name, hex, rgb, hsl, hwb, lab, lch, oklch or cmyk — and get every other format instantly.

🔒 Runs in your browser — files never leave your deviceFree · No sign-up

All formats

Batch convert

One colour per line.

CSS named colours

NameHEXRGBHSL

How to use the colour converter

  1. Paste or type a colour in any CSS syntax — a keyword, #rgb, #rrggbbaa, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() or cmyk().
  2. Every other format appears instantly; press Copy on the one you need.
  3. Use the table to browse all 148 CSS colour names, or the batch box to convert a whole list at once.

FAQ

What is oklch and why should I care?

OKLCH is a perceptually uniform colour space: changing lightness or chroma looks like an even step to the eye, which makes generating accessible palettes far easier than with HSL. It is supported in all current browsers.

Are lab and lch the same as Photoshop Lab?

They use the same CIE Lab model with the D50 white point that CSS Color 4 specifies, so values line up closely with Photoshop's Lab readouts. Small differences come from rounding and from how out-of-gamut colours are clipped back to sRGB.

Why does my colour change after a round trip?

Formats such as lab, lch and oklch can describe colours outside the sRGB gamut. When a value is converted back to hex it has to be clipped into sRGB, so a very saturated lch colour may not survive the trip unchanged.

CSS Gradient GeneratorHOT Build linear, radial and conic CSS gradients visually, then copy the CSS, a Tailwind class or an SVG file. CSS Filter Generator Tune blur, brightness, contrast, hue-rotate, drop-shadow and more with live sliders, then copy the CSS filter rule. CSS Animation Generator Build @keyframes animations visually with a cubic-bezier easing editor, ready-made effects and a live preview. Box Shadow Generator Stack multiple box-shadow layers with live preview, Material elevation and neumorphic presets, then copy the CSS. Border Radius Generator Drag eight handles to shape any corner, including organic blob shapes, and copy the border-radius CSS. Color PickerHOT Pick any colour with a saturation square, hue and alpha sliders, read HEX/RGB/HSL/HSV/CMYK and check WCAG contrast. CSS Grid Generator Design a CSS Grid visually — set track sizes and gaps, drag to name areas, and copy the container CSS and HTML. Flexbox Playground Try every flex container and item property on a live preview, then copy the CSS and HTML.

All tools →