Color Palette Generator
Generate harmonious color palettes from any base color
RGB
HSL
Harmony Type
Generated Palette
Tints & Shades
Export Palette
Color Harmony
Complementary
Two colors opposite on the color wheel (180° apart). Creates maximum contrast and visual impact.
Analogous
Colors adjacent on the wheel (within 30°). Creates harmonious, serene designs found in nature.
Triadic
Three colors equally spaced (120° apart). Vibrant and balanced with strong contrast.
Split-Complementary
Base color plus two colors adjacent to its complement. High contrast but less tension than complementary.
Tetradic (Square)
Four colors evenly spaced (90° apart). Rich and diverse, best with one dominant color.
Monochromatic
Same hue with varying lightness. Clean, elegant, and guaranteed to harmonize.
Accessibility
100% Browser-Based
All color calculations run locally in your browser. Nothing is sent to any server. Free to use with no limits.
What Is Color Theory?
The science and art of using colors effectively in design
Color theory is a framework that guides the use of color in visual design. It encompasses the color wheel — a circular diagram of hues organized by their chromatic relationships — and a set of rules for combining colors to achieve aesthetically pleasing results. At its core, color theory explains how humans perceive color and how colors interact when combined.
The modern color wheel, based on the three primary colors (red, yellow, blue) and their mixtures, was formalized by Sir Isaac Newton in 1666. Today, digital design uses the HSL model (Hue, Saturation, Lightness) to represent colors mathematically. The hue corresponds to the position on the color wheel (0–360°), saturation controls vividness, and lightness controls brightness. This makes HSL ideal for generating color harmonies programmatically.
Primary Colors
Red, yellow, and blue form the foundation of the traditional color wheel. These colors cannot be created by mixing others and serve as the base for all color harmonies.
Secondary Colors
Orange, green, and purple are created by mixing two primary colors. They sit halfway between primary colors on the wheel and form their own set of complementary relationships.
Tertiary Colors
Created by mixing a primary with an adjacent secondary color (e.g., red-orange, blue-green). These twelve colors complete the full color wheel and provide nuanced options for palettes.
Types of Color Harmonies
Six fundamental color harmony rules used by designers worldwide
Complementary
Two colors directly opposite on the color wheel (180° apart). Creates the strongest contrast and visual vibration. Best for call-to-action elements and high-impact designs where one color dominates and the other accents.
Analogous
Colors adjacent on the wheel, typically within 30°. Produces harmonious, unified designs that feel natural and cohesive. Common in nature — think sunset gradients or forest greens. Great for backgrounds and low-contrast UI.
Triadic
Three colors evenly spaced at 120° intervals. Offers vibrant contrast while maintaining visual balance. Use one color as dominant (60%), a second as supporting (30%), and the third as accent (10%).
Split-Complementary
The base color plus two colors adjacent to its complement (+150° and +210°). Maintains high contrast of complementary schemes but with less visual tension. Easier to balance in practice.
Tetradic (Square)
Four colors spaced at 90° intervals forming a square on the color wheel. Offers the richest color variety. Works best when one color dominates and the others are used sparingly as accents.
Monochromatic
Variations of a single hue with different lightness and saturation values. Produces clean, elegant designs that are inherently cohesive. Perfect for minimal UI, text hierarchies, and subtle branding.
How to Choose a Color Palette
A practical guide to selecting colors for your next project
Start with a Base
Choose a primary color that represents your brand, mood, or message. This is the color your design will be built around.
Pick a Harmony
Select a color harmony type based on the mood: analogous for calm, complementary for bold, triadic for vibrant balance.
Check Contrast
Ensure your palette meets WCAG accessibility standards. Text needs at least 4.5:1 contrast ratio against its background for AA compliance.
Apply the 60-30-10 Rule
Use your dominant color for 60% of the design, a secondary color for 30%, and an accent color for 10%. This creates visual hierarchy.
Color Palette in Web Design
How professional designers use color palettes in practice
Design Systems
Modern design systems (Material Design, Tailwind) are built on color palettes with tints and shades. A single base color generates 10+ variations for backgrounds, borders, text, and interactive states.
Dark Mode Support
A well-structured palette makes dark mode trivial. Use lighter tints for dark-mode backgrounds and darker shades for light-mode backgrounds, all generated from the same base hues.
Brand Consistency
Exporting palettes as CSS variables, Tailwind configs, or SCSS variables ensures every developer on the team uses the exact same colors. No more hex-code guessing games.
Accessibility First
WCAG 2.1 requires minimum contrast ratios for text readability. Building palettes with accessibility checks built in prevents costly redesigns and ensures your content is readable by everyone.
Frequently Asked Questions
Common questions about color palettes and this generator