Color Converter
Paste any color in any format and instantly get all other formats.
HEX
#6366f1
RGB
rgb(99, 102, 241)
HSL
hsl(238.73, 83.53%, 66.67%)
HSV
hsv(238.73, 58.92%, 94.51%)
CMYK
cmyk(58.92%, 57.68%, 0%, 5.49%)
OKLCH
oklch(58.5% 0.2041 277.1)
How to Use the Color Converter
- 1.Paste or type any color value into the input field - HEX, RGB, HSL, or HSV all work.
- 2.The tool auto-detects the format and instantly converts to all other color formats.
- 3.Click the Copy button next to any format row to copy that value to your clipboard.
- 4.A live color swatch shows you the actual color as you type.
- 5.Use OKLCH values in modern CSS with
color(oklch L C H)syntax for wider color gamut support.
What are Color Formats?
Different tools and workflows use different ways to represent the same color. HEX (#6366f1) is the most common format in web development, expressing red, green, and blue channels as two-digit hexadecimal values. RGB (rgb(99, 102, 241)) uses decimal 0–255 values and maps directly to screen hardware. HSL (hsl(239, 84%, 67%)) describes color in terms of Hue (color angle), Saturation, and Lightness - much closer to how humans think about color, making it ideal for generating palettes programmatically. HSV (Hue, Saturation, Value) is used in many design tool color pickers. CMYK (Cyan, Magenta, Yellow, Key/Black) is the print industry standard. OKLCH is a modern perceptually-uniform format from CSS Color Level 4, great for accessible color system design.
Frequently Asked Questions
What is the most common color format in CSS?
HEX is the most widely used CSS color format, followed by RGB and HSL. Modern CSS also supports OKLCH and color() for wide-gamut displays. All are valid CSS color values and render identically in browsers.
Why does CMYK not convert to exactly the same HEX value?
CMYK is a subtractive color model for print, while HEX/RGB is additive for screens. The color gamuts don't perfectly overlap - some CMYK colors are outside the sRGB screen gamut, and some screen colors can't be reproduced in print. Conversions are approximations.
What is the advantage of using HSL over HEX?
HSL makes it easy to programmatically lighten or darken a color by changing just the L (lightness) value, or shift hues by adjusting H (hue). This is why CSS variables and design systems often store colors in HSL for dynamic theming.