Complementary · 4 colors · May 24, 2026

Orange & Black

Orange & Black — an organic progression between hues bound by kinship. The palette develops a golden livable light and establishes a balanced modulation of values. A chromatic vocabulary for clarity and intellect.

ComplementaryBranding Interior Dark Warm Forest

#4F4A48Couleur 1

RGB79 74 72HSL17 5 30

#C0782ACouleur 2

RGB192 120 42HSL31 64 46

#4EACB1Couleur 3

RGB78 172 177HSL183 39 50

#CCBF7FCouleur 4

RGB204 191 127HSL50 43 65

✦Palette Usage Guide

Application Scenarios

Interface Design

Combine #4f4a48 for text on #ccbf7f background.

Emotional Impact

Contrast Analysis

Text on Canvas

4.7:1

Secondary on Canvas

1.4:1

Fail

Accent on Base

3.3:1

AA Large

Convert palette to thread / yarn

Closest matches across major brands

Brand :

Average ΔE :28 (Approximate)

#4F4A48

DMC 413

Pewter Gray Dk

ΔE 35

#C0782A

DMC 976

Golden Brown Med

ΔE 11

#4EACB1

DMC 992

Aquamarine Lt

ΔE 27

#CCBF7F

DMC 738

Tan Very Light

ΔE 38

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: #4f4a48;
  --color-couleur-2: #c0782a;
  --color-couleur-3: #4eacb1;
  --color-couleur-4: #ccbf7f;
}

Tailwind

'orange-black': {
  400: '#4f4a48',
  300: '#c0782a',
  200: '#4eacb1',
  100: '#ccbf7f',
}

JSON

{
  "name": "Orange & Black",
  "harmony": "Complementary",
  "colors": [
    {
      "name": "Couleur 1",
      "hex": "#4f4a48"
    },
    {
      "name": "Couleur 2",
      "hex": "#c0782a"
    },
    {
      "name": "Couleur 3",
      "hex": "#4eacb1"
    },
    {
      "name": "Couleur 4",
      "hex": "#ccbf7f"
    }
  ]
}

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

8.73:1AAA

Black

2.41:1Fail

Couleur 2

White

3.52:1AA Large

Black

5.96:1AA

Couleur 3

White

2.67:1Fail

Black

7.86:1AAA

Couleur 4

White

1.85:1Fail

Black

11.33:1AAA

Brand Design

Identity Visuals

Icon Application

Typography Pairing

Orange & Black

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

Sophistication & Balance

Couleur 1 masters the art of discretion — dark and muted, it structures without dominating. Ideal as a background or type color in mature design systems.

SophisticationDiscretionBalanceMaturity

Couleur 2

Authenticity & Grounding

Couleur 2 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 3

Freshness & Clarity

Couleur 3 evokes the invigorating clarity of tropical waters — a medium, quiet hue at the boundary of blue and green. Its clarity brings freshness and trust simultaneously — the signal of a brand that is both modern and caring.

FreshnessClarityModernityTrust

Couleur 4

Creativity & Accessibility

Couleur 4 is a light orange with balanced 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

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 →