← Back to Editor

#CAD8C9 · #7D725F · #BEB9A1 · #DCD7C7 · #F1E4E4

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

#CAD8C9

Celadon · LightGray · Mint Green

HEX
#CAD8C9
RGB
rgb(202, 216, 201)
HSL
hsl(116, 16%, 82%)
HSB
hsb(116, 7%, 85%)
CMYK
cmyk(6%, 0%, 7%, 15%)
Oklch
oklch(86.7% 0.025 143.5)

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

#7D725F

Ochre · DimGray · Amber Brown

HEX
#7D725F
RGB
rgb(125, 114, 95)
HSL
hsl(38, 14%, 43%)
HSB
hsb(38, 24%, 49%)
CMYK
cmyk(0%, 9%, 24%, 51%)
Oklch
oklch(55.7% 0.031 81.3)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#BEB9A1

Fresh Green · DarkGray · Sunflower

HEX
#BEB9A1
RGB
rgb(190, 185, 161)
HSL
hsl(50, 18%, 69%)
HSB
hsb(50, 15%, 75%)
CMYK
cmyk(0%, 3%, 15%, 25%)
Oklch
oklch(78.3% 0.033 97.4)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#DCD7C7

Goose Yellow · LightGray · Lemon Cream

HEX
#DCD7C7
RGB
rgb(220, 215, 199)
HSL
hsl(46, 23%, 82%)
HSB
hsb(46, 10%, 86%)
CMYK
cmyk(0%, 2%, 10%, 14%)
Oklch
oklch(87.9% 0.022 92.5)

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

#F1E4E4

Peach Pink · Linen · Cherry Blossom

HEX
#F1E4E4
RGB
rgb(241, 228, 228)
HSL
hsl(0, 32%, 92%)
HSB
hsb(0, 5%, 95%)
CMYK
cmyk(0%, 5%, 5%, 5%)
Oklch
oklch(92.9% 0.014 17.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CAD8C9
D7CAD8

Analogous

D2D8CA
CAD8C9
CAD8D0

Triadic

CAD8C9
CACBD8
D8CACB

Split-Comp.

CAD8C9
D0CAD8
D8CAD2

Tetradic

CAD8C9
CAD2D8
D7CAD8
D8D0CA

Contrast Matrix WCAG 2.1 Contrast

CAD8C9
7D725F
BEB9A1
DCD7C7
F1E4E4
—
3.2
AA Large
1.3
Fail
1.0
Fail
1.2
Fail
3.2
AA Large
—
2.4
Fail
3.3
AA Large
3.8
AA Large
1.3
Fail
2.4
Fail
—
1.4
Fail
1.6
Fail
1.0
Fail
3.3
AA Large
1.4
Fail
—
1.2
Fail
1.2
Fail
3.8
AA Large
1.6
Fail
1.2
Fail
—
White BG
1.5Fail
4.7AA
2.0Fail
1.4Fail
1.2Fail
Black BG
14.2AAA
4.4AA Large
10.6AAA
14.6AAA
17.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D0CD
787864
BCBCA7
DADACB
EBEBE4

Deuteranopia

CFCECE
797A65
BCBDA8
DADBCC
ECEDE4

Tritanopia

CBCFD0
7C6768
BEABAC
DCCECF
F0E4E4

Achromatopsia

D2D2D2
737373
B8B8B8
D7D7D7
E8E8E8

Shades & Tints Shades & Tints

#CAD8C9

Dark
Light

#7D725F

Dark
Light

#BEB9A1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cad8c9;
  --color-2: #7d725f;
  --color-3: #beb9a1;
  --color-4: #dcd7c7;
  --color-5: #f1e4e4;
}

SCSS

$color-1: #cad8c9;
$color-2: #7d725f;
$color-3: #beb9a1;
$color-4: #dcd7c7;
$color-5: #f1e4e4;

TAILWIND

colors: {
  'brand-1': '#cad8c9',
  'brand-2': '#7d725f',
  'brand-3': '#beb9a1',
  'brand-4': '#dcd7c7',
  'brand-5': '#f1e4e4',
}

RGB Array

[202, 216, 201], [125, 114, 95], [190, 185, 161], [220, 215, 199], [241, 228, 228]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CAD8C9, #7D725F, #BEB9A1, #DCD7C7, #F1E4E4 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #cad8c9; --color-2: #7d725f; --color-3: #beb9a1; --color-4: #dcd7c7; --color-5: #f1e4e4. 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 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