Color & CSS Tools
WCAG contrast checker · color picker/converter · CSS gradient, box shadow & glassmorphism generators. Free, instant, no sign-up.
Check a Color Pair
Foreground (text)
Background
—
Normal text (16px)
The quick brown fox jumps over the lazy dog
Large text (24px)
Heading example
Bulk Contrast Checker
One pair per line: #FG #BG
🎨 Color Picker — HEX · RGB · HSL · CMYK
Click to pick
HEX
RGB
HSL
CMYK
CSS
🖌 Tints & Shades
Click any swatch to copy its HEX.
🎵 Color Harmonies
Click a card to copy all hex values.
⚖ WCAG Contrast Check
Large Bold Text (24px) — The quick brown fox
Normal body text (16px) — The quick brown fox jumps over the lazy dog.
Small caption text (12px) — used in footnotes and UI hints.
—
Frequently Asked Questions
A HEX code is a 6-digit hex number used in CSS (e.g.
#ff5733). Each pair is
Red, Green, Blue (0–255). #ff5733 → rgb(255, 87, 51). Type any HEX above and all
formats update instantly.WCAG contrast ensures readability for users with visual impairments. AA Normal ≥ 4.5:1, AA
Large ≥ 3:1, AAA Normal ≥ 7:1, AAA Large ≥ 4.5:1. 1:1 = no contrast; 21:1 = black on white.
Yes — completely free, no sign-up, no server. All calculations run in your browser.
CSS Generators
Build linear, radial, and conic gradients. Copy CSS or Tailwind in one click.
Settings
135°
Preview
Design layered CSS box shadows with real-time feedback. Inset support included.
Settings
0px
8px
24px
-4px
20%
Preview
Create frosted-glass cards with backdrop-filter. Adjust blur, opacity, border, and tint.
Settings
12px
20%
20%
16px
Preview
Glass card