ColorSeed

Complementary · 5 colors · May 23, 2026

Screen & Off

Create palette

Built on the natural fluidity of colors that touch in the spectrum, Screen & Off unfolds an elegant and restrained refinement. a contrast that cuts and asserts — an invitation to elegance and rigor.

ComplementaryUI / AppWebMinimalMonochrome
#595F6ECouleur 1
RGB89 95 110HSL223 11 39
#798596Couleur 2
RGB121 133 150HSL215 12 53
#9AA0A7Couleur 3
RGB154 160 167HSL212 7 63
#D2CDCBCouleur 4
RGB210 205 203HSL17 7 81
#EFF0F5Couleur 5
RGB239 240 245HSL230 23 95

Palette Usage Guide

Application Scenarios

Interface Design

Combine #595f6e for text on #eff0f5 background.

Emotional Impact

Built on the natural fluidity of colors that touch in the spectrum, Screen & Off unfolds an elegant and restrained refinement. a contrast that cuts and asserts — an invitation to elegance and rigor.

Contrast Analysis
Text on Canvas

5.6:1

AA

Secondary on Canvas

2.3:1

Fail

Accent on Base

2.4:1

Fail

Convert palette to thread / yarn

Closest matches across major brands

Average ΔE :30 (Approximate)
#595F6E
DMC 317
Pewter Gray
ΔE 28
#798596
DMC 414
Steel Gray Dark
ΔE 41
#9AA0A7
DMC 318
Steel Gray Light
ΔE 16
#D2CDCB
DMC 3753
Antique Blue Ul
ΔE 46
#EFF0F5
DMC 3865
Winter White
ΔE 20

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: #595f6e;
  --color-couleur-2: #798596;
  --color-couleur-3: #9aa0a7;
  --color-couleur-4: #d2cdcb;
  --color-couleur-5: #eff0f5;
}
Tailwind
'screen-off': {
  500: '#595f6e',
  400: '#798596',
  300: '#9aa0a7',
  200: '#d2cdcb',
  100: '#eff0f5',
}
JSON
{
  "name": "Screen & Off",
  "harmony": "Complementary",
  "colors": [
    {
      "name": "Couleur 1",
      "hex": "#595f6e"
    },
    {
      "name": "Couleur 2",
      "hex": "#798596"
    },
    {
      "name": "Couleur 3",
      "hex": "#9aa0a7"
    },
    {
      "name": "Couleur 4",
      "hex": "#d2cdcb"
    },
    {
      "name": "Couleur 5",
      "hex": "#eff0f5"
    }
  ]
}
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
6.39:1AA
Black
3.29:1AA Large
Couleur 2
White
3.74:1AA Large
Black
5.61:1AA
Couleur 3
White
2.64:1Fail
Black
7.96:1AAA
Couleur 4
White
1.57:1Fail
Black
13.34:1AAA
Couleur 5
White
1.14:1Fail
Black
18.45:1AAA
Brand Design

Identity Visuals

Icon Application
Typography Pairing

Screen & Off

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 — medium and muted, it structures without dominating. Ideal as a background or type color in mature design systems.

SophisticationDiscretionBalanceMaturity
Couleur 2

Neutrality & Mediation

Couleur 2 is visual silence par excellence — medium and muted, it never takes sides and lets other colors express themselves while maintaining systemic coherence.

NeutralityCoherenceSilenceBalance
Couleur 3

Lightness & Space

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

LightnessSpaceClarityPremium
Couleur 4

Purity & Timelessness

Couleur 4 represents the blank page — pale and muted, it evokes transparency and honesty. In luxury as in tech, it signifies the essential stripped of the superfluous.

PurityMinimalismClarityTimelessness
Couleur 5

Serenity & Openness

Couleur 5 whispers the pale, quiet register of blue — the universal color of trust, here expressed with its own personality. Its clarity disarms mistrust and opens dialogue. Interface, onboarding, welcome — this blue dissolves the user's psychological barriers.

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