Color Contrast Checker
Check text and background colors against WCAG AA and AAA contrast rules, preview them, and get passing alternatives.
Color Converter
Convert any color between HEX, RGB, HSL, OKLCH, Lab, and CMYK, and generate shades, tints, and harmonies. Free, private, and 100% in your browser.
Color
Read as HEX
On white 3.68:1On black 5.71:1
Closest CSS color name:
All Formats
| HEX | #3b82f6 | |
|---|---|---|
| RGB | rgb(59, 130, 246) | |
| HSL | hsl(217.2, 91.2%, 59.8%) | |
| HWB | hwb(217.2 23.1% 3.5%) | |
| OKLCH | oklch(62.31% 0.188 259.81)Perceptually uniform; ideal for palettes | |
| OKLab | oklab(62.31% -0.0332 -0.1851) | |
| CIE Lab | lab(54.62% 8.76 -65.79) | |
| CIE LCH | lch(54.62% 66.37 277.59) | |
| HSV / HSB | hsv(217.2, 76%, 96.5%)Used by Photoshop and design tools; not CSS | |
| CMYK | cmyk(76%, 47.2%, 0%, 3.5%)Simple conversion without an ICC print profile |
Shades & Tints (50–950 scale in OKLCH; click to use)
Color Harmonies
Complementary
Analogous
Triadic
Split complementary
Convert Color Codes Online
Design tools hand you HEX, CSS wants RGB or HSL, modern design systems use OKLCH, and print needs CMYK. Paste a color in any format to get all the others, ready to copy into CSS, Tailwind, Figma, or your code.
#3b82f6
rgb(59, 130, 246)
hsl(217.2, 91.2%, 59.8%)
oklch(62.31% 0.188 259.81)Features
Every web color format
HEX, RGB, HSL, HWB, OKLCH, OKLab, CIE Lab and LCH, plus HSV/HSB for design tools and CMYK for print.
Paste anything
Accepts every CSS color syntax: #rgb, #rrggbbaa, rgb(), hsl() with any hue unit, modern space-separated syntax, oklch(), and all 148 color names.
Transparency
Alpha channels are converted too, with an opacity slider and a checkerboard preview.
Shades and tints
A Tailwind-style 50-950 palette generated in OKLCH for even, perceptually uniform steps.
Harmonies
Complementary, analogous, triadic, and split-complementary colors to build a scheme.
Accurate math
Conversions follow the CSS Color Level 4 specification, including gamut mapping for wide-gamut OKLCH and Lab colors.
How to Convert a Color
- Type or paste a color code, or pick one with the color picker.
- Adjust the opacity if you need transparency.
- Copy the format you need from the table.
- Click a shade or harmony swatch to explore related colors.
Frequently Asked Questions
How do I convert HEX to RGB?
Split the six hex digits into three pairs and convert each pair from base 16 to decimal: #3B82F6 is 3B = 59, 82 = 130, F6 = 246, so rgb(59, 130, 246). Paste a hex code above to convert it instantly.
What is OKLCH and why use it?
OKLCH describes a color by perceived lightness, chroma (colorfulness), and hue. Unlike HSL, colors with the same lightness really look equally light, which makes it ideal for palettes, dark modes, and accessible color systems. All modern browsers support oklch() in CSS.
What does the alpha value in #RRGGBBAA mean?
The last two digits are the opacity: FF is fully opaque and 00 is fully transparent; 80 is about 50%. The same value is written as rgba(r, g, b, 0.5) or rgb(r g b / 50%).
Is the CMYK conversion accurate for print?
It is the standard mathematical conversion. Real print colors depend on the printer, paper, and ink, so use your print shop's ICC profile in a design tool for final print files.
Related Tools
SVG Optimizer
Shrink SVG files by removing Figma, Illustrator, and Inkscape leftovers, rounding numbers, and minifying path data.
JSON Formatter
Beautify, minify, and validate JSON instantly with exact line and column error reporting.
JSON Comparer
Compare two JSON documents side by side and see every added, removed, and changed value.