한국어
Home › Developer › Color Converter

Color Converter

Convert between HEX, RGB, HSL, HSV, CMYK and OKLCH color codes. Check WCAG contrast between text and background colors, and build a shade palette.

Pick a color or type a code on the right
HEX
RGB
HSL
HSV
CMYK
OKLCH

Shade palette

Click a swatch to copy its HEX code. The middle one is your current color.

Contrast checker (WCAG)

Sample Aa 123Small body text looks like this.
Contrast ratio-

How to use

1Enter a colorPick one with the color picker or type a code in any field: HEX, RGB, HSL and more.
2Copy a codeAll other formats are calculated instantly. Click Copy next to the format you need.
3Check contrastOn the right, see whether your text and background colors meet web accessibility contrast levels.

When it helps

Design files often list colors in HEX, your code needs RGB or HSL, and a print shop asks for CMYK. Each format uses a different formula, so converting by hand is tedious. Type a color in one field and see all six formats at once.

When you put text on a colored background, contrast matters. The Web Content Accessibility Guidelines (WCAG 2.x) recommend at least 4.5:1 for body text and 3:1 for large text. The checker on the right shows pass or fail right away, which helps when choosing colors for buttons, banners and thumbnails.

The shade palette builds lighter and darker steps around your color. It is handy for picking default, hover and pressed colors for a button.

FAQ

Will the CMYK values match my print?

No. The CMYK here is a simple formula and does not account for real print profiles (paper, ink). Check exact print colors with your print shop's profile.

What is OKLCH?

A modern color space tuned to how bright colors look to the human eye. You can use it directly in modern CSS as oklch(...), and changing only the lightness keeps the hue steadier.

Does it support transparency (alpha)?

Yes. Enter #RRGGBBAA or rgba() and the alpha value is kept. The contrast ratio is calculated for opaque colors.

What is the difference between AA and AAA?

AA is the baseline most websites aim for (4.5:1 for body text). AAA is stricter (7:1 for body text).