← Back to Editor

#DFEAF0 · #C7D9A5 · #D4BD89 · #E3A284 · #0B0B0D

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#DFEAF0

Sky Blue · Lavender · Sky Blue

HEX
#DFEAF0
RGB
rgb(223, 234, 240)
HSL
hsl(201, 36%, 91%)
HSB
hsb(201, 7%, 94%)
CMYK
cmyk(7%, 3%, 0%, 6%)
Oklch
oklch(93.1% 0.014 231.2)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#C7D9A5

Willow Green · Silver · Apple Green

HEX
#C7D9A5
RGB
rgb(199, 217, 165)
HSL
hsl(81, 41%, 75%)
HSB
hsb(81, 24%, 85%)
CMYK
cmyk(8%, 0%, 24%, 15%)
Oklch
oklch(85.9% 0.072 123.4)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#D4BD89

Ginger · Tan · Sunflower

HEX
#D4BD89
RGB
rgb(212, 189, 137)
HSL
hsl(42, 47%, 68%)
HSB
hsb(42, 35%, 83%)
CMYK
cmyk(0%, 11%, 35%, 17%)
Oklch
oklch(80.5% 0.073 86.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#E3A284

Apricot · DarkSalmon · Warm Sun

HEX
#E3A284
RGB
rgb(227, 162, 132)
HSL
hsl(19, 63%, 70%)
HSB
hsb(19, 42%, 89%)
CMYK
cmyk(0%, 29%, 42%, 11%)
Oklch
oklch(76.7% 0.088 45.7)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#0B0B0D

Deep Indigo · Black · Jet Black

HEX
#0B0B0D
RGB
rgb(11, 11, 13)
HSL
hsl(240, 8%, 5%)
HSB
hsb(240, 15%, 5%)
CMYK
cmyk(15%, 15%, 0%, 95%)
Oklch
oklch(15.1% 0.004 285.9)

Traditional「Deep Indigo」· Paint「Jet Black」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFEAF0
F0E6E0

Analogous

E0F0EE
DFEAF0
E0E2F0

Triadic

DFEAF0
F0E0EB
EBF0E0

Split-Comp.

DFEAF0
F0E0E2
F0EEE0

Tetradic

DFEAF0
EEE0F0
F0E6E0
E2F0E0

Contrast Matrix WCAG 2.1 Contrast

DFEAF0
C7D9A5
D4BD89
E3A284
0B0B0D
—
1.2
Fail
1.5
Fail
1.8
Fail
16.1
AAA
1.2
Fail
—
1.2
Fail
1.4
Fail
13.0
AAA
1.5
Fail
1.2
Fail
—
1.2
Fail
10.7
AAA
1.8
Fail
1.4
Fail
1.2
Fail
—
9.1
AAA
16.1
AAA
13.0
AAA
10.7
AAA
9.1
AAA
—
White BG
1.2Fail
1.5Fail
1.8Fail
2.1Fail
19.7AAA
Black BG
17.2AAA
13.9AAA
11.4AAA
9.8AAA
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E4EF
CFCFB2
CACA96
C7C68B
0B0B0D

Deuteranopia

E3E2EE
CECCB5
CBCD99
CBCF8D
0B0B0C

Tritanopia

E0EDED
C8BCBE
D3A0A2
E09192
0B0C0C

Achromatopsia

E7E7E7
CECECE
BEBEBE
B2B2B2
0B0B0B

Shades & Tints Shades & Tints

#DFEAF0

Dark
Light

#C7D9A5

Dark
Light

#D4BD89

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfeaf0;
  --color-2: #c7d9a5;
  --color-3: #d4bd89;
  --color-4: #e3a284;
  --color-5: #0b0b0d;
}

SCSS

$color-1: #dfeaf0;
$color-2: #c7d9a5;
$color-3: #d4bd89;
$color-4: #e3a284;
$color-5: #0b0b0d;

TAILWIND

colors: {
  'brand-1': '#dfeaf0',
  'brand-2': '#c7d9a5',
  'brand-3': '#d4bd89',
  'brand-4': '#e3a284',
  'brand-5': '#0b0b0d',
}

RGB Array

[223, 234, 240], [199, 217, 165], [212, 189, 137], [227, 162, 132], [11, 11, 13]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DFEAF0, #C7D9A5, #D4BD89, #E3A284, #0B0B0D is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #dfeaf0; --color-2: #c7d9a5; --color-3: #d4bd89; --color-4: #e3a284; --color-5: #0b0b0d. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color