Color Converter

Supports automatic recognition and conversion between HEX, RGB, HSL, and CMYK; includes built-in color picker, gradient generator, color schemes, and WCAG Contrast Checker. All processing is performed locally in the browser; no data is uploaded to the server.

🖌 Select a color from the color palette

H 0

S 0

L 50

🌈 Tints & Shades

🎨 Color Schemes

HEX #808080 📋

RGB rgb(128, 128, 128) 📋

HSL hsl(0, 0%, 50%) 📋

CMYK cmyk(0%, 0%, 0%, 50%) 📋

🎨 Color Name

⭐ Favorite Color Palette

No favorites yet. Click ❤ to favorite the current color.

📜 History

No records found

♿ WCAG Contrast Checker

Background:

Overview:

What is Color Converter?

Color Converter is an online tool that helps developers freely convert between different color formats. The most common web color formats include HEX (hexadecimal), RGB (Red, Green, Blue), HSL (Hue, Saturation, Lightness), and CMYK (Cyan, Magenta, Yellow, Key/Black). This tool automatically detects the input format and outputs all four formats simultaneously, significantly improving color matching efficiency.

Color Format Guidelines

HEX — Hexadecimal color code, starting with # e.g. #ff6600. The most commonly used color format in CSS.
RGB — RGB (Red, Green, Blue) representation, e.g. rgb(255, 102, 0). Each component ranges from 0 to 255.
HSL — Hue (0~360°), Saturation (0~100%), Lightness (0~100%) - the most intuitive color model.
CMYK — Cyan, Magenta, Yellow, Key (Black) - the standard format for printing.
CSS Color Names — 140+ CSS named colors, e.g. rebeccapurple and coral.

Common Use Cases

UI Design — Designers provide HEX; developers need HSL for adjusting brightness
Button Status — Use Tints & Shades to generate hover/active state shades
Brand Color Scheme — Use Color Schemes to generate Complementary/Triadic palettes
Accessibility Testing — Use WCAG Contrast Checker to ensure text readability
CSS Gradients — Use Favorites to prepare colors for gradient generation

WCAG Contrast Standards

AA Standard — Normal text ≥ 4.5:1, Large text ≥ 3:1
AAA Standard — Normal text ≥ 7:1, Large text ≥ 4.5:1

Note: Drag on the color wheel or enter a color value. The input auto-detects HEX, RGB, HSL, CMYK, and CSS named colors. Click any converted value to copy it to the clipboard.