Color tools
Free Color Tools
Free tools to help designers work with color more effectively. No account required.
Accessibility
◑
Contrast Checker
Check WCAG AA/AAA compliance between any two colors. Covers normal text, large text, and UI components.
Open tool→
New
◎
Color Blindness Simulator
Preview your palette through 8 types of color vision deficiency — including deuteranopia, protanopia, and achromatopsia.
Open tool→
New
AA
WCAG Contrast Auditor
Paste up to 10 design system colors and get a full AA/AAA compliance matrix for every foreground/background pair. Export as CSV.
Open tool→
✓
Palette Audit
Paste CSS or tokens and audit your palette for contrast failures, duplicates, and off-archive colors.
Open tool→
Color Analysis
⇄
Color Converter
Convert any color between HEX, RGB, HSL, HSB, and CMYK instantly. Copy any format with one click.
Open tool→
≡
Color Compare
Place two colors side by side and compare their hex values, HSL properties, luminance, and contrast ratio.
Open tool→
◇
Color Harmonies
Generate complementary, analogous, triadic, tetradic, and split-complementary palettes from any seed color.
Open tool→
New
◉
Color Finder
Identify any color from a photo, your camera, or anywhere on your screen. Get the name, hex/RGB/HSL values, and closest archive match.
Open tool→
New
⬒
Image Color Extractor
Upload any photo or design to extract its dominant color palette. Get hex, RGB, and HSL values. Find the closest ColorArchive match for each color.
Open tool→
New
◐
Color Personality Quiz
Answer 5 questions and discover your color personality type. Get a custom palette and shareable result card.
Open tool→
☑
Palette Validator
Score any palette: full contrast matrix, harmony detection, and color-blindness simulation in one pass.
Open tool→
New
K
Color Temperature
Kelvin → RGB/HEX with lighting presets, from candlelight to deep sky.
Open tool→
Creative Tools
▣
Gradient Generator
Create linear or radial CSS gradients between any two colors. Adjust stops and copy production-ready CSS.
Open tool→
▤
Palette Builder
Pick colors from the 5,000+ color archive and export your selection as CSS variables, Tailwind config, or Figma JSON.
Open tool→
New
⊕
Color Mixer
Blend any two colors across 11 smooth steps using RGB, HSL, or perceptually uniform OKLCH interpolation. Export as CSS variables or JSON.
Open tool→
New
▥
Tints & Shades Generator
Generate a complete 11-step tonal scale (50–950) from any hex color. Export as CSS variables, Tailwind config, Sass, or JSON.
Open tool→
New
◈
Brand Color System
Turn any hex color into a complete design system: 11-step primary & neutral scales, semantic colors, WCAG validation, and CSS/Tailwind export.
Open tool→
New
✦
Pick Colors For Me
Describe your project and get instant color palette suggestions from 5,000+ curated colors.
Open tool→
New
✿
AI Mood Palette
Describe a mood, scene, or emotion and get a 5-color palette generated by AI. Highly shareable.
Open tool→
New
▣
Palette UI Preview
See how any palette looks on real UI components — hero, cards, forms — before you build.
Open tool→
New
◉
Mesh Gradient Generator
Create beautiful CSS mesh gradients with multiple color stops. Export as CSS or download as PNG.
Open tool→
New
✦
AI Brand Color Generator
Describe your brand and get a full 6-color palette — primary, accents, neutrals — with AI-generated rationale and export tokens.
Open tool→
New
◈
Color Combinations
Browse 30+ curated color combinations — complementary, analogous, triadic, monochromatic — with hex codes and design use cases.
Open tool→
New
◎
Brand Color Analyzer
Paste any URL to extract its color palette, match to the archive, and get an AI design critique.
Open tool→
New
Aa
Color Name Generator
Enter any hex color to get a poetic name, CSS variable name, Tailwind class, and WCAG contrast data.
Open tool→
New
⬡
Design Token Generator
Generate a complete token system from any brand color — primary, neutral, and semantic scales. Export as CSS vars, Tailwind, SCSS, or JSON.
Open tool→
New
◔
Color Wheel
Drag an interactive wheel through five classic harmonies, every point snapped to a named archive color.
Open tool→
New
◒
Duotone Generator
Upload an image, pick two colors, get the duotone look — processed locally, never uploaded.
Open tool→
New
🎨
Paint Mixing Calculator
Part-by-part paint recipes for any target color from a classic five-paint set.
Open tool→
Exploration
Aa
Word → Color
Type any word or phrase and get a deterministic color palette derived from its characters. Consistent across sessions.
Open tool→
≈
Spectrum View
Explore all 5,000+ archive colors arranged in a full-spectrum grid sorted by hue, lightness, and saturation.
Open tool→
✦
Surprise Me
Click for a random color from the curated archive. Great for breaking creative blocks and finding unexpected inspiration.
Open tool→
New
★
Famous Palettes
35+ iconic color palettes from Google, Apple, Bauhaus, Matrix, and more. With hex codes and cultural history.
Open tool→
New
◷
Color by Decade
100 years of design color history — Art Deco, 1950s pastels, 1970s earth tones, 1980s neon, Millennial Pink, and more. Copy hex codes.
Open tool→
New
◈
2026 Color Trends
13 curated color trends shaping design in 2026 — from digital calm to neo vibrant. With palettes, hex codes, and design guidance.
Open tool→
Developer
New
{ }
Color API
Free REST API for 5,000+ colors. Search by name, hex, or mood. Get color relationships. No auth required.
Open tool→
New
</>
CSS Named Colors
Complete reference for all 148 CSS named color keywords with hex, RGB, and HSL values. Filter by family or CSS level.
Open tool→
New
tw
Tailwind Color Finder
Match any hex to its closest Tailwind class and browse the full v4 palette, cross-named with archive colors.
Open tool→
New
ƒ
CSS Filter Generator
Recolor black icons with pure CSS — get a generated filter chain for any target color.
Open tool→
New
◐
Dark Mode Converter
Turn a light-mode palette into a tuned dark counterpart, exported as CSS variables or Tailwind config.
Open tool→
Display Testing
New
▣
Screen Test
Check your display for defects: uniformity, black level, highlight detail, plus a browser-reported screen report.
Open tool→
New
•
Dead Pixel Test
Cycle fullscreen solid colors to find dead or stuck pixels on any screen.
Open tool→
New
▢
Color Screens
Fullscreen white, black, or any color — for cleaning, lighting, tracing, and pixel checks.
Open tool→
Integrations
More to explore
5,000+ colors, zero noise
Every tool on this page works with the same carefully curated archive of 5,000+ designer-ready colors. Browse the full archive or read the guides to level up your color knowledge.