Skip to main content
PushDraft

Color Tools for Designers and Developers

Convert, build, and check colors for accessibility — all with copy-ready CSS output. Everything runs locally.

All Color Tools

Color Converter

Convert colors between Hex, RGB, HSL, and CMYK formats with live preview.

CSS Gradient Generator

Build linear and radial CSS gradients visually with live preview and copy-ready code.

Color Contrast Checker

Check color contrast ratios for WCAG AA and AAA accessibility compliance.

What's included

  • Color Converter — Convert between HEX, RGB, RGBA, HSL, HSLA, and CMYK with a live preview and one-click copy. Handles short-form hex (#F00) and alpha transparency.
  • CSS Gradient Generator — Build linear and radial gradients with multi-stop control. Output is ready-to-paste background: linear-gradient(...) CSS that matches the visual preview exactly.
  • WCAG Contrast Checker — Test text-on-background combinations against WCAG 2.1 AA (4.5:1 normal, 3:1 large) and AAA (7:1 normal, 4.5:1 large) contrast ratios. Shows pass/fail for every text size.

Why WCAG contrast matters

Roughly 8% of men and 0.5% of women have some form of color vision deficiency, and a much larger group experience reduced contrast sensitivity due to age, screen glare, or low-light conditions. WCAG 2.1 Level AA — the legal minimum in India (as best practice under DPDPA accessibility principles), the EU (EAA 2025), and the US (ADA Title III) — requires:

  • 4.5:1 contrast ratio for normal text (below 18pt / 24px)
  • 3:1 contrast ratio for large text (18pt / 24px and above, or 14pt bold)
  • 3:1 contrast ratio for UI components and graphical elements

Failing these can cost you conversions and expose your business to accessibility complaints. Run any brand palette through our Contrast Checker before shipping.

Designing a color system

Start with a base hue in HSL — it's the only format where changing lightness and saturation feels intuitive. Use the Color Converter to get the corresponding hex and RGB for your CSS variables. Then build tint and shade scales (usually 50 / 100 / 200 / 300 / 500 / 700 / 900) by stepping lightness at consistent intervals. Pushrdaft's own design system uses Electric Indigo (#6366F1) as the primary, derived from HSL 239° 84% 67%.

Dark mode considerations

Colors that pass contrast on a white background often fail on dark grey. The brand's primary purple at 4.5:1 on white may only hit 3.2:1 on #1F2937. Always check both modes. Our contrast checker accepts arbitrary background colors, not just white.