Generate beautiful color schemes from any base color in seconds
Base Color & Scheme
#DA8C58 · HSL(24°, 64%, 60%)
Two colors directly opposite on the color wheel (180° apart).
Palette — Complementary
Design tip: High contrast. Use one as dominant, the other as accent.
Primary
Orange
Primary Light
Light Orange
Primary Dark
Orange
Complement
Blue
Complement Light
Blue
Contrast against white (WCAG 2.1)
#DA8C58
◻ 2.7 · ◼ 6.5
#E5C1A9
◻ 1.7 · ◼ 10.4
#B6652F
◻ 4.3 · ◼ 4.1
#58A6DA
◻ 2.7 · ◼ 6.5
#9CC6E3
◻ 1.8 · ◼ 9.6
All Harmony Types
A color scheme generator is the fastest way to build a harmonious palette for any design project. Pick a base color and choose from seven color theory relationships — complementary, analogous, triadic, tetradic, monochromatic, split-complementary, or double complementary — to instantly generate five coordinated swatches with WCAG contrast ratings and one-click export to CSS, SCSS, Tailwind, HEX, RGB, or HSL.
A complementary scheme uses one color and its exact opposite on the color wheel (180° away), creating strong contrast. A split-complementary scheme uses the base color plus the two hues on either side of its complement — giving you similar contrast energy with more variety and a less jarring result.
Analogous schemes work well for backgrounds and subtle UIs because they feel calm and cohesive. Complementary or triadic schemes work best for call-to-action elements where you need one color to stand out. For typography-heavy sites, a monochromatic scheme keeps things elegant and readable.
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for readable text. AAA (≥7:1) is ideal for small text, AA (≥4.5:1) meets standard compliance, AA Large (≥3:1) applies to large or bold text only, and Fail means the color combination is likely unreadable for people with low vision.
Copy the CSS Variables export and paste it into your global stylesheet or a :root block. You can then reference any color in your markup with var(--color-1), var(--color-2), etc. For Tailwind projects, copy the Tailwind Config snippet into the colors section of your tailwind.config.js theme.extend block.