Free · No sign-up · No ads
Color Tools for Designers
& Developers
Everything you need to work with color in one place — from palette generation and mixing to accessibility checking and gradient building. All tools are completely free and work instantly in your browser.
Palette Generator
Generate beautiful color palettes instantly
Pick a harmony mode — analogous, complementary, triadic, tetradic, or random — and generate an infinite number of color palettes. Lock colors you love, download as PNG, or open directly in the Playground.
Playground
Visualise palettes on real UI components
See your palette applied to a live UI mockup — buttons, cards, badges, inputs and typography — so you know exactly how it will look in a real product before you commit.
Color Mixing Lab
Mix and blend any two colors together
Browse all 140+ CSS named colors and mix any two together in real time. See the blended result with its hex, RGB, and HSL values. Ideal for finding harmonious in-between shades.
Image → Palette
Extract colors from any photo or image
Drag, click, or paste any image and instantly extract its dominant color palette. Choose 3, 5, 6, or 8 colors. Copy hex codes, open the palette in the Playground, or save it to your collection.
Contrast Checker
Verify WCAG AA & AAA accessibility compliance
Enter any foreground and background color and instantly see the contrast ratio with pass/fail results for WCAG AA and AAA standards across normal text, large text, and UI components.
Tints & Shades Generator
Generate a full 50–950 color scale
Input any hex color and generate a complete tint and shade scale — just like Tailwind CSS. Export as CSS custom properties or a Tailwind config snippet, ready to paste into your project.
CSS Gradient Generator
Create linear, radial, and conic gradients
Design beautiful CSS gradients with an interactive stop editor, angle dial, and XY position pad. Choose from 16 presets or build from scratch. Export as CSS, Tailwind config, SVG, or PNG.
Color Blindness Simulator
Preview palettes as seen by color-blind users
Simulate how your color palette looks to people with protanopia, deuteranopia, tritanopia, and achromatopsia. An essential accessibility check before shipping any design.