Search tools

Type to filter all tools

Color Converter

Convert a color between HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH and OKLAB. Type into any field and the others update as you go, or pick the color visually. Reads CSS color syntax and keeps alpha where the format supports it.

Everything runs locally in your browser. Your data never leaves your device.

Pick a color
100%

Next steps

Keep going — these tools open with your result loaded in.

About the Color Converter

This tool translates one color into every common notation at once. Type a value into any field, HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH or OKLAB, and the other fields update as you go. If you would rather not type, open the picker and choose the color visually.

Each field reads the CSS syntax you would actually write, so rgb(59 130 246), hsl(217, 91%, 60%) and #3b82f6 all work. Formats with an alpha channel keep it, and the preview shows the transparency.

What you can do

  • Convert HEX to RGB, HSL, HSV, HWB, CMYK, OKLCH or OKLAB, and back.
  • Paste any CSS color value and read it in every other notation.
  • Pick a color visually and copy it in the format you need.
  • Convert colors with an alpha channel, including 8-digit hex.
  • Copy each notation as a ready-to-paste CSS value.

How to use the Color Converter

  1. 1Type or paste a color into the field whose format you have, or pick one with the color picker.
  2. 2Read the same color in every other format below.
  3. 3Copy the field you need with the button next to it.

Which format for what

HEX and RGB are what most tools and code expect. HSL and HSV describe a color by hue, which makes them easier to adjust by hand. HWB mixes a hue with white and black, which some designers find more intuitive. CMYK approximates ink coverage for print work. OKLCH and OKLAB are the modern perceptual spaces from CSS Color 4, where equal numeric steps look like equal visual steps, which makes them a good base for building palettes.

CMYK has no alpha channel and the conversion is a plain formula, not a color-managed one, so treat it as a starting point for print, not a proof.