← Back to Editor

#D8E4D6 · #F8E5C4 · #FBB53F · #F74942 · #342C37

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#D8E4D6

Celadon · LightGray · Mint Green

HEX
#D8E4D6
RGB
rgb(216, 228, 214)
HSL
hsl(111, 21%, 87%)
HSB
hsb(111, 6%, 89%)
CMYK
cmyk(5%, 0%, 6%, 11%)
Oklch
oklch(90.6% 0.023 141.2)

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

#F8E5C4

Goose Yellow · Bisque · Peach Orange

HEX
#F8E5C4
RGB
rgb(248, 229, 196)
HSL
hsl(38, 79%, 87%)
HSB
hsb(38, 21%, 97%)
CMYK
cmyk(0%, 8%, 21%, 3%)
Oklch
oklch(92.9% 0.048 81.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FBB53F

Ginger · SandyBrown · Warm Sun

HEX
#FBB53F
RGB
rgb(251, 181, 63)
HSL
hsl(38, 96%, 62%)
HSB
hsb(38, 75%, 98%)
CMYK
cmyk(0%, 28%, 75%, 2%)
Oklch
oklch(82.0% 0.151 76.2)

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

#F74942

Peach Pink · Tomato · Coral Red

HEX
#F74942
RGB
rgb(247, 73, 66)
HSL
hsl(2, 92%, 61%)
HSB
hsb(2, 73%, 97%)
CMYK
cmyk(0%, 70%, 73%, 3%)
Oklch
oklch(65.5% 0.212 27.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#342C37

Dark Plum · DarkSlateGray · Dark Purple

HEX
#342C37
RGB
rgb(52, 44, 55)
HSL
hsl(284, 11%, 19%)
HSB
hsb(284, 20%, 22%)
CMYK
cmyk(5%, 20%, 0%, 78%)
Oklch
oklch(30.6% 0.022 316.8)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8E4D6
E3D7E5

Analogous

E0E5D7
D8E4D6
D7E5DC

Triadic

D8E4D6
D7D9E5
E5D7D9

Split-Comp.

D8E4D6
DCD7E5
E5D7E0

Tetradic

D8E4D6
D7E0E5
E3D7E5
E5DCD7

Contrast Matrix WCAG 2.1 Contrast

D8E4D6
F8E5C4
FBB53F
F74942
342C37
—
1.1
Fail
1.4
Fail
2.7
Fail
10.2
AAA
1.1
Fail
—
1.4
Fail
2.8
Fail
10.9
AAA
1.4
Fail
1.4
Fail
—
2.0
Fail
7.5
AAA
2.7
Fail
2.8
Fail
2.0
Fail
—
3.8
AA Large
10.2
AAA
10.9
AAA
7.5
AAA
3.8
AA Large
—
White BG
1.3Fail
1.2Fail
1.8Fail
3.5AA Large
13.4AAA
Black BG
16.0AAA
17.0AAA
11.8AAA
6.0AA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDDD9
F0F0CC
DDDC5C
ACAA44
313034

Deuteranopia

DDDCDA
F1F2CE
E1E662
B6C344
313234

Tritanopia

D9DCDD
F7D2D4
F87277
EE4545
343232

Achromatopsia

DFDFDF
E7E7E7
BCBCBC
7C7C7C
303030

Shades & Tints Shades & Tints

#D8E4D6

Dark
Light

#F8E5C4

Dark
Light

#FBB53F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8e4d6;
  --color-2: #f8e5c4;
  --color-3: #fbb53f;
  --color-4: #f74942;
  --color-5: #342c37;
}

SCSS

$color-1: #d8e4d6;
$color-2: #f8e5c4;
$color-3: #fbb53f;
$color-4: #f74942;
$color-5: #342c37;

TAILWIND

colors: {
  'brand-1': '#d8e4d6',
  'brand-2': '#f8e5c4',
  'brand-3': '#fbb53f',
  'brand-4': '#f74942',
  'brand-5': '#342c37',
}

RGB Array

[216, 228, 214], [248, 229, 196], [251, 181, 63], [247, 73, 66], [52, 44, 55]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8E4D6, #F8E5C4, #FBB53F, #F74942, #342C37 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: #d8e4d6; --color-2: #f8e5c4; --color-3: #fbb53f; --color-4: #f74942; --color-5: #342c37. 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