← Back to Editor

#C2CEC1 · #DDE6BC · #FCC686 · #FFCC54 · #EBCC12

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#C2CEC1

Celadon · Silver · Apple Green

HEX
#C2CEC1
RGB
rgb(194, 206, 193)
HSL
hsl(115, 12%, 78%)
HSB
hsb(115, 6%, 81%)
CMYK
cmyk(6%, 0%, 6%, 19%)
Oklch
oklch(83.9% 0.022 143.2)

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

#DDE6BC

Willow Green · Wheat · Mint Green

HEX
#DDE6BC
RGB
rgb(221, 230, 188)
HSL
hsl(73, 46%, 82%)
HSB
hsb(73, 18%, 90%)
CMYK
cmyk(4%, 0%, 18%, 10%)
Oklch
oklch(90.7% 0.056 117.4)

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

#FCC686

Goose Yellow · BurlyWood · Peach Orange

HEX
#FCC686
RGB
rgb(252, 198, 134)
HSL
hsl(33, 95%, 76%)
HSB
hsb(33, 47%, 99%)
CMYK
cmyk(0%, 21%, 47%, 1%)
Oklch
oklch(86.1% 0.102 70.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FFCC54

Ginger · SandyBrown · Sunflower

HEX
#FFCC54
RGB
rgb(255, 204, 84)
HSL
hsl(42, 100%, 66%)
HSB
hsb(42, 67%, 100%)
CMYK
cmyk(0%, 20%, 67%, 0%)
Oklch
oklch(86.9% 0.146 85.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#EBCC12

Autumn Sage · Gold · Honey Gold

HEX
#EBCC12
RGB
rgb(235, 204, 18)
HSL
hsl(51, 86%, 50%)
HSB
hsb(51, 92%, 92%)
CMYK
cmyk(0%, 13%, 92%, 8%)
Oklch
oklch(84.6% 0.172 97.9)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C2CEC1
CDC0CE

Analogous

C8CEC0
C2CEC1
C0CEC6

Triadic

C2CEC1
C0C1CE
CEC0C1

Split-Comp.

C2CEC1
C6C0CE
CEC0C8

Tetradic

C2CEC1
C0C8CE
CDC0CE
CEC6C0

Contrast Matrix WCAG 2.1 Contrast

C2CEC1
DDE6BC
FCC686
FFCC54
EBCC12
—
1.3
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.3
Fail
—
1.2
Fail
1.1
Fail
1.2
Fail
1.1
Fail
1.2
Fail
—
1.0
Fail
1.0
Fail
1.1
Fail
1.1
Fail
1.0
Fail
—
1.1
Fail
1.0
Fail
1.2
Fail
1.0
Fail
1.1
Fail
—
White BG
1.6Fail
1.3Fail
1.5Fail
1.5Fail
1.6Fail
Black BG
12.9AAA
16.1AAA
13.6AAA
14.0AAA
13.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C7C4
E1E1C6
E5E495
E9E871
DEDD3F

Deuteranopia

C7C6C5
E0E0C9
E8EC99
ECF078
DFE24A

Tritanopia

C3C7C7
DDCED0
F9A2A4
FC888D
E9636A

Achromatopsia

C9C9C9
DFDFDF
CFCFCF
CECECE
C0C0C0

Shades & Tints Shades & Tints

#C2CEC1

Dark
Light

#DDE6BC

Dark
Light

#FCC686

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c2cec1;
  --color-2: #dde6bc;
  --color-3: #fcc686;
  --color-4: #ffcc54;
  --color-5: #ebcc12;
}

SCSS

$color-1: #c2cec1;
$color-2: #dde6bc;
$color-3: #fcc686;
$color-4: #ffcc54;
$color-5: #ebcc12;

TAILWIND

colors: {
  'brand-1': '#c2cec1',
  'brand-2': '#dde6bc',
  'brand-3': '#fcc686',
  'brand-4': '#ffcc54',
  'brand-5': '#ebcc12',
}

RGB Array

[194, 206, 193], [221, 230, 188], [252, 198, 134], [255, 204, 84], [235, 204, 18]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C2CEC1, #DDE6BC, #FCC686, #FFCC54, #EBCC12 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #c2cec1; --color-2: #dde6bc; --color-3: #fcc686; --color-4: #ffcc54; --color-5: #ebcc12. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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