Color Code Converter
Paste a HEX, rgb(), hsl() or oklch() value, or a CSS color name, to get every other format at once.
How to use the color converter
- Type or paste a color into the single input. It accepts HEX with 3, 4, 6 or 8 digits,
rgb()orrgba(),hsl(), HSV such ashsv(210, 88%, 100%),oklch(), or a CSS color name likedodgerblue. - Watch the six result cards update as you type. There is no convert button to press.
- Find the format you need: HEX, RGB / RGBA, HSL, HSV / HSB, OKLCH or CMYK.
- Press Copy on that card to put the value on your clipboard.
One color in six formats
Type dodgerblue and the cards show #1E90FF, rgb(30, 144, 255), hsl(210, 100%, 56%) and oklch(65.2% 0.1901 253.2), with a CMYK estimate of 88.2%, 43.5%, 0%, 0%.
Compare the two lightness numbers. HSL calls this blue 56% light and OKLCH calls it 65%. They measure different things: HSL lightness is a geometric midpoint between the strongest and weakest channel, while OKLCH lightness is designed to match what your eye perceives. That gap is why the same color can look right in one system and surprising in another.
Which color format to use
- HEX is the compact default for CSS, design files and brand guides. Six digits cover 16,777,216 colors; an 8-digit code adds alpha.
- RGB / RGBA exposes the 0–255 channel values, which suits JavaScript, canvas drawing and any math on individual channels.
- HSL reads well for quick edits, such as nudging lightness for a hover state, but equal lightness values do not look equally light across hues.
- HSV / HSB is the model behind most visual pickers. CSS has no
hsv()function, so convert it before it goes into a stylesheet. - OKLCH is the best fit for design tokens and color scales, because its lightness is perceptual. Values outside sRGB are clamped into sRGB here.
- CMYK is a formula-based print approximation, useful for a first estimate. It is not ICC-profiled, so final print values should come from your printer's profile.
Dedicated converter pages
The most common conversions have their own pages. Each uses this same converter and adds a worked example of the math:
- HEX to RGB: splitting a code into base-16 pairs, plus shorthand and 8-digit alpha.
- RGB to HEX: turning 0–255 values into two-digit hex, zero-padding and alpha.
- HEX to HSL: the lightness, saturation and hue formula and when HSL helps with theming.
- HEX to OKLCH: the route through linear sRGB and OKLab, gamut and browser support.
Frequently asked questions
What color formats can the converter read?
HEX with 3, 4, 6 or 8 digits, rgb() and rgba(), hsl(), HSV, oklch() and CSS color names such as tomato. Input is not case-sensitive, and a hex code works with or without the leading #.
How do I convert a color code to another format?
Paste the code into the input and read the card for the format you want. Every card updates as you type, and each has its own Copy button.
Is the CMYK value accurate for printing?
It is an approximation from a formula, not an ICC-profiled conversion. For press work, convert with your printer's profile, such as FOGRA39 or GRACoL, and expect some bright screen colors to fall outside the CMYK gamut.
What is the difference between HSV and HSB?
There is none. HSB (hue, saturation, brightness) is another name for HSV (hue, saturation, value), which is why the card is labeled HSV / HSB.
Which color format should I use in CSS?
HEX is the most common and works everywhere. Use rgba() or 8-digit hex when you need transparency, and oklch() for scales and design tokens, since it has been supported in all major browsers since 2023.
Why does my OKLCH color change after converting?
OKLCH can describe colors that sRGB cannot display. The converter clamps those values into sRGB, so a very high chroma can come back less saturated than you typed.