← Back to Editor

#F7E7D7 · #FAD2CA · #CFC9D1 · #8FB4C2 · #5B5E5D

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#F7E7D7

Goose Yellow · Beige · Peach Orange

HEX
#F7E7D7
RGB
rgb(247, 231, 215)
HSL
hsl(30, 67%, 91%)
HSB
hsb(30, 13%, 97%)
CMYK
cmyk(0%, 6%, 13%, 3%)
Oklch
oklch(93.6% 0.028 67.5)

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

#FAD2CA

Peach Pink · Pink · Cherry Blossom

HEX
#FAD2CA
RGB
rgb(250, 210, 202)
HSL
hsl(10, 83%, 89%)
HSB
hsb(10, 19%, 98%)
CMYK
cmyk(0%, 16%, 19%, 2%)
Oklch
oklch(89.6% 0.047 31.2)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#CFC9D1

Lilac · LightGray · Pearl Gray

HEX
#CFC9D1
RGB
rgb(207, 201, 209)
HSL
hsl(285, 8%, 80%)
HSB
hsb(285, 4%, 82%)
CMYK
cmyk(1%, 4%, 0%, 18%)
Oklch
oklch(84.3% 0.013 317.7)

Traditional「Lilac」· Paint「Pearl Gray」· Creative Silver Lining

#8FB4C2

Sky Blue · DarkGray · Lake Green

HEX
#8FB4C2
RGB
rgb(143, 180, 194)
HSL
hsl(196, 29%, 66%)
HSB
hsb(196, 26%, 76%)
CMYK
cmyk(26%, 7%, 0%, 24%)
Oklch
oklch(74.8% 0.045 223.0)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#5B5E5D

Ink Gray · DimGray · Charcoal

HEX
#5B5E5D
RGB
rgb(91, 94, 93)
HSL
hsl(160, 2%, 36%)
HSB
hsb(160, 3%, 37%)
CMYK
cmyk(3%, 0%, 1%, 63%)
Oklch
oklch(47.9% 0.004 174.3)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7E7D7
D9E8F7

Analogous

F7D9D9
F7E7D7
F7F7D9

Triadic

F7E7D7
D9F7E8
E8D9F7

Split-Comp.

F7E7D7
D9F7F7
D9D9F7

Tetradic

F7E7D7
D9F7D9
D9E8F7
F7D9F7

Contrast Matrix WCAG 2.1 Contrast

F7E7D7
FAD2CA
CFC9D1
8FB4C2
5B5E5D
—
1.1
Fail
1.3
Fail
1.8
Fail
5.4
AA
1.1
Fail
—
1.2
Fail
1.6
Fail
4.7
AA
1.3
Fail
1.2
Fail
—
1.4
Fail
4.0
AA Large
1.8
Fail
1.6
Fail
1.4
Fail
—
3.0
Fail
5.4
AA
4.7
AA
4.0
AA Large
3.0
Fail
—
White BG
1.2Fail
1.4Fail
1.6Fail
2.2Fail
6.6AA
Black BG
17.4AAA
15.1AAA
12.9AAA
9.5AAA
3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F0F0DB
E9E8CC
CCCCCF
9F9FBF
5C5C5D

Deuteranopia

F1F2DC
EBEECC
CDCDCF
9D9ABE
5C5C5D

Tritanopia

F6DEDF
F8CDCE
CFCECD
91BCBB
5B5D5D

Achromatopsia

EAEAEA
DDDDDD
CCCCCC
ABABAB
5D5D5D

Shades & Tints Shades & Tints

#F7E7D7

Dark
Light

#FAD2CA

Dark
Light

#CFC9D1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7e7d7;
  --color-2: #fad2ca;
  --color-3: #cfc9d1;
  --color-4: #8fb4c2;
  --color-5: #5b5e5d;
}

SCSS

$color-1: #f7e7d7;
$color-2: #fad2ca;
$color-3: #cfc9d1;
$color-4: #8fb4c2;
$color-5: #5b5e5d;

TAILWIND

colors: {
  'brand-1': '#f7e7d7',
  'brand-2': '#fad2ca',
  'brand-3': '#cfc9d1',
  'brand-4': '#8fb4c2',
  'brand-5': '#5b5e5d',
}

RGB Array

[247, 231, 215], [250, 210, 202], [207, 201, 209], [143, 180, 194], [91, 94, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F7E7D7, #FAD2CA, #CFC9D1, #8FB4C2, #5B5E5D 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: #f7e7d7; --color-2: #fad2ca; --color-3: #cfc9d1; --color-4: #8fb4c2; --color-5: #5b5e5d. 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 warm-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