1 How colors make us feel
Every color carries an association. Red is energy and urgency. Blue is trust and calm. Yellow is optimism. These are not universal laws — they are patterns that appear across many cultures and consumer contexts, and they are what most color psychology writing is built on.
The associations below are the standard ones used in Western marketing and design. They are a starting point, not a rule.
Red
Energy, urgency, passion. Grabs attention first.
PassionOrange
Warmth, friendliness, creative confidence.
WarmthYellow
Optimism and clarity. Use sparingly — too much overwhelms.
JoyGreen
Growth, balance, nature. Easiest on the eye.
BalanceBlue
Trust, logic, calm. The most common corporate color.
TrustPurple
Imagination, luxury, mystery. Historically the rarest dye.
ImaginationPink
Compassion, playfulness, nurture. Softer than red.
CompassionGray
Neutral, quiet, mature. The backdrop that lets others shine.
NeutralColor meaning is not universal
These associations come from Western marketing and design conventions. In China, red signals luck and celebration; white is associated with mourning in parts of East Asia; green carries religious significance in many Islamic countries. If your audience is international, verify the associations per region rather than assuming a single meaning.
2 Color harmonies that work
A harmony is a relationship between colors on the color wheel. You do not need a design degree to use them — you just need to know which relationships produce calm and which produce energy.
Analogous — neighbors on the wheel
Colors that sit next to each other. Harmonious, calm, natural. Good for backgrounds, gradients and calm interfaces.
Complementary — opposites on the wheel
Direct opposites. High energy and contrast. Use one as the dominant color and the other sparingly as an accent, or the design will fight itself.
Triadic — three evenly spaced
Three colors evenly spaced around the wheel. Vibrant but balanced. Common in playful brands and children's products.
Tetradic — two complementary pairs
Two sets of opposites. Rich and dynamic, but harder to balance. Use one dominant, the others as accents.
The 60-30-10 rule
A widely used guideline, not a WCAG standard: dominant color at ~60% of the visual weight, secondary at 30%, accent at 10%. It prevents any single color from overwhelming the composition and gives the eye a clear hierarchy.
3 Accessibility and contrast
According to Colour Blind Awareness, roughly 1 in 12 men (about 8%) and 1 in 200 women (about 0.5%) have some form of color vision deficiency worldwide. But good contrast is not only for color-blind users — anyone reading on a phone in sunlight or on a low-brightness laptop benefits from it.
Low contrast — hard to read
Ratio below 4.5:1. Fails WCAG 2.2 Level AA for body text.
Good contrast — readable for all
Ratio of 4.5:1 or higher. Meets WCAG 2.2 Level AA.
What the WCAG numbers actually mean
| Text type | Level AA | Level AAA |
|---|---|---|
| Normal body text | 4.5 : 1 | 7 : 1 |
| Large text (18pt regular or 14pt bold) | 3 : 1 | 4.5 : 1 |
| UI components and graphics | 3 : 1 | 3 : 1 |
Source: WCAG 2.2 — Success Criterion 1.4.3 (Contrast).
Never rely on color alone
A red error message is fine. A red error message with a red border on a red background and no text is not — a user with red-green deficiency will miss it entirely. Always pair color with a label, an icon, an underline, or a pattern. WCAG 2.2 Success Criterion 1.4.1 makes this an explicit requirement.
4 Try a palette
Pick a mood to see a small palette that fits it. This is a starting point for exploration, not a recommendation — use it as a prompt for your own experiments.
Soft, dreamy, introspective. Muted pastels that whisper rather than shout.
5 CMYK vs RGB
The most common print mistake: designing in RGB, then sending the RGB file to a printer. The colors that looked vivid on screen come back dull or shifted, because the printer cannot reproduce everything a screen can show.
RGB — for screens
Additive color: red, green and blue light combined. More light makes brighter color. Your monitor, phone and TV all use RGB.
CMYK — for print
Subtractive color: cyan, magenta, yellow and black ink on white paper. Each ink layer absorbs some light and reflects the rest.
Proof before you print in bulk
Some RGB colors — especially bright greens and saturated oranges — are outside the CMYK gamut and will print duller than they look on screen. Always request a physical proof or a calibrated digital proof before a large print run.
6 Free tools
Two SkillsInsider tools and three external tools we use ourselves. All free.
CMYK Color Code Generator
Convert HEX to CMYK, check the print value, and preview the color before you commit to a print run.
Open toolWCAG Contrast Checker
Check any text-and-background pair against WCAG 2.2 AA and AAA. Shows the exact ratio.
Open toolColor Palette Generator
Build harmonies — analogous, complementary, triadic — with copyable hex values.
Open toolHEX / RGB / HSL Converter
Convert between color formats instantly, with copyable values for CSS.
Open toolCoolors.co
Fast, keyboard-driven palette generator. Press spacebar for a new palette.
Visit siteColor Blind Simulator
See how your design renders to viewers with different types of color vision deficiency.
Visit siteSources
These are the primary references this guide is built on.