ColorSeed

Split-Complementary · 5 colors · April 26, 2026

Superman

Create palette

Superman — the sharp dialogue of two hues facing one another. The palette develops a balance between void and form and establishes a dramatic tension that commands attention. A chromatic vocabulary for growth and vitality.

Split-ComplementaryIllustrationFashionBoldForest
#1A2F6BCouleur 1
RGB26 47 107HSL224 61 26
#BC3520Couleur 2
RGB188 53 32HSL8 71 43
#3E71E0Couleur 3
RGB62 113 224HSL221 72 56
#E66A65Couleur 4
RGB230 106 101HSL2 72 65
#FCF0E9Couleur 5
RGB252 240 233HSL22 76 95

Palette Usage Guide

Application Scenarios

Interface Design

Combine #1a2f6b for text on #fcf0e9 background.

Emotional Impact

Superman — the sharp dialogue of two hues facing one another. The palette develops a balance between void and form and establishes a dramatic tension that commands attention. A chromatic vocabulary for growth and vitality.

Contrast Analysis
Text on Canvas

11.3:1

AAA

Secondary on Canvas

4:1

AA Large

Accent on Base

2.8:1

Fail

Convert palette to thread / yarn

Closest matches across major brands

Average ΔE :35 (Approximate)
#1A2F6B
DMC 336
Navy Blue
ΔE 22
#BC3520
DMC 347
Salmon Vy Dark
ΔE 41
#3E71E0
DMC 799
Delft Blue Med
ΔE 72
#E66A65
DMC 350
Coral Medium
ΔE 25
#FCF0E9
DMC 3865
Winter White
ΔE 15

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: #1a2f6b;
  --color-couleur-2: #bc3520;
  --color-couleur-3: #3e71e0;
  --color-couleur-4: #e66a65;
  --color-couleur-5: #fcf0e9;
}
Tailwind
'superman': {
  500: '#1a2f6b',
  400: '#bc3520',
  300: '#3e71e0',
  200: '#e66a65',
  100: '#fcf0e9',
}
JSON
{
  "name": "Superman",
  "harmony": "Split-Complementary",
  "colors": [
    {
      "name": "Couleur 1",
      "hex": "#1a2f6b"
    },
    {
      "name": "Couleur 2",
      "hex": "#bc3520"
    },
    {
      "name": "Couleur 3",
      "hex": "#3e71e0"
    },
    {
      "name": "Couleur 4",
      "hex": "#e66a65"
    },
    {
      "name": "Couleur 5",
      "hex": "#fcf0e9"
    }
  ]
}
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
12.63:1AAA
Black
1.66:1Fail
Couleur 2
White
5.72:1AA
Black
3.67:1AA Large
Couleur 3
White
4.52:1AA
Black
4.64:1AA
Couleur 4
White
3.18:1AA Large
Black
6.61:1AA
Couleur 5
White
1.12:1Fail
Black
18.78:1AAA
Brand Design

Identity Visuals

Icon Application
Typography Pairing

Superman

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

Trust & Authority

Couleur 1 evokes the dark, rich register of blue — the universal color of trust, here expressed with its own personality. Its depth makes it the color of institutions, decision-makers, and leaders who have nothing to prove. Serious, stable, timeless.

TrustAuthorityStabilityPrestige
Couleur 2

Energy & Urgency

Couleur 2 is a medium, rich 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

Reliability & Clarity

Couleur 3 evokes the light, rich register of blue — the universal color of trust, here expressed with its own personality. It reconciles authority and accessibility with natural elegance. Reassuring for decision-makers, engaging for users.

ReliabilityBalanceClarityProfessionalism
Couleur 4

Energy & Urgency

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

ActionUrgencyEnergyVitality
Couleur 5

Warmth & Benevolence

Couleur 5 radiates the pale, rich 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
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 →