What is Color Code Converter?

Color Code Converter shows one color as HEX, RGB, HSL, OKLCH, OKLab, HSV, and CMYK, plus SwiftUI and Compose code. Type a color code or pick a color, and the result updates right away. Use it to align CSS color values, move a color from a design tool into code, or check a CMYK reference for print.

How to Use

1. Enter a color code or pick a color.
2. The result list shows each notation and the SwiftUI and Compose code.
3. Copy the value you need, or copy all values at once.

The input accepts HEX (#RGB, #RGBA, #RRGGBB, #RRGGBBAA), rgb(), rgba(), hsl(), hsla(), oklch(), and oklab(). You can omit the leading #; leading and trailing whitespace and a trailing semicolon are ignored. Three- and four-digit HEX values are expanded to six and eight digits in the results.

When a color includes transparency, HEX uses eight digits and the other notations include alpha.

When to Use Each Format

HEX

Opaque colors use six digits, and colors with transparency use eight. HEX is the most widely used notation in CSS and front-end work, and it also fits style guides and component tokens.

RGB

Use rgb(R G B) when you want to work with the three color channels directly. It fits assembling values in JavaScript or matching the RGB values from a design tool.

HSL / HSV

HSL and HSV describe a color by hue, saturation, and lightness or value. They are convenient when you want to keep the hue and change only the lightness, or reduce saturation toward gray. HSV is not a CSS function, so use it to check the notation from design tools. When pasting into CSS, use RGB, HSL, OKLCH, or another CSS notation.

OKLCH / OKLab

OKLCH and OKLab are perceptually uniform spaces introduced in CSS Color 4. oklch(L C H) uses lightness, chroma, and hue; oklab(L a b) uses Cartesian coordinates. They are useful in design systems when you want to control lightness and chroma, or when you want to write oklch() directly in CSS. They can describe colors outside sRGB, but converting to HEX or RGB clips them to the displayable range.

CMYK

CMYK is a print-oriented reference. It shows roughly what a web color becomes on press. It is not a substitute for a color proof, because the result depends on the press and profile.

SwiftUI / Compose

These are code expressions for iOS and Android. SwiftUI uses Color(red:green:blue:) with sRGB values, and Compose uses Color(0xAARRGGBB) with ARGB values. When the color includes transparency, SwiftUI adds opacity, and Compose includes the transparency in the alpha byte.

Use Cases

• Moving a color from a design tool into CSS or a style definition
• Aligning rgba() or hsla() values to HEX or eight-digit HEX for tokenization
• Listing several notations of a color in a palette or style guide
• Checking a CMYK reference before sending a web color to print
• Getting oklch() or oklab() notation from an existing color