Everything
Color. One Tool.
An interactive color theory reference for UI/UX designers and developers. Harmonies, psychology, categories, palettes — all wired together.
01 · Color Wheel
The Wheel of Hues
The traditional RYB color wheel organizes all hues in a circular spectrum. Click any segment to select a base hue and explore its harmonic relationships.
Click a segment to select base hue
Base Hue: 270°
#6e1dbf
Select a hue then scroll down to explore its harmonic relationships.
02 · Color Harmonies
Harmonic Relationships
Rules for combining hues that feel visually balanced. Each harmony is derived from the position of hues on the color wheel.
Complementary
180°Opposite hues — maximum contrast, energetic tension.
03 · Color Vocabulary
The Language of Color
Core terminology used to describe color relationships, variations, and properties. Each demonstrated using green (#22c55e) as the base.
Hue
Another name for "color." The pure position on the color wheel, expressed as a degree from 0°–360°.
0° Red → 120° Green → 240° Blue
Saturation
Color's strength — 0% is grey, 100% is pure vivid hue.
0% grey → 100% vivid
Value / Brightness
Color's lightness — 0% is black, 100% is full brightness.
0% black → 100% brightness
Chroma
Pure color with no white, grey, or black mixed in. Maximum chroma = full spectral intensity.
Tone
Grey added to a pure hue — reduces intensity while preserving color identity.
Vivid → Grey
Shade
Black added to a pure hue — creates deeper, darker versions.
Vivid → Black
Tint
White added to a pure hue — produces lighter, more ethereal variations.
Vivid → White
04 · Color Psychology
What Colors Communicate
Colors speak before words do. Understanding their emotional associations helps create designs that resonate on a subconscious level.
Red
#dc2626
Orange
#ea580c
Yellow
#ca8a04
Green
#16a34a
Blue
#2563eb
Indigo
#4f46e5
Purple
#9333ea
Pink
#db2777
Black
#171717
White
#e5e5e5
05 · Color Categories
Six Color Families
Color families defined by their HSB (Hue, Saturation, Brightness) characteristics. Each has distinct visual qualities and design use-cases.
Jewel Tones
S: 73–83 · B: 56–76
Rich, saturated hues derived from gemstones — Sapphire, Ruby, Emerald.
Pastel Tones
S: 14–21 · B: 89–96
Pale, airy tints — white mixed into pure hues. Soft and gentle.
Earth Tones
S: 36–41 · B: 36–77
Colors from soil, bark, stone, and foliage. Grounded and natural.
Neutral Tones
S: 1–10 · B: 70–99
Colors without a clear name — greige, warm grey, off-white. Timeless.
Fluorescent / Neon
S: 63–100 · B: 82–100
Hyper-saturated, electric versions of primary and secondary colors.
Shades
S: 0 · B: 0–100
Pure achromatic spectrum — only black, white, and true greys.
06 · Curated Palettes
Ready-to-Use Palettes
Hand-crafted palettes for different design moods. Hover over any swatch to reveal its hex value.
Analogous
Side-by-side hues
Complementary
Opposite hues
Gradient
Warm sunset
Monochromatic
Single hue, all shades
Muted Tones
Desaturated, warm
Vintage
Aged warmth
Pastel
Soft, airy palette
07 · Color Models
How Color Is Defined
Different mathematical representations of color — each optimized for a specific domain. Screens, print, design tools, and greyscale output each use a different model.
RGB
Red · Green · Blue
Additive light model used by all digital screens. Each channel 0–255.
CMYK
Cyan · Magenta · Yellow · Key (Black)
Subtractive ink model used in professional printing. 0–100% per channel.
HSB / HSV
Hue · Saturation · Brightness
The designer's model — maps directly to how humans perceive color. Used in Figma, Photoshop, and most design tools.
Greyscale
Luminance only — 0 to 255
A single-channel model representing only lightness. Used for print, accessibility checks, and contrast ratios.
HSB Converter
Adjust sliders to explore any color
#8033cc
HEX
#8033cc
RGB
128, 51, 204
HSB
270°, 75%, 80%
08 · Color Picker
Live Color Explorer
Bidirectional RGB and HSB controls. Change any value to update all others. Instantly see the category, related colors, and copy the hex.
Related
Presets
Values