← Back to Editor

#CDF1D7 · #FADE75 · #FDA17F · #FF3E7F · #670C4A

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 AppData Visualization

Color Details Color Details

#CDF1D7

Emerald · LightGray · Mint Green

HEX
#CDF1D7
RGB
rgb(205, 241, 215)
HSL
hsl(137, 56%, 87%)
HSB
hsb(137, 15%, 95%)
CMYK
cmyk(15%, 0%, 11%, 5%)
Oklch
oklch(92.5% 0.051 153.9)

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

#FADE75

Goose Yellow · Khaki · Sunflower

HEX
#FADE75
RGB
rgb(250, 222, 117)
HSL
hsl(47, 93%, 72%)
HSB
hsb(47, 53%, 98%)
CMYK
cmyk(0%, 11%, 53%, 2%)
Oklch
oklch(90.3% 0.129 94.7)

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

#FDA17F

Apricot · LightSalmon · Warm Sun

HEX
#FDA17F
RGB
rgb(253, 161, 127)
HSL
hsl(16, 97%, 75%)
HSB
hsb(16, 50%, 99%)
CMYK
cmyk(0%, 36%, 50%, 1%)
Oklch
oklch(79.4% 0.120 41.0)

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

#FF3E7F

Rouge · DeepPink · Rose Pink

HEX
#FF3E7F
RGB
rgb(255, 62, 127)
HSL
hsl(340, 100%, 62%)
HSB
hsb(340, 76%, 100%)
CMYK
cmyk(0%, 76%, 50%, 0%)
Oklch
oklch(67.0% 0.229 6.2)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#670C4A

Rose Purple · Purple · Eggplant

HEX
#670C4A
RGB
rgb(103, 12, 74)
HSL
hsl(319, 79%, 23%)
HSB
hsb(319, 88%, 40%)
CMYK
cmyk(0%, 88%, 28%, 60%)
Oklch
oklch(35.0% 0.137 345.2)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDF1D7
F0CBE6

Analogous

D3F0CB
CDF1D7
CBF0E8

Triadic

CDF1D7
D6CBF0
F0D6CB

Split-Comp.

CDF1D7
E8CBF0
F0CBD3

Tetradic

CDF1D7
CBD3F0
F0CBE6
F0E8CB

Contrast Matrix WCAG 2.1 Contrast

CDF1D7
FADE75
FDA17F
FF3E7F
670C4A
—
1.1
Fail
1.6
Fail
2.7
Fail
9.9
AAA
1.1
Fail
—
1.5
Fail
2.5
Fail
9.1
AAA
1.6
Fail
1.5
Fail
—
1.7
Fail
6.1
AA
2.7
Fail
2.5
Fail
1.7
Fail
—
3.6
AA Large
9.9
AAA
9.1
AAA
6.1
AA
3.6
AA Large
—
White BG
1.2Fail
1.3Fail
2.0Fail
3.4AA Large
12.2AAA
Black BG
17.2AAA
15.8AAA
10.6AAA
6.2AA
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDDDD
EEEE8E
D5D487
ABAA6F
403F3B

Deuteranopia

DBD8DF
F0F295
DBE189
B7C56B
454C37

Tritanopia

CFE2E3
F9A2A7
F88E8F
F56360
622F2D

Achromatopsia

E3E3E3
DADADA
B9B9B9
7F7F7F
2E2E2E

Shades & Tints Shades & Tints

#CDF1D7

Dark
Light

#FADE75

Dark
Light

#FDA17F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cdf1d7;
  --color-2: #fade75;
  --color-3: #fda17f;
  --color-4: #ff3e7f;
  --color-5: #670c4a;
}

SCSS

$color-1: #cdf1d7;
$color-2: #fade75;
$color-3: #fda17f;
$color-4: #ff3e7f;
$color-5: #670c4a;

TAILWIND

colors: {
  'brand-1': '#cdf1d7',
  'brand-2': '#fade75',
  'brand-3': '#fda17f',
  'brand-4': '#ff3e7f',
  'brand-5': '#670c4a',
}

RGB Array

[205, 241, 215], [250, 222, 117], [253, 161, 127], [255, 62, 127], [103, 12, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDF1D7, #FADE75, #FDA17F, #FF3E7F, #670C4A is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #cdf1d7; --color-2: #fade75; --color-3: #fda17f; --color-4: #ff3e7f; --color-5: #670c4a. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 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