Category
Colors Tools & Calculators
Visual color design utilities: WCAG contrast checking, palette generation from a base color, color harmonies, CSS gradient building, and color blending. All computation is local and instant.
Color tools here cover accessibility checking, palette building, harmonies, gradients, and blending. All math runs locally — WCAG contrast ratios and palette generation follow published formulas you can verify against any color library.
Most used in Colors
WCAG Color Contrast Checker
Test foreground/background color pairs against WCAG 2.1 AA and AAA contrast requirements with a live text preview.
Color Palette Generator
Turn one base color into a full design-ready palette: tints, shades, and harmonic variations, each with HEX/RGB/HSL values.
CSS Gradient Generator
Design linear and radial CSS gradients with multiple stops and full angle control — previewed live, exported as clean CSS.
All Colors
Color Mixer & Blender
Blend any two colors at any ratio with RGB and HSL mixing modes, showing the full gradient of intermediate steps.
Color Shades & Tints Generator
Expand any color into tints, shades, and tones in controlled steps — the systematic way to build scales for UI states.
HTML Color Codes Reference
Browse the named HTML/CSS color chart with hex, RGB, and HSL values side by side, or convert any custom color between the three formats with a live picker.
Contrast ratios and what they mean
The checker computes relative luminance per the WCAG 2.1 formula and reports the ratio: 4.5:1 is the AA threshold for normal text, 3:1 for large text (≥24 px or 18.7 px bold), and 7:1 for AAA. A "failing" gray-on-white at 3.9:1 needs either a darker foreground, lighter background, or larger text — the tool tells you which thresholds you pass rather than a vague pass/fail.
Building palettes that work
- Complementary harmony maximizes contrast — strong for CTAs, loud in bulk.
- Analogous harmonies (neighbors on the wheel) are calm and safe for backgrounds and surfaces.
- Test every text/background pair with the contrast checker; a beautiful palette that fails 4.5:1 on body text is not shippable.
Common mistakes
- Judging contrast by eye or screen brightness instead of the computed ratio.
- Generating gradients between colors in different spaces and expecting uniform blending — the tool blends in sRGB unless stated.
- Copying a hex value without the # into CSS and wondering why the rule is ignored.