← Back to Editor

#F8F7F3 · #CAA2A2 · #E6CDC8 · #A2AA9F · #CCD3CB

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

WorkspaceReading

Color Details Color Details

#F8F7F3

Goose Yellow · SeaShell · Lemon Cream

HEX
#F8F7F3
RGB
rgb(248, 247, 243)
HSL
hsl(48, 26%, 96%)
HSB
hsb(48, 2%, 97%)
CMYK
cmyk(0%, 0%, 2%, 3%)
Oklch
oklch(97.6% 0.005 95.1)

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

#CAA2A2

Peach Pink · Tan · Coral Red

HEX
#CAA2A2
RGB
rgb(202, 162, 162)
HSL
hsl(0, 27%, 71%)
HSB
hsb(0, 20%, 79%)
CMYK
cmyk(0%, 20%, 20%, 21%)
Oklch
oklch(74.9% 0.047 18.3)

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

#E6CDC8

Peach Pink · LightGray · Cherry Blossom

HEX
#E6CDC8
RGB
rgb(230, 205, 200)
HSL
hsl(10, 37%, 84%)
HSB
hsb(10, 13%, 90%)
CMYK
cmyk(0%, 11%, 13%, 10%)
Oklch
oklch(86.8% 0.029 31.1)

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

#A2AA9F

Ash · DarkGray · Silver Sand

HEX
#A2AA9F
RGB
rgb(162, 170, 159)
HSL
hsl(104, 6%, 65%)
HSB
hsb(104, 6%, 67%)
CMYK
cmyk(5%, 0%, 6%, 33%)
Oklch
oklch(72.8% 0.018 137.0)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#CCD3CB

Celadon · LightGray · Pearl Gray

HEX
#CCD3CB
RGB
rgb(204, 211, 203)
HSL
hsl(112, 8%, 81%)
HSB
hsb(112, 4%, 83%)
CMYK
cmyk(3%, 0%, 4%, 17%)
Oklch
oklch(85.9% 0.013 141.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8F7F3
F2F3F7

Analogous

F7F4F2
F8F7F3
F6F7F2

Triadic

F8F7F3
F2F7F6
F6F2F7

Split-Comp.

F8F7F3
F2F6F7
F4F2F7

Tetradic

F8F7F3
F2F7F4
F2F3F7
F7F2F6

Contrast Matrix WCAG 2.1 Contrast

F8F7F3
CAA2A2
E6CDC8
A2AA9F
CCD3CB
—
2.1
Fail
1.4
Fail
2.2
Fail
1.4
Fail
2.1
Fail
—
1.5
Fail
1.0
Fail
1.5
Fail
1.4
Fail
1.5
Fail
—
1.6
Fail
1.0
Fail
2.2
Fail
1.0
Fail
1.6
Fail
—
1.6
Fail
1.4
Fail
1.5
Fail
1.0
Fail
1.6
Fail
—
White BG
1.1Fail
2.3Fail
1.5Fail
2.4Fail
1.5Fail
Black BG
19.6AAA
9.2AAA
13.9AAA
8.8AAA
13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F8F4
B9B8A2
DBDBC9
A5A6A2
CFCFCD

Deuteranopia

F8F8F4
BBBEA2
DDDFCA
A5A4A2
CFCECD

Tritanopia

F8F5F5
C8A2A2
E5CACA
A2A4A4
CCCECF

Achromatopsia

F7F7F7
AEAEAE
D4D4D4
A6A6A6
D0D0D0

Shades & Tints Shades & Tints

#F8F7F3

Dark
Light

#CAA2A2

Dark
Light

#E6CDC8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8f7f3;
  --color-2: #caa2a2;
  --color-3: #e6cdc8;
  --color-4: #a2aa9f;
  --color-5: #ccd3cb;
}

SCSS

$color-1: #f8f7f3;
$color-2: #caa2a2;
$color-3: #e6cdc8;
$color-4: #a2aa9f;
$color-5: #ccd3cb;

TAILWIND

colors: {
  'brand-1': '#f8f7f3',
  'brand-2': '#caa2a2',
  'brand-3': '#e6cdc8',
  'brand-4': '#a2aa9f',
  'brand-5': '#ccd3cb',
}

RGB Array

[248, 247, 243], [202, 162, 162], [230, 205, 200], [162, 170, 159], [204, 211, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8F7F3, #CAA2A2, #E6CDC8, #A2AA9F, #CCD3CB is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. 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: #f8f7f3; --color-2: #caa2a2; --color-3: #e6cdc8; --color-4: #a2aa9f; --color-5: #ccd3cb. 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. 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 beauty, lifestyle, arts 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