← Back to Editor

#CCBDA3 · #573A06 · #E7A96D · #FAFCFA · #95CAD8

A 5-color palette 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

#CCBDA3

Goose Yellow · Tan · Warm Sun

HEX
#CCBDA3
RGB
rgb(204, 189, 163)
HSL
hsl(38, 29%, 72%)
HSB
hsb(38, 20%, 80%)
CMYK
cmyk(0%, 7%, 20%, 20%)
Oklch
oklch(80.4% 0.039 81.5)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#573A06

Ochre · DarkOliveGreen · Cinnamon

HEX
#573A06
RGB
rgb(87, 58, 6)
HSL
hsl(39, 87%, 18%)
HSB
hsb(39, 93%, 34%)
CMYK
cmyk(0%, 33%, 93%, 66%)
Oklch
oklch(37.3% 0.075 75.6)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#E7A96D

Ginger · SandyBrown · Warm Sun

HEX
#E7A96D
RGB
rgb(231, 169, 109)
HSL
hsl(30, 72%, 67%)
HSB
hsb(30, 53%, 91%)
CMYK
cmyk(0%, 27%, 53%, 9%)
Oklch
oklch(78.1% 0.106 64.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#FAFCFA

Celadon · Snow · Mint Green

HEX
#FAFCFA
RGB
rgb(250, 252, 250)
HSL
hsl(120, 25%, 98%)
HSB
hsb(120, 1%, 99%)
CMYK
cmyk(1%, 0%, 1%, 1%)
Oklch
oklch(98.9% 0.003 145.5)

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

#95CAD8

Sky Blue · SkyBlue · Lake Green

HEX
#95CAD8
RGB
rgb(149, 202, 216)
HSL
hsl(193, 46%, 72%)
HSB
hsb(193, 31%, 85%)
CMYK
cmyk(31%, 6%, 0%, 15%)
Oklch
oklch(80.7% 0.058 215.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCBDA3
A3B2CC

Analogous

CCA8A3
CCBDA3
C7CCA3

Triadic

CCBDA3
A3CCBD
BDA3CC

Split-Comp.

CCBDA3
A3C7CC
A8A3CC

Tetradic

CCBDA3
A3CCA8
A3B2CC
CCA3C7

Contrast Matrix WCAG 2.1 Contrast

CCBDA3
573A06
E7A96D
FAFCFA
95CAD8
—
5.7
AA
1.1
Fail
1.8
Fail
1.0
Fail
5.7
AA
—
5.1
AA
10.1
AAA
5.8
AA
1.1
Fail
5.1
AA
—
2.0
Fail
1.1
Fail
1.8
Fail
10.1
AAA
2.0
Fail
—
1.7
Fail
1.0
Fail
5.8
AA
1.1
Fail
1.7
Fail
—
White BG
1.8Fail
10.4AAA
2.0Fail
1.0Fail
1.8Fail
Black BG
11.4AAA
2.0Fail
10.3AAA
20.4AAA
11.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C5A9
4A4A13
CCCC7C
FBFBFA
ACACD5

Deuteranopia

C6C7AB
4C4E16
D0D47F
FBFBFB
A9A5D4

Tritanopia

CBAEAF
561D1F
E4878A
FAFBFB
98D2D1

Achromatopsia

BFBFBF
3D3D3D
B5B5B5
FBFBFB
BCBCBC

Shades & Tints Shades & Tints

#CCBDA3

Dark
Light

#573A06

Dark
Light

#E7A96D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccbda3;
  --color-2: #573a06;
  --color-3: #e7a96d;
  --color-4: #fafcfa;
  --color-5: #95cad8;
}

SCSS

$color-1: #ccbda3;
$color-2: #573a06;
$color-3: #e7a96d;
$color-4: #fafcfa;
$color-5: #95cad8;

TAILWIND

colors: {
  'brand-1': '#ccbda3',
  'brand-2': '#573a06',
  'brand-3': '#e7a96d',
  'brand-4': '#fafcfa',
  'brand-5': '#95cad8',
}

RGB Array

[204, 189, 163], [87, 58, 6], [231, 169, 109], [250, 252, 250], [149, 202, 216]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCBDA3, #573A06, #E7A96D, #FAFCFA, #95CAD8 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: #ccbda3; --color-2: #573a06; --color-3: #e7a96d; --color-4: #fafcfa; --color-5: #95cad8. 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