Colors Browser-only processing Updated March 19, 2026

Palette Generator

Generate beautiful color palettes with tints, shades, and color harmonies. Create complementary, analogous, triadic, and split-complementary schemes instantly.

Color Palette (100-900)

100
#E0E0FC
200
#C1C2F9
300
#A1A3F7
400
#8285F4
500
#6366F1
600
#4F52C1
700
#3B3D91
800
#282960
900
#141430
Export Palette
:root {
  --color-100: #E0E0FC;
  --color-200: #C1C2F9;
  --color-300: #A1A3F7;
  --color-400: #8285F4;
  --color-500: #6366F1;
  --color-600: #4F52C1;
  --color-700: #3B3D91;
  --color-800: #282960;
  --color-900: #141430;
}

How to Use

  1. Enter your base color using HEX, RGB, or HSL format
  2. Choose a harmony type: Tints & Shades, Complementary, Analogous, Triadic, or Split Complementary
  3. Preview the generated palette
  4. Click any color to copy its hex value
  5. Export the full palette as CSS, Tailwind, or JSON

Examples

Indigo Palette

Emerald Palette

Use Cases

For dashboards and data-heavy UI

Build clear hierarchy with dependable contrast, semantic tokens, and readable data colors.

For brand palettes and design systems

Create reusable color scales and exports for CSS variables, Tailwind, and documentation handoff.

Glossary Terms

WCAG

Understand contrast levels and accessibility requirements.

OKLCH

Learn perceptual color controls for modern UI systems.

Color Spaces

Compare HEX, RGB, HSL, and OKLCH usage in practice.

Frequently Asked Questions

What are tints and shades? ▼

Tints are created by adding white to a color (making it lighter), while shades are created by adding black (making it darker). Together they form a complete palette from light to dark.

What is a complementary color scheme? ▼

Complementary colors are opposite each other on the color wheel. They create high contrast and visual interest when used together.

What are analogous colors? ▼

Analogous colors are next to each other on the color wheel. They create harmonious, pleasing combinations often found in nature.

What is a triadic color scheme? ▼

Triadic colors are evenly spaced around the color wheel (120° apart). They offer vibrant contrast while maintaining color harmony.

What do the numbers 100-900 mean? ▼

These weight numbers follow common design system conventions. 500 is the base color, 100-400 are lighter tints, and 600-900 are darker shades.

Continue This Workflow

Color Converter

Convert any color format without leaving the page.

Contrast Checker

Check accessibility instantly before design review or launch.

Shadow Generator

Save, share, and export layered shadows ready for production.

Color Name Finder

Turn raw color values into human-readable names quickly.

Learn The Workflow

colors

HEX vs RGB vs HSL: which color format should you use?

A decision guide for choosing the color format that fits design handoff, implementation, and theme work.

colors

OKLCH color space guide for modern design systems

Why teams switching from HSL to OKLCH get cleaner scales, steadier contrast outcomes, and a better mental model.