Understanding how colors relate to each other is the foundation of great design.
◑
Complementary Colors
Colors directly opposite each other on the wheel. They create maximum contrast and visual vibrancy — ideal for CTAs, logos, and high-impact design. Red & green, blue & orange, purple & yellow.
△
Triadic Harmony
Three colors evenly spaced 120° apart. This creates rich, balanced palettes with plenty of contrast. One color dominates while the others provide accents. Popular in illustration and branding.
〜
Analogous Colors
Colors that sit adjacent on the wheel — usually 2–5 hues within a 30–90° arc. These palettes feel natural and harmonious, found throughout nature. Best for backgrounds, gradients, and calm UIs.
✦
Tetradic / Square
Four colors forming a rectangle or square on the wheel. The richest palette but hardest to balance — choose one dominant hue and let the others support. Used in complex editorial layouts.
Everything you need to know about color codes and the color wheel.
What is a HEX color code?
A HEX code is a 6-digit hexadecimal number preceded by # (e.g. #FF5733). The first two digits represent red, the next two green, and the last two blue — each ranging from 00 (none) to FF (full intensity).
What is the difference between RGB and HSL?
RGB (Red, Green, Blue) describes color by light mixture — each channel 0–255. HSL (Hue, Saturation, Lightness) describes color more intuitively: hue as angle on the wheel (0–360°), saturation as color intensity (0–100%), and lightness from black to white (0–100%).
How do I mix two colors together?
Use the Color Mixer above. Select two colors using the swatches, then adjust the ratio slider to blend them. At 50%, you get an even mix; slide left for more of color A, right for more of color B. The resulting HEX code is shown and can be copied.
What is CMYK used for?
CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in print. Unlike RGB which adds light, CMYK subtracts it through ink on paper. Always convert your screen colors to CMYK before sending files to a printer to avoid color shifts.
What are tints and shades?
A tint is a color mixed with white (increasing lightness), while a shade is a color mixed with black (decreasing lightness). The Tints & Shades panel shows a range for any selected color, useful for building design system scales.