← Back to Editor

#F1E8D7 · #D6CCB8 · #CB8876 · #855F6B · #301C25

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

#F1E8D7

Goose Yellow · Beige · Peach Orange

HEX
#F1E8D7
RGB
rgb(241, 232, 215)
HSL
hsl(39, 48%, 89%)
HSB
hsb(39, 11%, 95%)
CMYK
cmyk(0%, 4%, 11%, 5%)
Oklch
oklch(93.4% 0.025 83.4)

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

#D6CCB8

Goose Yellow · Silver · Lemon Cream

HEX
#D6CCB8
RGB
rgb(214, 204, 184)
HSL
hsl(40, 27%, 78%)
HSB
hsb(40, 14%, 84%)
CMYK
cmyk(0%, 5%, 14%, 16%)
Oklch
oklch(84.8% 0.029 84.6)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#CB8876

Peach Pink · DarkSalmon · Coral Red

HEX
#CB8876
RGB
rgb(203, 136, 118)
HSL
hsl(13, 45%, 63%)
HSB
hsb(13, 42%, 80%)
CMYK
cmyk(0%, 33%, 42%, 20%)
Oklch
oklch(69.0% 0.087 35.7)

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

#855F6B

Dark Violet · DimGray · Camellia

HEX
#855F6B
RGB
rgb(133, 95, 107)
HSL
hsl(341, 17%, 45%)
HSB
hsb(341, 29%, 52%)
CMYK
cmyk(0%, 29%, 20%, 48%)
Oklch
oklch(52.9% 0.052 358.4)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#301C25

Dark Violet · DarkSlateGray · Raspberry

HEX
#301C25
RGB
rgb(48, 28, 37)
HSL
hsl(333, 26%, 15%)
HSB
hsb(333, 42%, 19%)
CMYK
cmyk(0%, 42%, 23%, 81%)
Oklch
oklch(25.6% 0.035 351.3)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1E8D7
D5DFF0

Analogous

F0DAD5
F1E8D7
ECF0D5

Triadic

F1E8D7
D5F0E7
E7D5F0

Split-Comp.

F1E8D7
D5ECF0
DAD5F0

Tetradic

F1E8D7
D5F0DA
D5DFF0
F0D5EC

Contrast Matrix WCAG 2.1 Contrast

F1E8D7
D6CCB8
CB8876
855F6B
301C25
—
1.3
Fail
2.4
Fail
4.5
AA Large
13.1
AAA
1.3
Fail
—
1.8
Fail
3.4
AA Large
10.0
AAA
2.4
Fail
1.8
Fail
—
1.9
Fail
5.6
AA
4.5
AA Large
3.4
AA Large
1.9
Fail
—
2.9
Fail
13.1
AAA
10.0
AAA
5.6
AA
2.9
Fail
—
White BG
1.2Fail
1.6Fail
2.9Fail
5.5AA
15.9AAA
Black BG
17.3AAA
13.2AAA
7.3AAA
3.8AA Large
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDEDDB
D2D2BD
AEAD7A
757468
272723

Deuteranopia

EEEEDC
D2D3BE
B2B77B
777A67
292A22

Tritanopia

F1DEDF
D5C1C2
C87E7F
836665
2F2121

Achromatopsia

E9E9E9
CDCDCD
9A9A9A
6C6C6C
232323

Shades & Tints Shades & Tints

#F1E8D7

Dark
Light

#D6CCB8

Dark
Light

#CB8876

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1e8d7;
  --color-2: #d6ccb8;
  --color-3: #cb8876;
  --color-4: #855f6b;
  --color-5: #301c25;
}

SCSS

$color-1: #f1e8d7;
$color-2: #d6ccb8;
$color-3: #cb8876;
$color-4: #855f6b;
$color-5: #301c25;

TAILWIND

colors: {
  'brand-1': '#f1e8d7',
  'brand-2': '#d6ccb8',
  'brand-3': '#cb8876',
  'brand-4': '#855f6b',
  'brand-5': '#301c25',
}

RGB Array

[241, 232, 215], [214, 204, 184], [203, 136, 118], [133, 95, 107], [48, 28, 37]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1E8D7, #D6CCB8, #CB8876, #855F6B, #301C25 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: #f1e8d7; --color-2: #d6ccb8; --color-3: #cb8876; --color-4: #855f6b; --color-5: #301c25. 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