Color Converter
Convert between HEX, RGB, HSL and OKLCH.
Pick visually
Formats
#rgb, #rgba, #rrggbb or #rrggbbaa
rgb(37 99 235) or rgba(37, 99, 235, 0.5)
hsl(221 83% 53%) or hsla(221, 83%, 53%, 0.5)
oklch(0.55 0.2 262) or oklch(55% 0.2 262 / 0.5)
Advertisement
Banner adResponsive
Color Converter – HEX, RGB, HSL & OKLCH
Convert colors between HEX, RGB, HSL and OKLCH instantly. Edit any field, add alpha, and copy the CSS value. Handles out-of-gamut OKLCH colors.
Related tools
What is Color Converter?
Convert a color between HEX, RGB, HSL and OKLCH in one place. Type or paste a color into any of the four fields, or pick one visually, and the other three update at once. Alpha is supported in every format. Copy the modern space-separated CSS syntax, or switch to the older comma syntax with rgba() and hsla(). OKLCH colors that fall outside the sRGB gamut are mapped to the closest displayable color, and you are told when that happens.
- color converter
- hex
- rgb
- hsl
- oklch
- alpha
Features
What you get with Color Converter.
Four Formats, Always in Sync
Edit HEX, RGB, HSL or OKLCH and the other three update immediately.
Paste Any Format
Any field accepts any supported color syntax, with or without alpha.
OKLCH Done Properly
Out-of-gamut colors are mapped the way CSS Color 4 specifies, and flagged.
Modern or Legacy Syntax
Copy space-separated CSS, or comma-separated rgba() and hsla().
How to use Color Converter
Follow these steps to get the best results.
Enter a color
Type or paste a color into any field, or use the picker and alpha slider.
See every format
HEX, RGB, HSL and OKLCH show the same color. Edit any one to change the rest.
Copy the value
Press Copy next to the format you need and paste it into your CSS.
Output#2563eb rgb(37 99 235) hsl(221 83% 53%) oklch(0.5461 0.2152 262.88)
Advertisement
In-feed adResponsive
Frequently asked questions
Common questions about Color Converter.
OKLCH describes a color by lightness, chroma (how colorful it is) and hue. It is built so that equal changes in its numbers look like equal changes to the eye, which makes it good for building palettes and gradients. All current browsers support it in CSS.
In HSL, colors with the same lightness value can look very different in brightness, for example yellow and blue. In OKLCH, lightness matches what people actually see, so two colors with the same L look equally bright.
OKLCH can describe colors that a standard sRGB screen cannot show, such as very vivid greens. HEX, RGB and HSL can only hold sRGB colors, so the converter shows the closest sRGB color and tells you it did.
Use the alpha slider. HEX gets two extra digits (#2563eb80), and RGB, HSL and OKLCH get a slash and an alpha value, such as rgb(37 99 235 / 0.5). The legacy syntax uses rgba() and hsla() with commas.
HSL is written with whole numbers, so converting to HSL and back can shift a channel by a few steps. HEX and RGB are exact, and OKLCH is printed with enough decimals to stay within one step of the original.
Advertisement
Mobile banner adResponsive
Comments
Share feedback, ask questions, or help others use this tool.
Join the discussion
Sign in to comment, reply, and report inappropriate content.