What is Color Code Converter?

Color Code Converter checks the same color across multiple formats: Hex, Hex8, RGB, HSL, HSV, CMYK, and OKLCH. You can paste a color code directly or pick a color visually. The result updates as you type, so you can confirm each notation while editing.

It is useful when aligning CSS color values, moving a color from a design tool into code or a script, checking a CMYK reference for print work, or producing oklch() notation for CSS Color 4.

How to Use

1. Enter a color code or pick a color with the picker.
2. The input is parsed immediately and Hex, Hex8, RGB, HSL, HSV, CMYK, and OKLCH are listed together.
3. Copy the value in the format you need.

The input accepts #RRGGBB Hex as well as Hex8, rgb(...), rgba(...), hsl(...), hsla(...), and oklch(...). Leading and trailing whitespace and a trailing semicolon are removed automatically. A 3-digit Hex value (e.g. #FFF) is expanded to 6 digits.

When to Use Each Format

The tool supports seven formats. Each one fits a different place in a workflow.

Hex / Hex8

These are the most straightforward notations for CSS and front-end work. Use Hex for opaque colors and Hex8 when you need to preserve an alpha channel. They also work well in style guides and component token definitions.

RGB

Use RGB when you want to express a color as three numeric channels in rgb(R G B). It is a good fit for assembling color values in JavaScript, and for matching design-tool RGB values one-to-one.

HSL / HSV

Choose HSL or HSV when you want to adjust a color in terms of hue, saturation, and lightness or value. They make it easy to describe changes like "keep the hue and lower the saturation" or "brighten only the lightness", which is useful for building variations out of a theme color.

CMYK

CMYK is a print-oriented reference. It lets you check the rough value a web color would have when sent to a printer. It is a reference, not a final color decision.

OKLCH

OKLCH is the perceptually uniform color space introduced in CSS Color 4. It can be written directly in CSS as oklch(L C H), which is useful in design systems and palettes when you want to control lightness and chroma directly. OKLCH can express colors outside the sRGB gamut, but converting to Hex or RGB clips them to the displayable range.

Input and Output Example

For example, entering #8683D5 produces the following values:

Hex: #8683D5
Hex8: #8683D5FF
RGB: rgb(134 131 213)
HSL: hsl(242 49% 67%)
HSV: hsv(242 38% 84%)
CMYK: device-cmyk(37% 38% 0% 16%)
OKLCH: oklch(0.65 0.12 284.15)

Internal rounding can shift the last digit slightly, but the example shows how a single color is written in each format.

Use Cases

• Moving a color from a design tool straight into CSS or a style definition
• Aligning rgba(...) or hsla(...) values to Hex or Hex8 for tokenization
• Listing multiple representations of a color in a palette or style guide
• Checking a rough CMYK equivalent of a web color before sending it to print
• Producing oklch() notation from an existing color for CSS Color 4

Things to Keep in Mind

• CMYK values change with the press, profile, and workflow, and will not always match a color proof.
• OKLCH can describe colors outside sRGB, but converting to Hex or RGB clips them to the displayable range.
• A string that cannot be parsed as a color is not converted, and the result list does not update.
• This tool only rewrites one color into other notations. It does not suggest palettes or evaluate contrast for the chosen color; the Color Contrast Checker is the right place for that.