#CCC4AB + #ABE093 + #CDC38C + #DEBB9B + #E7B9B9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CCC4AB

Goose Yellow · Silver · Sunflower

HEX

#CCC4AB

RGB

rgb(204, 196, 171)

HSL

hsl(45, 24%, 74%)

HSB

hsb(45, 16%, 80%)

CMYK

cmyk(0%, 4%, 16%, 20%)

Oklch

oklch(82.0% 0.035 92.3)

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

#ABE093

Emerald · LightGreen · Apple Green

HEX

#ABE093

RGB

rgb(171, 224, 147)

HSL

hsl(101, 55%, 73%)

HSB

hsb(101, 34%, 88%)

CMYK

cmyk(24%, 0%, 34%, 12%)

Oklch

oklch(85.1% 0.117 136.3)

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

#CDC38C

Fresh Green · Tan · Sunflower

HEX

#CDC38C

RGB

rgb(205, 195, 140)

HSL

hsl(51, 39%, 68%)

HSB

hsb(51, 32%, 80%)

CMYK

cmyk(0%, 5%, 32%, 20%)

Oklch

oklch(81.2% 0.073 99.1)

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

#DEBB9B

Apricot · BurlyWood · Warm Sun

HEX

#DEBB9B

RGB

rgb(222, 187, 155)

HSL

hsl(29, 50%, 74%)

HSB

hsb(29, 30%, 87%)

CMYK

cmyk(0%, 16%, 30%, 13%)

Oklch

oklch(81.4% 0.059 64.3)

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

#E7B9B9

Peach Pink · LightPink · Cherry Blossom

HEX

#E7B9B9

RGB

rgb(231, 185, 185)

HSL

hsl(0, 49%, 82%)

HSB

hsb(0, 20%, 91%)

CMYK

cmyk(0%, 20%, 20%, 9%)

Oklch

oklch(82.7% 0.053 18.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCC4AB

ADB5CD

Analogous

CDB5AD

CCC4AB

C5CDAD

Triadic

CCC4AB

ADCDC5

C5ADCD

Split-Comp.

CCC4AB

ADC5CD

B5ADCD

Tetradic

CCC4AB

ADCDB5

ADB5CD

CDADC5

Contrast Matrix WCAG 2.1 Contrast

CCC4AB	ABE093	CDC38C	DEBB9B	E7B9B9
—	1.1 Fail	1.0 Fail	1.0 Fail	1.0 Fail
1.1 Fail	—	1.2 Fail	1.2 Fail	1.1 Fail
1.0 Fail	1.2 Fail	—	1.0 Fail	1.0 Fail
1.0 Fail	1.2 Fail	1.0 Fail	—	1.0 Fail
1.0 Fail	1.1 Fail	1.0 Fail	1.0 Fail	—

White BG

1.7Fail

1.5Fail

1.8Fail

1.7Fail

Black BG

12.1AAA

13.8AAA

11.8AAA

11.7AAA

12.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C8B1

C2C2A6

C9C999

CFCFA3

D3D3B9

Deuteranopia

C9CAB3

BFBBAA

C9CA9D

D1D3A5

D6D9B9

Tritanopia

CCB6B7

AEB4B8

CDA4A6

DCA9AA

E5B9B9

Achromatopsia

C4C4C4

C7C7C7

C0C0C0

C2C2C2

C7C7C7

Shades & Tints Shades & Tints

#CCC4AB

Dark

Light

#ABE093

Dark

Light

#CDC38C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccc4ab;
  --color-2: #abe093;
  --color-3: #cdc38c;
  --color-4: #debb9b;
  --color-5: #e7b9b9;
}

SCSS

$color-1: #ccc4ab;
$color-2: #abe093;
$color-3: #cdc38c;
$color-4: #debb9b;
$color-5: #e7b9b9;

TAILWIND

colors: {
  'brand-1': '#ccc4ab',
  'brand-2': '#abe093',
  'brand-3': '#cdc38c',
  'brand-4': '#debb9b',
  'brand-5': '#e7b9b9',
}

RGB Array

[204, 196, 171], [171, 224, 147], [205, 195, 140], [222, 187, 155], [231, 185, 185]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCC4AB, #ABE093, #CDC38C, #DEBB9B, #E7B9B9 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: #ccc4ab; --color-2: #abe093; --color-3: #cdc38c; --color-4: #debb9b; --color-5: #e7b9b9. 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