AlteredIdea: Just Another Thought
Gradient MakerBox ShadowColor PaletteGrid GeneratorPX → REMSVG to JSXSVG OptimizerSVG to Data URL

Color Palette Generator

Generate color harmonies and shade scales. Export as CSS variables, SCSS, JSON, or Tailwind config.

:root {
  --color-1: #6366f1;
  --color-2: #f16366;
  --color-3: #66f163;
}

Free online color palette generator for CSS, Tailwind, and design systems

Choosing the right colors is one of the most impactful decisions in any UI project. A well-structured palette keeps your interface coherent and accessible, while a poorly chosen one creates visual chaos. AlteredIdea's color palette generator uses proven color theory: complementary, analogous, triadic, split-complementary, and tetradic harmonies: to generate palettes that actually work together, derived from any base color you choose.

Beyond harmony modes, the Shades tool generates an 11-stop lightness scale in the same naming format used by Tailwind CSS (50–950). This makes it trivial to create a complete brand color token set: paste the Tailwind export directly into your config, or copy the CSS custom properties block into your design system stylesheet. All processing happens in your browser; nothing is sent to a server.

How to use: step by step

  1. 1
    Pick your base color
    Click the color swatch to open the native color picker, or type any valid hex code (e.g. #3b82f6) directly into the input field.
  2. 2
    Choose a harmony mode
    Select Complementary, Analogous, Triadic, Split, Tetradic, or Monochromatic. Each mode applies color theory rules to generate a harmonious palette from your base.
  3. 3
    Switch to Shades for a Tailwind-style scale
    Click the Shades button to generate 11 lightness steps (50–950) for your hue: perfect for defining a brand color scale in Tailwind or a design system.
  4. 4
    Click any swatch to copy its hex value
    Hover over a color swatch to see the hex code, then click it to copy. A 'Copied!' flash confirms the value is in your clipboard.
  5. 5
    Export in your preferred format
    Choose CSS custom properties, SCSS variables, JSON, or Tailwind config from the export panel, then hit Copy to grab the entire palette in one click.

Related Tools

🌈

Gradient Maker

Build linear, radial, and conic CSS gradients visually with color stops and live preview.

🪄

Box Shadow Maker

Compose multi-layer box shadows with X/Y offset, blur, spread, color, and inset controls.

⊞

CSS Grid Generator

Configure grid-template-columns, rows, gaps, and alignment visually. Copy ready-to-use CSS.

🔢

PX → REM Converter

Convert px to rem/em and back. Set custom base font size. Batch convert and view standard scale.

Frequently Asked Questions

What is a color palette generator?
A color palette generator takes a single base color and applies color theory rules: such as complementary (opposite on the color wheel) or triadic (three equally spaced hues): to produce a set of harmonious colors ready to use in a design or codebase.
What is the difference between complementary and analogous colors?
Complementary colors sit directly opposite each other on the color wheel (180° apart) and create high contrast. Analogous colors are adjacent (30°–60° apart) and create a cohesive, low-contrast palette that feels natural and calming.
What does the Shades mode generate?
Shades mode generates 11 lightness steps for the same hue, matching the naming convention used by Tailwind CSS (50, 100, 200 … 950). This is ideal for defining a full brand color scale in a design system or Tailwind config file.
How do I export colors as CSS custom properties?
Select the CSS format in the export panel. The output is a :root block with --color-1 through --color-N variables. Click Copy and paste directly into your stylesheet.
Can I use this to generate a Tailwind color config?
Yes. Switch to Tailwind format in the export panel to get a colors.brand object ready to paste into your tailwind.config.js or tailwind.config.ts file.
What color spaces does the generator use internally?
Colors are generated in HSL (Hue, Saturation, Lightness) space, which maps naturally to color theory concepts. All output is converted to hex for maximum CSS compatibility.
Can I type a hex code directly?
Yes. The hex input field next to the color swatch accepts any 6-digit hex value. Type or paste your brand color and the palette updates instantly.
Is there a limit to how many colors are generated?
The number of swatches depends on the harmony mode: complementary gives 2 colors, triadic gives 3, tetradic gives 4, analogous gives 4, and shades mode gives 11. Monochromatic generates 8 lightness steps.
Does this tool require an internet connection at runtime?
No. All color math runs entirely in your browser using JavaScript. Once the page is loaded, the generator works offline with no external API calls.

AlteredIdea vs alternatives

vs Coolors / Paletton: Those tools are great for browsing random palettes but lack developer export formats like Tailwind config or CSS custom properties. AlteredIdea generates code you can paste directly into your project.

vs Figma / design tools: Figma requires an account and doesn't export Tailwind or SCSS. AlteredIdea needs no account and copies dev-ready code in one click.

vs writing CSS manually: Computing complementary hues and generating 11-stop shade scales by hand takes significant time. This tool does it instantly with a visual preview of every swatch.

Share:Share on XShare on LinkedIn