C
Chromatica

Color Theory Lab

Interactive Learning Hub

Master the Language of Color Theory

Color is more than visual decoration. It's a powerful tool of communication, psychology, and structural harmony. Learn how colors work together, interact, and tell beautiful stories.

Interactive Sandbox

The Three Dimensions of Color

Any color in existence can be plotted and understood using three fundamental attributes: Hue, Saturation, and Lightness (Value).

Dimension Sliders

Hue (Angle) 180°

The basic shade itself. Represented as a circular wheel position from 0 to 360 degrees.

Saturation (Chroma) 70%

The richness or intensity of a color. Low saturation approaches cool neutral grays.

Lightness (Value) 50%

The amount of light reflected. Values near 0% are dark black; near 100% are pure white.

HSL Format

hsl(180, 70%, 50%)

Mystic Turquoise

A vibrant, highly saturated shade of color. Highly calming, inspiring feelings of clarity, peace, and natural harmony.

H
The "What"

Defines the specific light wavelength placement on the chromatic spectrum.

S
The "Power"

Defines saturation or purity level. Gray has 0% saturation; neon tones are close to 100%.

L
The "Weight"

Lightness/Value dictates perceived contrast and visibility against dark or light canvases.

Building the Color Wheel

All visible pigments are structured in logical generations starting with three unmixed pure sources.

First Generation

Primary Colors

Red, Yellow, and Blue. These cannot be created by mixing any other colors together. They are the essential building blocks of the subtractive color system.

Red #E11D48
Yellow #FACC15
Blue #2563EB
RYB Color Model
Second Generation

Secondary Colors

Orange, Green, and Violet. These are created by mixing two adjacent primary colors together in equal parts (e.g. Red + Yellow = Orange).

Orange #F97316
Green #16A34A
Violet #4338CA
Primary + Primary mixtures
Third Generation

Tertiary Colors

Red-Orange, Yellow-Orange, Yellow-Green, Blue-Green, Blue-Violet, and Red-Violet. Formed by mixing primary and secondary colors.

R-O
Y-O
Y-G
B-G
B-V
Primary + Secondary mixtures

Color Harmonies & Graphics

Explore geometric and artistic alignments using the color wheel. Select different schemas, swap palettes, and witness how color distribution completely shifts composition mood.

Dynamic Palette Lab

Click a palette below to recolor graphics!

1. Choose Harmony Rule

These rules use formulas to map color relationship vectors across the standard color wheel.

2. Select Preset Palette

Click any layout card below to deploy its colors into the visual preview mockups.

Interactive SVG Canvas

Complementary Contrast

Uses two primary opposite colors on the wheel to generate maximum visual tension and high-impact energy.