Color converter and contrast checker
Type or pick a color in any CSS format to get it in every other one, check whether text in that color is readable, and get a full shade scale.
WCAG 2: AA needs 4.5:1 for body text and 3:1 for large text (24px, or 18.66px bold). AAA needs 7:1 and 4.5:1.
How to convert a color
- Type a color in any CSS format:
#ff8800,#f80,rgb(255 136 0),rgba(255, 136, 0, 0.5),hsl(32 100% 50%),hwb(32 0% 0%),oklch(0.75 0.18 55), or a name liketomato. Or click Pick. - Every other format appears with a Copy button: HEX, RGB, HSL, HWB, OKLCH, OKLab, CMYK, Android
0xAARRGGBBand SwiftUIColor. - Copy link shares the color, for example
navaja.dev/color#ff8800.
Contrast checker
The contrast panel shows the WCAG 2 contrast ratio of your color used as text on white, on black and on any background you type. Body text needs at least 4.5:1 for AA and 7:1 for AAA; large text (24px, or about 18.66px bold) needs 3:1 and 4.5:1. Ratios are rounded down, so 4.49 never shows as a pass.
Shade scale
The shade scale keeps your color's hue and steps lightness from 50 (lightest) to 950 (darkest) in OKLCH, a color space where equal steps look equally different. Chroma is lowered only where sRGB can't show it. Copy it as CSS custom properties or as a Tailwind color object.
Why OKLCH?
oklch() is supported in all modern browsers. Its lightness matches what the eye sees, so two colors with the same L look equally bright, unlike HSL where yellow at 50% is far brighter than blue at 50%. That makes it the best space for building palettes and adjusting colors. When an OKLCH or OKLab color is outside what sRGB screens can show, this tool maps it to the closest color with the same lightness and hue.
Questions
How do I convert HEX to RGB?
Paste the hex code, like #ff8800. The RGB row shows rgb(255 136 0), and RGB (legacy) shows the comma form rgb(255, 136, 0) for older CSS.
What is an 8-digit hex color?
#RRGGBBAA: the last two digits are opacity. #ff880080 is the orange at about 50% opacity. Colors with transparency show alpha in every format.
How do I check color contrast for accessibility?
Your color is treated as text. The panel shows its WCAG 2 ratio on white, black and the background you type, with AA and AAA ratings for normal and large text.
What is OKLCH?
A perceptual color space: L is lightness (0 to 100%), C is chroma (colorfulness) and H is hue in degrees. It is great for palettes because equal changes look equal.
Why does my OKLCH color say it was mapped?
Some OKLCH colors are more vivid than an sRGB screen can display. The tool keeps the lightness and hue and lowers the chroma until it fits, much like browsers do.
Is CMYK exact for print?
No. The CMYK shown is the simple formula from RGB. Real print values depend on the printer's color profile.