Color Palette Generator — Free Triadic, Analogous & Complementary Colors

Color Palette Generator — Free Triadic, Analogous & Complementary Colors. Free color palette and color scheme generator.

Pick or paste a HEX color to get analogous, complementary, split-complementary, triadic, tetradic, monochromatic palettes and shades, then export CSS, SCSS or JSON. This free color palette generator builds seven harmonious palettes from a single base color.

Type or paste a HEX code (3 or 6 digits, with or without #), use the color picker, or hit Random for inspiration, and the tool instantly calculates analogous colors, a monochromatic color palette, complementary and split complementary colors, triadic colors, a four-color tetradic (square) scheme and a nine-step scale of tints and shades.

Every swatch shows its HEX value in a readable, contrast-aware label; click any color to copy it.

As a color scheme generator it follows classic color-wheel theory in HSL space: analogous hues sit 30° apart for calm, cohesive designs; complementary colors are 180° apart for maximum contrast; split-complementary uses the two neighbours of the complement for contrast with less tension; triadic spaces three hues 120° apart for vibrant, balanced layouts; and tetradic uses four hues 90° apart for rich schemes.

The color shades generator row keeps the hue and saturation while stepping lightness from 95% to 15% — ideal for hover states, borders and design-token scales such as 50–900.

When your palette is ready, export all schemes at once as CSS custom properties, SCSS variables, JSON or a plain HEX list, and share a link that reopens the same base color for your team. Everything runs locally in your browser, so brand colors stay private.

Convert individual colors between HEX, RGB, HSL and CMYK with the Color Converter, get RGBA values with the Hex to RGB Converter, or preview UI details with the CSS Cursor Property Viewer.

Frequently asked questions

How do I create a color palette from one color?

Type a HEX code (3 or 6 digits, with or without #) into Base Color (Hex), choose a color with the picker, or click Random color. Seven palettes are generated at once; click any swatch to copy its HEX value.

What is the difference between analogous, complementary and triadic colors?

Analogous colors sit 30 degrees either side of the base hue for a calm look. Complementary adds the opposite hue (180 degrees) for strong contrast. Split complementary uses the hues at 150 and 210 degrees, triadic spaces three hues 120 degrees apart, and tetradic (square) uses four hues 90 degrees apart.

How are the monochromatic palette and the tints and shades made?

Both keep the base hue and saturation and only change lightness in HSL. Monochromatic shows the base color between a version 20 points lighter and one 20 points darker, while Tints & shades gives nine steps from 95% down to 15% lightness.

How do I export the palette as CSS variables?

In Export palette, choose CSS, SCSS, JSON or HEX and click Copy palette. CSS gives custom properties inside :root (for example --triadic-2), SCSS gives $ variables, JSON gives an object of color arrays and HEX gives a plain list per scheme.

Why does it ask me to enter a valid HEX color?

The Base Color field only accepts HEX codes with 3 or 6 hexadecimal digits, such as #0CD or #00C1D4. RGB, HSL values and color names are not read there, so convert them to HEX first or pick the color with the color picker.

How to use this online tool

Color Palette Generator — Free Triadic, Analogous & Complementary Colors is designed for fast browser workflows when you need to format, validate, convert, decode, encode, generate, or inspect data without opening a heavy desktop app. Start with the input field or visible options, review the result, then copy or download the output for the next step.

Private processing in your browser

Color Palette Generator — Free Triadic, Analogous & Complementary Colors keeps the normal processing step local in your browser. That is useful for code snippets, tokens, documents, configuration values, text samples, and other material that should not be sent to a remote service unless you explicitly choose to share it.

When this tool is useful

Use Color Palette Generator — Free Triadic, Analogous & Complementary Colors for repeatable developer tasks, technical documentation, QA checks, quick conversions, debugging, content cleanup, and internal team workflows. The page focuses on clear inputs, immediate feedback, and output that is easy to reuse in code, reports, tickets, emails, or notes.

Practical tips

Before copying the final result, check important details such as spacing, casing, filenames, encoding, token structure, line breaks, or output format. Small checks prevent mistakes when the result is reused in source code, API requests, documentation, spreadsheets, or shared files.