ColorSeed

Complementary · 5 colors · May 10, 2026

Drift

Create palette

Drift weaves the intense vibration of two spectral extremes in contact. the sobriety of a mastered architectural space — a gentle yet readable progression. It speaks of growth, vitality and of calming.

ComplementaryBrandingMonochromeGradientBold
#4C4A4FCouleur 1
RGB76 74 79HSL264 3 30
#F44123Couleur 2
RGB244 65 35HSL9 90 55
#F89726Couleur 3
RGB248 151 38HSL32 94 56
#ADB3BDCouleur 4
RGB173 179 189HSL218 11 71
#FEE016Couleur 5
RGB254 224 22HSL52 99 54

Palette Usage Guide

Application Scenarios

Interface Design

Combine #4c4a4f for text on #fee016 background.

Emotional Impact

Drift weaves the intense vibration of two spectral extremes in contact. the sobriety of a mastered architectural space — a gentle yet readable progression. It speaks of growth, vitality and of calming.

Contrast Analysis
Text on Canvas

6.6:1

AA

Secondary on Canvas

1.7:1

Fail

Accent on Base

3.9:1

AA Large

Convert palette to thread / yarn

Closest matches across major brands

Average ΔE :42 (Approximate)
#4C4A4F
DMC 413
Pewter Gray Dk
ΔE 31
#F44123
DMC 946
Burnt Orange Med
ΔE 72
#F89726
DMC 740
Tangerine
ΔE 32
#ADB3BD
DMC 156
Blue Violet Med L
ΔE 32
#FEE016
DMC 973
Canary Bright
ΔE 45

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: #4c4a4f;
  --color-couleur-2: #f44123;
  --color-couleur-3: #f89726;
  --color-couleur-4: #adb3bd;
  --color-couleur-5: #fee016;
}
Tailwind
'drift': {
  500: '#4c4a4f',
  400: '#f44123',
  300: '#f89726',
  200: '#adb3bd',
  100: '#fee016',
}
JSON
{
  "name": "Drift",
  "harmony": "Complementary",
  "colors": [
    {
      "name": "Couleur 1",
      "hex": "#4c4a4f"
    },
    {
      "name": "Couleur 2",
      "hex": "#f44123"
    },
    {
      "name": "Couleur 3",
      "hex": "#f89726"
    },
    {
      "name": "Couleur 4",
      "hex": "#adb3bd"
    },
    {
      "name": "Couleur 5",
      "hex": "#fee016"
    }
  ]
}
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.75:1AAA
Black
2.4:1Fail
Couleur 2
White
3.73:1AA Large
Black
5.63:1AA
Couleur 3
White
2.22:1Fail
Black
9.45:1AAA
Couleur 4
White
2.11:1Fail
Black
9.96:1AAA
Couleur 5
White
1.32:1Fail
Black
15.89:1AAA
Brand Design

Identity Visuals

Icon Application
Typography Pairing

Drift

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

Energy & Urgency

Couleur 2 is a light, vivid red that evokes a direct, assertive presence. Its saturation level makes it an immediate visual signal: ideal for CTAs, conversion moments, and decisive instants.

ActionUrgencyEnergyVitality
Couleur 3

Warmth & Benevolence

Couleur 3 evokes the light, 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 4

Lightness & Space

Couleur 4 creates space and breathing room without the aggressiveness of pure white — light and muted, it reduces visual fatigue and invites reading.

LightnessSpaceClarityPremium
Couleur 5

Enthusiasm & Boldness

Couleur 5 is a medium orange with vivid saturation that evokes positive, communicative energy. Its chromatic intensity holds the eye without aggression and stimulates decision-making — the tool of brands that want to stand out.

EnthusiasmOptimismEnergyImpact
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 →