← Back to Editor

#D9E0C2 · #AFCEBF · #8BAD8E · #3C403B · #D55038

warm

A 5-color warm 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

#D9E0C2

Willow Green · LightGray · Mint Green

HEX
#D9E0C2
RGB
rgb(217, 224, 194)
HSL
hsl(74, 33%, 82%)
HSB
hsb(74, 13%, 88%)
CMYK
cmyk(3%, 0%, 13%, 12%)
Oklch
oklch(89.3% 0.041 117.9)

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

#AFCEBF

Jade · Silver · Apple Green

HEX
#AFCEBF
RGB
rgb(175, 206, 191)
HSL
hsl(151, 24%, 75%)
HSB
hsb(151, 15%, 81%)
CMYK
cmyk(15%, 0%, 7%, 19%)
Oklch
oklch(82.4% 0.039 164.7)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#8BAD8E

Celadon · DarkSeaGreen · Apple Green

HEX
#8BAD8E
RGB
rgb(139, 173, 142)
HSL
hsl(125, 17%, 61%)
HSB
hsb(125, 20%, 68%)
CMYK
cmyk(20%, 0%, 18%, 32%)
Oklch
oklch(71.4% 0.058 147.3)

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

#3C403B

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3C403B
RGB
rgb(60, 64, 59)
HSL
hsl(108, 4%, 24%)
HSB
hsb(108, 8%, 25%)
CMYK
cmyk(6%, 0%, 8%, 75%)
Oklch
oklch(36.6% 0.010 139.4)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#D55038

Vermilion · Chocolate · Passion Red

HEX
#D55038
RGB
rgb(213, 80, 56)
HSL
hsl(9, 65%, 53%)
HSB
hsb(9, 74%, 84%)
CMYK
cmyk(0%, 62%, 74%, 16%)
Oklch
oklch(60.6% 0.172 32.4)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9E0C2
C9C2E0

Analogous

E0D8C2
D9E0C2
CAE0C2

Triadic

D9E0C2
C2D9E0
E0C2D9

Split-Comp.

D9E0C2
C2CAE0
D8C2E0

Tetradic

D9E0C2
C2E0D8
C9C2E0
E0C2CA

Contrast Matrix WCAG 2.1 Contrast

D9E0C2
AFCEBF
8BAD8E
3C403B
D55038
—
1.2
Fail
1.8
Fail
7.7
AAA
3.1
AA Large
1.2
Fail
—
1.5
Fail
6.2
AA
2.5
Fail
1.8
Fail
1.5
Fail
—
4.3
AA Large
1.7
Fail
7.7
AAA
6.2
AA
4.3
AA Large
—
2.5
Fail
3.1
AA Large
2.5
Fail
1.7
Fail
2.5
Fail
—
White BG
1.4Fail
1.7Fail
2.5Fail
10.6AAA
4.2AA Large
Black BG
15.4AAA
12.4AAA
8.5AAA
2.0Fail
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCC9
BCBDC3
9A9A96
3E3E3C
9B9A3E

Deuteranopia

DCDBCB
BBB8C4
989597
3E3D3D
A3AD3F

Tritanopia

D9CFD0
B1C5C6
8D9B9D
3C3D3D
CE4243

Achromatopsia

DADADA
C3C3C3
9F9F9F
3E3E3E
757575

Shades & Tints Shades & Tints

#D9E0C2

Dark
Light

#AFCEBF

Dark
Light

#8BAD8E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9e0c2;
  --color-2: #afcebf;
  --color-3: #8bad8e;
  --color-4: #3c403b;
  --color-5: #d55038;
}

SCSS

$color-1: #d9e0c2;
$color-2: #afcebf;
$color-3: #8bad8e;
$color-4: #3c403b;
$color-5: #d55038;

TAILWIND

colors: {
  'brand-1': '#d9e0c2',
  'brand-2': '#afcebf',
  'brand-3': '#8bad8e',
  'brand-4': '#3c403b',
  'brand-5': '#d55038',
}

RGB Array

[217, 224, 194], [175, 206, 191], [139, 173, 142], [60, 64, 59], [213, 80, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #D9E0C2, #AFCEBF, #8BAD8E, #3C403B, #D55038 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d9e0c2; --color-2: #afcebf; --color-3: #8bad8e; --color-4: #3c403b; --color-5: #d55038. 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 warm-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. 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