← Back to Editor

#F8D8C9 · #CB8383 · #AB8D68 · #937693 · #F8F6EF

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#F8D8C9

Apricot · Bisque · Peach Orange

HEX
#F8D8C9
RGB
rgb(248, 216, 201)
HSL
hsl(19, 77%, 88%)
HSB
hsb(19, 19%, 97%)
CMYK
cmyk(0%, 13%, 19%, 3%)
Oklch
oklch(90.5% 0.041 46.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#CB8383

Peach Pink · DarkSalmon · Coral Red

HEX
#CB8383
RGB
rgb(203, 131, 131)
HSL
hsl(0, 41%, 65%)
HSB
hsb(0, 35%, 80%)
CMYK
cmyk(0%, 35%, 35%, 20%)
Oklch
oklch(68.4% 0.089 19.6)

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

#AB8D68

Ginger · Gray · Warm Sun

HEX
#AB8D68
RGB
rgb(171, 141, 104)
HSL
hsl(33, 29%, 54%)
HSB
hsb(33, 39%, 67%)
CMYK
cmyk(0%, 18%, 39%, 33%)
Oklch
oklch(66.2% 0.063 72.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#937693

Rose Purple · Gray · Violet

HEX
#937693
RGB
rgb(147, 118, 147)
HSL
hsl(300, 12%, 52%)
HSB
hsb(300, 20%, 58%)
CMYK
cmyk(0%, 20%, 0%, 42%)
Oklch
oklch(60.3% 0.055 326.2)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#F8F6EF

Goose Yellow · SeaShell · Lemon Cream

HEX
#F8F6EF
RGB
rgb(248, 246, 239)
HSL
hsl(47, 39%, 95%)
HSB
hsb(47, 4%, 97%)
CMYK
cmyk(0%, 1%, 4%, 3%)
Oklch
oklch(97.3% 0.010 93.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8D8C9
C9E9F8

Analogous

F8C9D1
F8D8C9
F8EFC9

Triadic

F8D8C9
C9F8D8
D8C9F8

Split-Comp.

F8D8C9
C9F8EF
C9D1F8

Tetradic

F8D8C9
D1F8C9
C9E9F8
EFC9F8

Contrast Matrix WCAG 2.1 Contrast

F8D8C9
CB8383
AB8D68
937693
F8F6EF
—
2.2
Fail
2.3
Fail
3.0
Fail
1.2
Fail
2.2
Fail
—
1.1
Fail
1.4
Fail
2.7
Fail
2.3
Fail
1.1
Fail
—
1.3
Fail
2.9
Fail
3.0
Fail
1.4
Fail
1.3
Fail
—
3.7
AA Large
1.2
Fail
2.7
Fail
2.9
Fail
3.7
AA Large
—
White BG
1.3Fail
3.0Fail
3.1AA Large
4.0AA Large
1.1Fail
Black BG
15.7AAA
7.1AAA
6.7AA
5.3AA
19.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEACD
ACAB83
9E9E71
86868C
F7F7F1

Deuteranopia

ECEECE
B0B583
A0A273
888A8A
F7F7F1

Tritanopia

F6CFD0
C78383
AA787A
928685
F8F2F2

Achromatopsia

E0E0E0
999999
929292
828282
F6F6F6

Shades & Tints Shades & Tints

#F8D8C9

Dark
Light

#CB8383

Dark
Light

#AB8D68

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8d8c9;
  --color-2: #cb8383;
  --color-3: #ab8d68;
  --color-4: #937693;
  --color-5: #f8f6ef;
}

SCSS

$color-1: #f8d8c9;
$color-2: #cb8383;
$color-3: #ab8d68;
$color-4: #937693;
$color-5: #f8f6ef;

TAILWIND

colors: {
  'brand-1': '#f8d8c9',
  'brand-2': '#cb8383',
  'brand-3': '#ab8d68',
  'brand-4': '#937693',
  'brand-5': '#f8f6ef',
}

RGB Array

[248, 216, 201], [203, 131, 131], [171, 141, 104], [147, 118, 147], [248, 246, 239]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8D8C9, #CB8383, #AB8D68, #937693, #F8F6EF is ideal for: health products, baby brands, fresh-style blogs, 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: #f8d8c9; --color-2: #cb8383; --color-3: #ab8d68; --color-4: #937693; --color-5: #f8f6ef. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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