Outvision
OUTVISION / DESIGN BASICS / 01

Color Psychology
& Pairing

Choose colors with intention. Explore the associations they can bring to a design, then build a palette that supports your audience, content and brand.

Beginner friendly16 color referencesFree written guide

Color associations are starting points, not universal rules. Culture, context, saturation and personal experience all affect how a palette feels. Test your choices with the people you design for.

Find your starting color.

Pairing suggestions are for a palette as a whole. They are not pre-verified text and background combinations.

Red

#E11D48

Energy · Passion · Urgency

Use a small amount to emphasize a key moment. Keep destructive actions visually distinct.

Try pairing with

  • White
  • Black
  • Yellow
  • Gray

Orange

#F97316

Creativity · Enthusiasm · Warmth

A lively accent for approachable brands and expressive illustrations.

Try pairing with

  • White
  • Black
  • Blue
  • Yellow

Yellow

#FACC15

Optimism · Brightness · Attention

Bring warmth to highlights and supporting surfaces; pair with dark text.

Try pairing with

  • Black
  • White
  • Blue
  • Purple

Green

#15803D

Nature · Balance · Growth

Explore for nature-led identities and positive feedback, with labels alongside status colors.

Try pairing with

  • White
  • Black
  • Beige
  • Blue

Blue

#1677E8

Calm · Trust · Professionalism

A versatile starting point for information-rich interfaces and professional brands.

Try pairing with

  • White
  • Gray
  • Orange
  • Yellow

Purple

#7C3AED

Imagination · Luxury · Creativity

Add an expressive accent or a distinctive brand tone.

Try pairing with

  • White
  • Black
  • Gold
  • Pink

Pink

#F472B6

Warmth · Playfulness · Care

Explore softer surfaces or bold accents depending on saturation and audience.

Try pairing with

  • White
  • Black
  • Purple
  • Gray

Black

#171717

Elegance · Power · Sophistication

Anchor typography and contrast, or create a dramatic background with light content.

Try pairing with

  • White
  • Gray
  • Gold
  • Red

White

#FFFFFF

Simplicity · Space · Clarity

Give content room to breathe. Use borders or surface shifts to define regions.

Try pairing with

  • Black
  • Gray
  • Blue
  • Green

Gray

#94A3B8

Neutrality · Balance · Restraint

Support stronger colors and establish a clear hierarchy without competing for attention.

Try pairing with

  • White
  • Black
  • Blue
  • Pink

Beige

#E8DCC4

Warmth · Softness · Natural

Create warm neutral surfaces for an understated, approachable palette.

Try pairing with

  • Brown
  • Green
  • White
  • Black

Teal

#089CA6

Freshness · Clarity · Confidence

Combine a cool foundation with a warmer accent for a balanced visual identity.

Try pairing with

  • White
  • Gray
  • Coral
  • Navy

Navy

#123469

Stability · Depth · Trust

Use as a rich dark foundation for text, navigation or a polished brand surface.

Try pairing with

  • White
  • Gray
  • Beige
  • Gold

Coral

#FA786B

Energy · Warmth · Friendliness

Bring a welcoming accent to cool palettes without using it for every action.

Try pairing with

  • White
  • Navy
  • Mint
  • Gold

Mint

#88DCCC

Freshness · Calm · Renewal

Explore light supporting surfaces with dark text and a stronger anchor color.

Try pairing with

  • White
  • Gray
  • Pink
  • Navy

Brown

#80552E

Comfort · Grounding · Authenticity

Support an earthy identity with warm neutrals and natural greens.

Try pairing with

  • Beige
  • Green
  • Cream
  • Black
PUT IT INTO PRACTICE

Build a palette that works.

01 / Set the balance

Start with 60–30–10.

Try roughly 60% dominant color, 30% secondary color and 10% accent. Treat this as a composition exercise, not a rigid interface rule.

02 / Give color a role

Support the user’s next step.

Choose consistent roles for surfaces, text, actions and feedback. Use neutrals to keep strong accents focused.

03 / Check readability

Test actual combinations.

Check text, controls and states with a contrast tool. Include labels, icons or patterns so meaning does not depend on color alone.

04 / Try it in context

Design a real screen.

Apply your palette to a page with real content. Review the hierarchy on mobile and desktop, then ask your audience what feels clear.

YOUR FIRST EXERCISE

One palette. One clear purpose.

Choose a brand, name three qualities it should express, and pick one anchor color plus two supporting colors. Apply them to a headline, background and primary button. Explain each choice and check readability before adding more color.

Explore the prompt library →

Topic and pairing reference: the Color Psychology & Pairing graphic by @gfx.om supplied for this guide. Outvision explanations and practice exercises.