Design
Color Converter
Convert colors between all common notations – HEX, RGB, HSL, HWB, the modern OKLCH, CMYK and CSS names. Plus opacity, eyedropper, even shades, color harmonies and code for apps.
- Runs entirely in your browser
- No data upload
- No sign-up
- Free
Color
Shades & harmonies
Calculated in the OKLCH color space – so the steps look evenly spaced in lightness. Click to use a color.
All notations
Guide
How it works
- Enter a color
Type a color value in any notation – e.g. #3366cc, rgb(51 102 204), hsl(220 60% 50%) or simply “tomato”. Alternatively use the color picker, the eyedropper or “Random”.
- Set the opacity
The slider makes the color semi-transparent; all notations then include the alpha value.
- Copy
All notations are listed on the right – from HEX to SwiftUI. One click on “Copy” is enough.
- Build a palette
Below you will find light and dark shades as well as matching colors according to the classic harmony rules. Click to use a color.
FAQ
Frequently asked questions
Which notation should I use in CSS?
They all work in every modern browser. HEX is the shortest, HSL is easy to adjust (e.g. change only the lightness), and OKLCH is best for color palettes because equal lightness values also look equally light.
What is OKLCH?
A modern color space based on human perception: L is the lightness, C the chroma, H the hue. Unlike HSL, a yellow and a blue with the same L value really do look equally light. All current browsers support oklch() in CSS.
Why does CMYK not exactly match the print?
The conversion is a simple formula without a color profile. How a color looks in print depends on the paper, printing process and profile (e.g. ISO Coated). For binding print colors, ask your print shop or use graphics software with color management.
What does the contrast value mean?
It shows how readable white or black text would be on the color – according to the WCAG accessibility guidelines. From 4.5 : 1, normal text is considered easy to read (level AA). The Contrast Checker goes into more detail.
What is the alpha value?
The opacity: 1 or 100% is opaque, 0 is invisible. In HEX it is appended as two extra digits (#33669980 = 50%), in RGB and HSL after a slash.
Are my colors stored?
No. Everything is calculated in your browser, nothing is sent or stored.