← Back to Editor

#CCDEB1 · #C4BD7A · #D4A86A · #E88A61 · #F0534A

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

#CCDEB1

Willow Green · Silver · Apple Green

HEX
#CCDEB1
RGB
rgb(204, 222, 177)
HSL
hsl(84, 41%, 78%)
HSB
hsb(84, 20%, 87%)
CMYK
cmyk(8%, 0%, 20%, 13%)
Oklch
oklch(87.5% 0.063 125.4)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#C4BD7A

Fresh Green · Tan · Sunflower

HEX
#C4BD7A
RGB
rgb(196, 189, 122)
HSL
hsl(54, 39%, 62%)
HSB
hsb(54, 38%, 77%)
CMYK
cmyk(0%, 4%, 38%, 23%)
Oklch
oklch(78.9% 0.088 103.1)

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

#D4A86A

Ginger · DarkSalmon · Warm Sun

HEX
#D4A86A
RGB
rgb(212, 168, 106)
HSL
hsl(35, 55%, 62%)
HSB
hsb(35, 50%, 83%)
CMYK
cmyk(0%, 21%, 50%, 17%)
Oklch
oklch(75.8% 0.095 75.0)

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

#E88A61

Apricot · Salmon · Warm Sun

HEX
#E88A61
RGB
rgb(232, 138, 97)
HSL
hsl(18, 75%, 65%)
HSB
hsb(18, 58%, 91%)
CMYK
cmyk(0%, 41%, 58%, 9%)
Oklch
oklch(72.5% 0.128 43.9)

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

#F0534A

Peach Pink · Tomato · Coral Red

HEX
#F0534A
RGB
rgb(240, 83, 74)
HSL
hsl(3, 85%, 62%)
HSB
hsb(3, 69%, 94%)
CMYK
cmyk(0%, 65%, 69%, 6%)
Oklch
oklch(65.5% 0.194 27.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCDEB1
C2B0DE

Analogous

DED9B0
CCDEB1
B4DEB0

Triadic

CCDEB1
B0CCDE
DEB0CC

Split-Comp.

CCDEB1
B0B4DE
D9B0DE

Tetradic

CCDEB1
B0DED9
C2B0DE
DEB0B4

Contrast Matrix WCAG 2.1 Contrast

CCDEB1
C4BD7A
D4A86A
E88A61
F0534A
—
1.3
Fail
1.5
Fail
1.8
Fail
2.4
Fail
1.3
Fail
—
1.1
Fail
1.3
Fail
1.8
Fail
1.5
Fail
1.1
Fail
—
1.2
Fail
1.6
Fail
1.8
Fail
1.3
Fail
1.2
Fail
—
1.4
Fail
2.4
Fail
1.8
Fail
1.6
Fail
1.4
Fail
—
White BG
1.4Fail
1.9Fail
2.2Fail
2.5Fail
3.5AA Large
Black BG
14.7AAA
10.9AAA
9.6AAA
8.2AAA
6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D4BC
C1C18A
C1C179
BFBE6B
ACAB4C

Deuteranopia

D3D1BF
C1C28E
C4C77D
C5CC6D
B5C14D

Tritanopia

CDC4C6
C4979A
D28587
E37374
E84E4E

Achromatopsia

D3D3D3
B7B7B7
AEAEAE
A1A1A1
818181

Shades & Tints Shades & Tints

#CCDEB1

Dark
Light

#C4BD7A

Dark
Light

#D4A86A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccdeb1;
  --color-2: #c4bd7a;
  --color-3: #d4a86a;
  --color-4: #e88a61;
  --color-5: #f0534a;
}

SCSS

$color-1: #ccdeb1;
$color-2: #c4bd7a;
$color-3: #d4a86a;
$color-4: #e88a61;
$color-5: #f0534a;

TAILWIND

colors: {
  'brand-1': '#ccdeb1',
  'brand-2': '#c4bd7a',
  'brand-3': '#d4a86a',
  'brand-4': '#e88a61',
  'brand-5': '#f0534a',
}

RGB Array

[204, 222, 177], [196, 189, 122], [212, 168, 106], [232, 138, 97], [240, 83, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCDEB1, #C4BD7A, #D4A86A, #E88A61, #F0534A is ideal for: health products, baby brands, fresh-style blogs. 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: #ccdeb1; --color-2: #c4bd7a; --color-3: #d4a86a; --color-4: #e88a61; --color-5: #f0534a. 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 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