Tools
Convert colors between every CSS format, check WCAG contrast, generate shade scales and simulate color blindness.
Convert between HEX, RGB, HSL, HWB, Lab, LCH, OKLab, OKLCH and Display P3, check WCAG contrast with fix-it suggestions, find the nearest Tailwind color, generate a shade scale, and preview color blindness. Everything runs in your browser — nothing is uploaded.
bg-emerald-600 / text-emerald-600alpha
on white
on dark
#009b65
rgb(0 155 101)
rgb(0, 155, 101)
hsl(159.1deg 100% 30.4%)
hwb(159.1deg 0% 39.2%)
lab(56.37% -46.16 18.24)
lch(56.37% 49.63 158.44)
oklab(0.60829 -0.12946 0.04743)
oklch(0.60829 0.13787 159.88)
color(display-p3 0.2676 0.5986 0.4131)
3.57:1
The quick brown fox jumps over the lazy dog.
Large heading text
Fails AA — normal text (4.5:1) — try one of these instead
:root {
--color-brand-50: #e9fff2;
--color-brand-100: #c3ffdd;
--color-brand-200: #83fabe;
--color-brand-300: #6be3a8;
--color-brand-400: #42bf86;
--color-brand-500: #16a26b;
--color-brand-600: #008757;
--color-brand-700: #006c45;
--color-brand-800: #005636;
--color-brand-900: #00472c;
--color-brand-950: #002c1a;
}Protanopia (no red)
Sample text on this background
Contrast: 3.28:1
Deuteranopia (no green)
Sample text on this background
Contrast: 3.81:1
Tritanopia (no blue)
Sample text on this background
Contrast: 3.53:1
Achromatopsia (no colour)
Sample text on this background
Contrast: 3.57:1
Picking colors that look good is easy; picking colors that also meet accessibility standards is harder. This tool parses any CSS color format you throw at it, converts it to every other format at once, and pairs that with a full WCAG 2.1 contrast checker that suggests a passing foreground or background when your pair fails. It also finds the nearest Tailwind color, builds an evenly-spaced OKLCH shade scale you can export as CSS variables or a Tailwind theme, and simulates protanopia, deuteranopia, tritanopia and achromatopsia so you can see your palette the way some of your users will.
Parses hex, rgb, hsl, hwb, lab, lch, oklab, oklch, color() and all 148 named colours, and converts between all of them.
Live contrast ratio with all five AA/AAA pass-fail badges, alpha compositing, and a real text/button preview.
When a pair fails your target ratio, get the nearest passing foreground and background, found by walking OKLCH lightness.
Generate a 50–950 OKLCH shade scale from any colour, with contrast against white and black, exported as CSS variables, Tailwind v4 @theme, or SCSS.
Preview your foreground/background pair under protanopia, deuteranopia, tritanopia and achromatopsia, with the simulated contrast ratio.
Copy a link that carries your colour, foreground and background in the URL hash. Nothing is sent to a server.
Type or paste any CSS color - hex, rgb, hsl, hwb, lab, lch, oklab, oklch, color() or a named color - or pick one with the eyedropper.
The tool converts your color to all other formats instantly, each with a one-click copy button.
Set a foreground and background to see the WCAG 2.1 ratio and pass/fail badges for AA, AAA and UI components.
When a pair fails your target ratio, use the suggested passing foreground or background found by walking OKLCH lightness.
Build a 50-950 OKLCH shade scale from your color and export it as CSS variables, a Tailwind v4 theme, or SCSS.
Every conversion, contrast check and simulation runs in your browser. Nothing about the colors you enter is uploaded, and share links store the color values only in the URL hash.
Free online CSS gradient generator with live preview. Create beautiful linear, radial, and conic gradients. Customize colors, angles, and color stops. Copy CSS code with one click. No signup required.
Free online CSS box shadow generator with live preview. Create beautiful shadows with visual controls. Support for multiple shadows, inset shadows, and presets.
Free online Pick One tool with live preview. Create stunning side-by-side A/B comparisons with customizable layouts, labels, backgrounds, and aspect ratios. Perfect for social media polls.
Developed by MadMVP
Book a call to build your vision into reality