Explore 6 harmony modes, extract from images, and export as CSS, Tailwind, or JSON.
Select from 6 color harmony modes: Random, Analogous, Complementary, Triadic, Split-Complementary, or Monochromatic. Each mode uses color theory to generate palettes that are mathematically harmonious and visually balanced. Set a base color to build your palette around a specific brand hue.
Lock your favorite colors and regenerate only the unlocked ones. Add or remove colors (2-10) to build palettes of any size. Click the edit icon to manually enter a specific HEX code. This iterative workflow mimics how professional designers build production-ready color systems.
Export your palette in 5 formats: CSS variables, Tailwind config, SCSS variables, JSON, or PNG image. Click any color to copy its HEX value instantly. Share your palette via URL so teammates can open the exact same colors in their browser.
Generate palettes using professional color theory: Complementary, Analogous, Triadic, Split-Complementary, Monochromatic, or fully Random. Each mode calculates hue relationships on the color wheel to produce combinations that are scientifically proven to work well together.
Build palettes from 2 to 10 colors to match any project scope. Minimal 2-color schemes for clean interfaces, 5-color standards for brand systems, or extended 10-color scales for comprehensive design tokens and UI component libraries.
Expand each palette color into a 9-step shade scale from dark to light: similar to Tailwind's color system. Click any shade to copy its HEX code. Perfect for building full design token sets with consistent lightness steps across your entire palette.
Export as CSS custom properties, Tailwind CSS config, SCSS variables, JSON data, or a downloadable PNG swatch image. Each format is ready to paste directly into your codebase or share with your design team: no manual conversion needed.
See HEX, RGB, and HSL color values for every color in your palette, plus the closest CSS color name. One-click copy makes it easy to use your colors in any design tool, stylesheet, or development framework.
Share any palette via URL: teammates open the link and see the exact same colors. Built-in WCAG contrast indicators show which colors pass accessibility standards for white text, helping you build inclusive, accessible designs.
Create cohesive color schemes for websites, apps, and dashboards using color harmony modes. Export directly to CSS, Tailwind, or SCSS to eliminate the gap between design and development. Use the shade generator to build complete design token scales.
Build consistent brand color palettes starting from your primary brand color. Share palettes via URL so every team member works with the exact same colors. Export as JSON or PNG for brand guideline documentation.
Design eye-catching social media graphics, presentations, and marketing materials with scientifically harmonious color combinations. Monochromatic mode creates elegant single-hue themes, while Triadic mode delivers bold, vibrant multi-color schemes.
Start with AdFlex for free and unlock smart design & marketing tools.
Choose a harmony mode (Complementary, Analogous, Triadic, Split-Complementary, or Monochromatic) and set a base color. Press Space or click Generate to create palettes based on color theory. Lock any colors you like, then regenerate to fill only the unlocked slots.
HEX, RGB, and HSL formats are all displayed on each color bar. Click any bar to copy its HEX value. Export your entire palette as CSS variables, Tailwind config, SCSS variables, JSON, or a PNG image.
Yes. Export as CSS custom properties, Tailwind CSS config, SCSS variables, JSON array, or download as a PNG image. You can also share a direct URL link that preserves your exact palette.
Six modes based on color theory: Random (no rules), Complementary (opposite hues), Analogous (adjacent hues), Triadic (three evenly spaced hues), Split-Complementary (base + two near-opposites), and Monochromatic (one hue, varied lightness).
Yes! Upload any image and the tool will automatically extract the dominant colors using color analysis. The extracted colors replace your current palette and can be further refined.
Yes. Drag any color bar to reorder it. Click the hex code to open a color picker. Use the +/- buttons to adjust palette size between 2-10 colors. Undo/redo with Ctrl+Z / Ctrl+Shift+Z.
Yes, completely free with no signup required. Generate unlimited palettes, lock, reorder, and export colors as much as you want. No watermarks or restrictions.
Palettes are encoded in the URL hash, so you can bookmark or share the link to preserve your palette. The browser also supports undo/redo during your session. Make sure to export before leaving.
No sign-up required. Free for commercial use.