TR ToolRux

Color Palette Generator

Create harmonious color palettes based on color theory — pick a base color, choose a harmony mode, and get a beautiful palette with one click.

Generated Palette

CSS Custom Properties

:root {
  --color-1: #64d8ed;
  --color-2: #6495ED;
  --color-3: #7864ed;
}

Settings

Related Articles

Learn more about this topic

Related Tools

You might also find these useful

Color Converter

Convert colors between HEX, RGB, and HSL.

CSS Gradient Generator

Create beautiful CSS gradients from your palette.

Box Shadow Generator

Add depth with CSS box shadows.
📖 Learn More

Everything you need to know

Six Harmony Modes

Choose from complementary, analogous, triadic, split-complementary, tetradic, and monochromatic harmonies. Each mode applies color theory to generate a palette that looks natural and balanced.

Real-Time Preview

See your palette update instantly as you change the base color or switch harmony modes. The large preview bar and individual swatches show exactly how the colors work together.

Click-to-Copy Swatches

Click any swatch to copy its HEX code to your clipboard. Each swatch also displays the HSL values for quick reference. Use the "Copy All" button to grab everything at once.

CSS Custom Properties

The generated CSS custom properties (--color-1, --color-2, etc.) are ready to paste into your stylesheet. This makes it easy to maintain a consistent palette across your project.

Random Color Generator

Click "Random" to generate a random base color and discover unexpected palettes. Great for brainstorming and exploring color combinations you might not have considered.

Related Tools

Convert individual colors with the Color Converter, build beautiful gradients with the CSS Gradient Generator, or create CSS box shadows to pair with your palette.