#FF77A1 + #CDA393 + #D7CCAB + #DCE6CB + #FCE5CB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FF77A1

Rouge · LightCoral · Rose Pink

HEX

#FF77A1

RGB

rgb(255, 119, 161)

HSL

hsl(341, 100%, 73%)

HSB

hsb(341, 53%, 100%)

CMYK

cmyk(0%, 53%, 37%, 0%)

Oklch

oklch(74.0% 0.170 2.7)

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

#CDA393

Apricot · Tan · Warm Sun

HEX

#CDA393

RGB

rgb(205, 163, 147)

HSL

hsl(17, 37%, 69%)

HSB

hsb(17, 28%, 80%)

CMYK

cmyk(0%, 20%, 28%, 20%)

Oklch

oklch(75.0% 0.055 41.9)

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

#D7CCAB

Goose Yellow · Silver · Lemon Cream

HEX

#D7CCAB

RGB

rgb(215, 204, 171)

HSL

hsl(45, 35%, 76%)

HSB

hsb(45, 20%, 84%)

CMYK

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

Oklch

oklch(84.6% 0.046 91.8)

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

#DCE6CB

Willow Green · LightGray · Mint Green

HEX

#DCE6CB

RGB

rgb(220, 230, 203)

HSL

hsl(82, 35%, 85%)

HSB

hsb(82, 12%, 90%)

CMYK

cmyk(4%, 0%, 12%, 10%)

Oklch

oklch(91.0% 0.038 123.7)

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

#FCE5CB

Goose Yellow · Bisque · Peach Orange

HEX

#FCE5CB

RGB

rgb(252, 229, 203)

HSL

hsl(32, 89%, 89%)

HSB

hsb(32, 19%, 99%)

CMYK

cmyk(0%, 9%, 19%, 1%)

Oklch

oklch(93.4% 0.043 70.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF77A1

75FFD3

Analogous

FF75E6

FF77A1

FF8F75

Triadic

FF77A1

A1FF75

75A1FF

Split-Comp.

FF77A1

75FF8F

75E6FF

Tetradic

FF77A1

E6FF75

75FFD3

8F75FF

Contrast Matrix WCAG 2.1 Contrast

FF77A1	CDA393	D7CCAB	DCE6CB	FCE5CB
—	1.1 Fail	1.6 Fail	1.9 Fail	2.0 Fail
1.1 Fail	—	1.4 Fail	1.8 Fail	1.9 Fail
1.6 Fail	1.4 Fail	—	1.2 Fail	1.3 Fail
1.9 Fail	1.8 Fail	1.2 Fail	—	1.1 Fail
2.0 Fail	1.9 Fail	1.3 Fail	1.1 Fail	—

White BG

2.5Fail

2.3Fail

1.6Fail

1.3Fail

1.2Fail

Black BG

8.4AAA

9.3AAA

13.1AAA

16.2AAA

17.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C397

BBBA97

D2D2B3

E0E0D2

F2F2D1

Deuteranopia

CCD694

BDC098

D3D4B5

E0DFD3

F3F5D3

Tritanopia

F88F8D

CB9A9B

D6B9BB

DDD7D8

FBD6D7

Achromatopsia

A4A4A4

AEAEAE

CCCCCC

E0E0E0

E9E9E9

Shades & Tints Shades & Tints

#FF77A1

Dark

Light

#CDA393

Dark

Light

#D7CCAB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff77a1;
  --color-2: #cda393;
  --color-3: #d7ccab;
  --color-4: #dce6cb;
  --color-5: #fce5cb;
}

SCSS

$color-1: #ff77a1;
$color-2: #cda393;
$color-3: #d7ccab;
$color-4: #dce6cb;
$color-5: #fce5cb;

TAILWIND

colors: {
  'brand-1': '#ff77a1',
  'brand-2': '#cda393',
  'brand-3': '#d7ccab',
  'brand-4': '#dce6cb',
  'brand-5': '#fce5cb',
}

RGB Array

[255, 119, 161], [205, 163, 147], [215, 204, 171], [220, 230, 203], [252, 229, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF77A1, #CDA393, #D7CCAB, #DCE6CB, #FCE5CB 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: #ff77a1; --color-2: #cda393; --color-3: #d7ccab; --color-4: #dce6cb; --color-5: #fce5cb. 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