Color Scheme Generator

1. Enter a base color in the text field, or choose one with the swatch picker next to it.
2. Scan the six schemes generated from it: complementary, analogous, triadic, tetradic, split-complementary and monochromatic.
3. Pick the scheme that matches how many colors your design needs, from two hues (complementary) to four (tetradic).
4. Press Copy Palette on that scheme to copy its hex codes.

Each scheme rotates the base color's hue on the HSL wheel and keeps its saturation and lightness, so the colors in a scheme share the same intensity. Monochromatic is the exception: it keeps the hue and varies lightness and saturation instead.

Examples below start from dodgerblue, #1e90ff = hsl(210, 100%, 56%).

• Complementary (180°): 210° and 30°, blue and orange. The strongest hue contrast. Let one color dominate and keep the other for calls to action; equal amounts of both look loud.
• Analogous (±30°): 180°, 210° and 240°. Calm and cohesive, good for illustrations and content-heavy sites. The hues are close, so build hierarchy with lightness.
• Triadic (120° and 240°): 210°, 330° and 90°. Balanced and colorful. Pick one to lead and mute the other two, or the result reads as busy.
• Tetradic or rectangle (+60°, +180°, +240°): 210°, 270°, 30° and 90°. Two complementary pairs, the most variety and the hardest to balance. Useful for four chart categories.
• Split-complementary (150° and 210°): 210°, 0° and 60°. The contrast of a complement with less tension, and the most forgiving scheme to start with.
• Monochromatic: one hue in several lightness and saturation levels. Suits minimal brands and interface surfaces, since nothing competes with content.

A harmony gives you hues, not proportions. The 60-30-10 rule, borrowed from interior design, supplies them: about 60% of the visible area in a dominant color, 30% in a secondary color and 10% in an accent. On screen, the 60% is usually a neutral or a very pale tint of the base, the 30% covers navigation, headers and cards, and the 10% is reserved for what should be clicked or noticed.

With dodgerblue as the base, blue-tinted neutrals fill the 60%, the blue itself carries the 30%, and its orange complement marks primary buttons and badges at 10%. Keeping the accent scarce is what makes it work; if orange appears on every card, it stops pointing anywhere. Semantic colors such as error red sit outside the ratio.

Harmony math looks only at hue, while readability depends on luminance. Red #ff0000 and its HSL complement cyan #00ffff are as far apart as hues get, yet the pair measures only 3.18:1, below the 4.5:1 WCAG AA minimum for body text. HSL lightness hides this: hsl(60 100% 50%) yellow and hsl(240 100% 50%) blue share L = 50% but look nothing alike in brightness.

Run every text and background pair through the contrast checker before you ship. For text, use a darker or lighter step from the tints and shades of a harmony color rather than the raw hue. The color harmonies guide covers the theory, and the color wheel page maps the hue angles.