Color Theory Basics

1. What is the Color Wheel?

The color wheel arranges hues in a circle: red → orange → yellow → green → blue → purple → red, continuously transitioning through 360°. The widely used 12-color wheel was systematized by Johannes Itten.

Harmony patterns are derived from positional relationships on the color wheel. Opposite colors are complementary, adjacent colors are analogous, 120° apart gives triadic — geometric relationships form the foundation of beautiful color combinations.

2. 6 Color Harmony Patterns

Complementary: Two colors positioned directly opposite on the color wheel, like red and green, or blue and orange. Creates maximum contrast and mutual enhancement. Avoid using both at equal intensity — use one as a small accent.

Analogous: Colors adjacent on the wheel (typically within 30°). Found widely in nature, creating unified, calm palettes. A sunset (red → orange → yellow) is a classic example.

Triadic: Three colors spaced 120° apart. Combinations like red, yellow, and blue create balanced, vibrant palettes. Use one as the main color and the other two as accents to avoid a scattered look.

Split Complementary: Uses two colors adjacent to the complement of the base color. Maintains complementary contrast while reducing tension. An easy-to-use pattern even for beginners.

Tetradic (Square): Four colors spaced 90° apart (or at rectangle vertices). Offers rich variation but balancing four colors is challenging — making one dominant creates stability.

Monochromatic: Varies only lightness and saturation of a single hue. Creates maximum unity and an elegant impression. Ensure sufficient lightness contrast to avoid appearing flat.

3. Color Spaces — HSL, RGB, HEX

HSL (Hue, Saturation, Lightness): A model close to human color perception. Choose the hue (0-360°), saturation (0-100%) for vividness, and lightness (0-100%) for brightness. The most intuitive model for color palette design.

RGB (Red, Green, Blue): Based on display light emission. Each channel is specified from 0-255. Common in programming, but unintuitive for operations like 'make this color slightly darker.'

HEX (Hexadecimal): RGB represented in hexadecimal notation. #FF0000 (red), #00FF00 (green), #0000FF (blue). Widely used in CSS and HTML. Contains the same information as RGB.

4. Practical Color Techniques

The 60-30-10 Rule: Known as the golden ratio of color design. Use the main color at 60%, secondary at 30%, and accent at 10%. Applicable from interior design to web design.

Learn from Nature: Natural color schemes are virtually guaranteed to be harmonious. Forest green gradients, ocean-sky blues, flower-leaf contrasts. When in doubt, picking colors from nature photos is an effective approach.

Limit Your Colors: Generally, 3-5 colors per design is optimal. More than that erodes unity. Start with a base color, main color, and accent color.

5. Contrast and Accessibility

WCAG (Web Content Accessibility Guidelines) sets standards for text-background contrast ratios. AA requires 4.5:1 (normal text), AAA requires 7:1. These ensure readable content for everyone regardless of vision ability.

Even beautiful color schemes are meaningless if text is unreadable. In web design, balancing aesthetics with accessibility is crucial. Tool Palette's Color Palette Generator automatically checks WCAG contrast ratios for generated palettes.