Palette Generator
Generate harmonious 5-color palettes with color theory. Lock colors, switch harmony modes, export to CSS, JSON, SVG, or Tailwind.
The Tools
Six tools, one purpose: getting your colors right.
Color Picker
Color wheel with HSL picking, EyeDropper API, manual HEX/RGB/HSL/CMYK input, tints & shades, and WCAG contrast checking.
Image Extractor
Drop any photo and extract a 5-color palette using max-distance LAB sampling. Drag markers to probe any region.
Live Camera
Point your camera at any surface and detect colors in real time. Five draggable markers sample the live feed — save palettes instantly.
SVG Recolor
Upload any SVG and replace colors interactively. Global Hue, Saturation, Brightness sliders with luminance preservation.
Gradient Generator
Build linear, radial, and conic CSS gradients with a multi-stop drag bar, angle dial, and inline color picker. Copy CSS instantly.
How It Works
Three steps. No account needed.
1
Pick a Tool
Choose from six tools based on your workflow.
2
Generate & Refine
Fine-tune with sliders, lock colors, apply harmony rules.
3
Export
Copy HEX, RGB, HSL, or download palettes as PNG/SVG.
Built on Color Theory
Every palette follows proven color theory — not randomness. Six harmony modes guarantee cohesive results.
- Complementary — opposites on the wheel for bold contrast
- Analogous — neighboring hues for unified looks
- Triadic — three equally-spaced hues for balance
- Tetradic & Split-Complementary for complex schemes
- Monochromatic — one hue, infinite depth
Accessibility-First
Every color is evaluated for WCAG 2.1 contrast compliance. Know at a glance if your combination passes AA or AAA.
- WCAG 2.1 AA & AAA contrast ratio calculation
- Color blindness simulation: Protanopia, Deuteranopia, Tritanopia
- Live text-on-background preview
- Pass/Fail badges for every combination
Pull Palettes from Photos
Drop any image and extract the 5 most distinct colors using farthest-point LAB sampling. Drag markers to probe any region.
- Drag-and-drop, clipboard paste, or URL import
- Farthest-point LAB sampling for maximum diversity
- Draggable marker probes
- Send extracted palette to Palette Generator
Recolor SVGs Instantly
Upload an SVG and overhaul its color scheme. Pick colors individually or apply global Hue, Saturation, and Brightness sliders.
- Parses every fill, stroke, and inline style
- Four global sliders: Hue, Saturation, Brightness, Temperature
- Smart Recolor preserves luminance
- Full undo history + one-click download
Build CSS Gradients
Create linear, radial, and conic CSS gradients. Drag stops, spin the angle dial, copy production-ready CSS.
- Linear, Radial, and Conic types
- Multi-stop drag bar with inline pickers
- Angle dial with numeric input
- One-click CSS copy
Sample Palettes
A glimpse of what Free Color Tool can generate.
FAQ
Yes. All six tools are free with no account needed.
HEX, RGB, HSL, HSB, CMYK, LAB, LCH, XYZ, LUV, and HWB. Click any format to copy.
Export as CSS variables, JSON, PNG, SVG, Tailwind config, or SCSS. Share via URL with encoded params.
JPG, PNG, WebP, GIF, and SVG. Drag-and-drop, browse, or paste from clipboard.
The Palette Generator previews palettes under Protanopia, Deuteranopia, Tritanopia, and Achromatopsia using chromaticity matrix simulation.
Featured on
