ColorSeed

Complementary · 7 colors · May 23, 2026

Orange & Balboa

Create palette

Built on an organic progression between hues bound by kinship, Orange & Balboa unfolds a balance between void and form. a dramatic tension that commands attention — an invitation to growth and vitality.

ComplementaryBrandingWebWarmDarkNature
#452712Couleur 1
RGB69 39 18HSL25 59 17
#904A1BCouleur 2
RGB144 74 27HSL24 68 34
#6C5C33Couleur 3
RGB108 92 51HSL43 36 31
#C16326Couleur 4
RGB193 99 38HSL24 67 45
#F27220Couleur 5
RGB242 114 32HSL23 89 54
#AFD1D7Couleur 6
RGB175 209 215HSL189 33 76
#DCECF0Couleur 7
RGB220 236 240HSL192 40 90

Palette Usage Guide

Application Scenarios

Interface Design

Combine #452712 for text on #dcecf0 background.

Emotional Impact

Built on an organic progression between hues bound by kinship, Orange & Balboa unfolds a balance between void and form. a dramatic tension that commands attention — an invitation to growth and vitality.

Contrast Analysis
Text on Canvas

11.1:1

AAA

Secondary on Canvas

3.4:1

AA Large

Accent on Base

3.3:1

AA Large

Convert palette to thread / yarn

Closest matches across major brands

Average ΔE :35 (Approximate)
#452712
DMC 898
Coffee Brown V Dk
ΔE 16
#904A1B
DMC 433
Brown Medium
ΔE 47
#6C5C33
DMC 731
Olive Green Dk
ΔE 58
#C16326
DMC 976
Golden Brown Med
ΔE 46
#F27220
DMC 947
Burnt Orange
ΔE 22
#AFD1D7
DMC 3325
Baby Blue Lt
ΔE 30
#DCECF0
DMC 775
Baby Blue Vy Lt
ΔE 29

Approximate sRGB matches — request a physical color card from each brand before purchasing.

Technical Specs

Developer Assets

Developer handoff assets with copyable code blocks for design systems.

CSS
:root {
  --color-couleur-1: #452712;
  --color-couleur-2: #904a1b;
  --color-couleur-3: #6c5c33;
  --color-couleur-4: #c16326;
  --color-couleur-5: #f27220;
  --color-couleur-6: #afd1d7;
  --color-couleur-7: #dcecf0;
}
Tailwind
'orange-balboa': {
  700: '#452712',
  600: '#904a1b',
  500: '#6c5c33',
  400: '#c16326',
  300: '#f27220',
  200: '#afd1d7',
  100: '#dcecf0',
}
JSON
{
  "name": "Orange & Balboa",
  "harmony": "Complementary",
  "colors": [
    {
      "name": "Couleur 1",
      "hex": "#452712"
    },
    {
      "name": "Couleur 2",
      "hex": "#904a1b"
    },
    {
      "name": "Couleur 3",
      "hex": "#6c5c33"
    },
    {
      "name": "Couleur 4",
      "hex": "#c16326"
    },
    {
      "name": "Couleur 5",
      "hex": "#f27220"
    },
    {
      "name": "Couleur 6",
      "hex": "#afd1d7"
    },
    {
      "name": "Couleur 7",
      "hex": "#dcecf0"
    }
  ]
}
Export Image
Design Tokens

Design Tokens Export

W3C, Figma and Tokens Studio compatible. Direct integration into your design workflow.

Go Pro
Accessibility

Contrast Ratios

Each color vs. white background

Couleur 1
White
13.53:1AAA
Black
1.55:1Fail
Couleur 2
White
6.6:1AA
Black
3.18:1AA Large
Couleur 3
White
6.53:1AA
Black
3.22:1AA Large
Couleur 4
White
4.13:1AA Large
Black
5.08:1AA
Couleur 5
White
2.92:1Fail
Black
7.2:1AAA
Couleur 6
White
1.62:1Fail
Black
12.92:1AAA
Couleur 7
White
1.21:1Fail
Black
17.3:1AAA
Brand Design

Identity Visuals

Icon Application
Typography Pairing

Orange & Balboa

The intersection of form and function reveals the palette in all its depth. Every hue is intentional, every space is a breath.

· Display · Body
UI Components
Buttons
Active

Surface Card

System element

Emotional Resonance

Color Psychology

Couleur 1

Authenticity & Grounding

Couleur 1 commands the deep, balanced warmth of fired clay — a shade that is both reassuring and memorable. It evokes craftsmanship, raw materials, and tradition. Brands that adopt it communicate authenticity effortlessly.

AuthenticityCraftGroundingTradition
Couleur 2

Authenticity & Grounding

Couleur 2 evokes the dark, rich warmth of fired clay — a shade that is both reassuring and memorable. It evokes craftsmanship, raw materials, and tradition. Brands that adopt it communicate authenticity effortlessly.

AuthenticityCraftGroundingTradition
Couleur 3

Creativity & Accessibility

Couleur 3 is a dark orange with quiet saturation that evokes positive, communicative energy. Softened, it preserves orange's vitality without its impetuosity — ideal for brands wanting to appear both inventive and warm.

CreativityAccessibilityFriendlinessOpenness
Couleur 4

Authenticity & Grounding

Couleur 4 evokes the medium, rich warmth of fired clay — a shade that is both reassuring and memorable. It evokes craftsmanship, raw materials, and tradition. Brands that adopt it communicate authenticity effortlessly.

AuthenticityCraftGroundingTradition
Couleur 5

Warmth & Benevolence

Couleur 5 evokes the medium, vivid warmth of fired clay — a shade that is both reassuring and memorable. In its lighter tones, it sheds the heaviness of saturated orange to gain accessibility and human closeness.

ClosenessWarmthBenevolenceLifestyle
Couleur 6

Serenity & Lightness

Couleur 6 is a pale, quiet cyan positioned midway between blue's analytical rigor and green's vitality. More airy, it reduces cognitive friction and eases exploration. The shade of interfaces that guide without imposing.

SerenityLightnessClarityGuidance
Couleur 7

Serenity & Lightness

Couleur 7 is a pale, balanced cyan positioned midway between blue's analytical rigor and green's vitality. More airy, it reduces cognitive friction and eases exploration. The shade of interfaces that guide without imposing.

SerenityLightnessClarityGuidance
Visual Atmosphere

Moodboard

No images found

Export

Brand PDF

Premium Brand Guidelines document with palette, color psychology and moodboard.

PDF Brand Identity Export

7 premium pages: Cover · Palette · Detail · Typography · Usage Guide

Go Pro
Create your own palette on ColorSeed →