Color Tools
6 free toolsConvert colors, check contrast, build palettes, and simulate color blindness.
Color tools convert between HEX, RGB, HSL, and OKLCH, check WCAG contrast ratios, extract a palette from an image, and preview a design the way people with color-vision deficiency see it. They are built for the accessibility questions that come up in review: does this text pass AA, and does the chart still read without red and green.
Everything here runs in your browser: files and text are processed locally and never uploaded.
All 6 tools
Color Converter
Convert between hex, RGB, HSL, and OKLCH
Color Palette Generator
Generate harmonious color palettes from a base color
Contrast Checker
Check WCAG AA/AAA contrast ratios
Gradient Generator
Visual gradient builder with CSS output
Theme Editor
Generate custom shadcn/ui themes with OKLCH color variables
Color Blindness Simulator
Simulate how images and colors look with different types of color blindness
Guides
From the blog: the mechanisms, standards, and edge cases behind these tools.
- WCAG Contrast Ratio Explained: What 4.5:1 Actually Means How contrast ratio is calculated, the real rules behind WCAG AA and AAA, when 3:1 is enough, and the mistakes that make accessible-looking designs fail — with a free checker. Jul 22, 2026 · uses Color Converter, Color Palette Generator, Contrast Checker +2
- Designing for Color Blindness: What 300 Million Users Actually See How the 8 types of color vision deficiency change what users see, why red/green UI fails, and practical rules — plus a free simulator to test your own designs and palettes. Jul 22, 2026 · uses Color Palette Generator, Contrast Checker, Color Blindness Simulator
- CSS clip-path: A Working Guide to Shapes, Coordinates & Animation How clip-path actually works — every basic shape with correct syntax, the coordinate system that breaks on aspect-ratio changes, the real rules for animating shapes, and when to use mask-image or SVG instead. Jul 27, 2026 · uses Gradient Generator
- Open Graph Image Sizes in 2026: One File That Works Everywhere The 1200×630 standard, the safe zone that survives every crop, the meta tags you actually need, and why X strips your headline — plus how to debug a preview that refuses to update. Jul 25, 2026 · uses Contrast Checker
- How to Test Discord and Slack Webhooks (Without Writing Code) The exact JSON payloads both platforms expect, what each status code means, why 204 looks like a failure, and how to debug rate limits, invalid_payload, and no_service errors. Jul 25, 2026 · uses Color Converter