#F7CDDB + #EABDC0 + #80BEA9 + #ABD8AD + #C7E5C1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F7CDDB

Rouge · Pink · Cherry Blossom

HEX

#F7CDDB

RGB

rgb(247, 205, 219)

HSL

hsl(340, 72%, 89%)

HSB

hsb(340, 17%, 97%)

CMYK

cmyk(0%, 17%, 11%, 3%)

Oklch

oklch(88.8% 0.051 356.2)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#EABDC0

Peach Pink · LightPink · Cherry Blossom

HEX

#EABDC0

RGB

rgb(234, 189, 192)

HSL

hsl(356, 52%, 83%)

HSB

hsb(356, 19%, 92%)

CMYK

cmyk(0%, 19%, 18%, 8%)

Oklch

oklch(83.9% 0.052 13.7)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#80BEA9

Jade · MediumAquaMarine · Lake Green

HEX

#80BEA9

RGB

rgb(128, 190, 169)

HSL

hsl(160, 32%, 62%)

HSB

hsb(160, 33%, 75%)

CMYK

cmyk(33%, 0%, 11%, 25%)

Oklch

oklch(75.3% 0.071 171.1)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#ABD8AD

Celadon · Silver · Apple Green

HEX

#ABD8AD

RGB

rgb(171, 216, 173)

HSL

hsl(123, 37%, 76%)

HSB

hsb(123, 21%, 85%)

CMYK

cmyk(21%, 0%, 20%, 15%)

Oklch

oklch(83.9% 0.076 146.0)

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

#C7E5C1

Celadon · LightGray · Mint Green

HEX

#C7E5C1

RGB

rgb(199, 229, 193)

HSL

hsl(110, 41%, 83%)

HSB

hsb(110, 16%, 90%)

CMYK

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

Oklch

oklch(89.0% 0.058 140.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7CDDB

CFF7EA

Analogous

F7CFF0

F7CDDB

F7D5CF

Triadic

F7CDDB

DCF7CF

CFDCF7

Split-Comp.

F7CDDB

CFF7D5

CFF0F7

Tetradic

F7CDDB

F0F7CF

CFF7EA

D5CFF7

Contrast Matrix WCAG 2.1 Contrast

F7CDDB	EABDC0	80BEA9	ABD8AD	C7E5C1
—	1.2 Fail	1.5 Fail	1.1 Fail	1.0 Fail
1.2 Fail	—	1.3 Fail	1.0 Fail	1.2 Fail
1.5 Fail	1.3 Fail	—	1.3 Fail	1.6 Fail
1.1 Fail	1.0 Fail	1.3 Fail	—	1.2 Fail
1.0 Fail	1.2 Fail	1.6 Fail	1.2 Fail	—

White BG

1.4Fail

1.7Fail

2.1Fail

1.6Fail

1.4Fail

Black BG

14.7AAA

12.5AAA

9.9AAA

13.2AAA

15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E4D8

D7D6BF

9B9BAE

BEBFB7

D4D4CA

Deuteranopia

E7EAD7

D9DCBF

9793AF

BCB9BA

D2D0CC

Tritanopia

F5D5D4

E8BFBF

83B2B3

ADC0C1

C8D1D2

Achromatopsia

DBDBDB

CBCBCB

A9A9A9

C6C6C6

D8D8D8

Shades & Tints Shades & Tints

#F7CDDB

Dark

Light

#EABDC0

Dark

Light

#80BEA9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7cddb;
  --color-2: #eabdc0;
  --color-3: #80bea9;
  --color-4: #abd8ad;
  --color-5: #c7e5c1;
}

SCSS

$color-1: #f7cddb;
$color-2: #eabdc0;
$color-3: #80bea9;
$color-4: #abd8ad;
$color-5: #c7e5c1;

TAILWIND

colors: {
  'brand-1': '#f7cddb',
  'brand-2': '#eabdc0',
  'brand-3': '#80bea9',
  'brand-4': '#abd8ad',
  'brand-5': '#c7e5c1',
}

RGB Array

[247, 205, 219], [234, 189, 192], [128, 190, 169], [171, 216, 173], [199, 229, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7CDDB, #EABDC0, #80BEA9, #ABD8AD, #C7E5C1 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: #f7cddb; --color-2: #eabdc0; --color-3: #80bea9; --color-4: #abd8ad; --color-5: #c7e5c1. 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