#F7A7C2 + #E3BFBF + #D6CEB8 + #C2E4CB + #CBD7C5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F7A7C2

Rouge · LightPink · Cherry Blossom

HEX

#F7A7C2

RGB

rgb(247, 167, 194)

HSL

hsl(340, 83%, 81%)

HSB

hsb(340, 32%, 97%)

CMYK

cmyk(0%, 32%, 21%, 3%)

Oklch

oklch(81.3% 0.100 357.7)

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

#E3BFBF

Peach Pink · LightPink · Cherry Blossom

HEX

#E3BFBF

RGB

rgb(227, 191, 191)

HSL

hsl(0, 39%, 82%)

HSB

hsb(0, 16%, 89%)

CMYK

cmyk(0%, 16%, 16%, 11%)

Oklch

oklch(83.6% 0.041 18.0)

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

#D6CEB8

Goose Yellow · Silver · Lemon Cream

HEX

#D6CEB8

RGB

rgb(214, 206, 184)

HSL

hsl(44, 27%, 78%)

HSB

hsb(44, 14%, 84%)

CMYK

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

Oklch

oklch(85.2% 0.031 90.4)

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

#C2E4CB

Celadon · LightGray · Mint Green

HEX

#C2E4CB

RGB

rgb(194, 228, 203)

HSL

hsl(136, 39%, 83%)

HSB

hsb(136, 15%, 89%)

CMYK

cmyk(15%, 0%, 11%, 11%)

Oklch

oklch(88.7% 0.049 153.4)

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

#CBD7C5

Celadon · LightGray · Mint Green

HEX

#CBD7C5

RGB

rgb(203, 215, 197)

HSL

hsl(100, 18%, 81%)

HSB

hsb(100, 8%, 84%)

CMYK

cmyk(6%, 0%, 8%, 16%)

Oklch

oklch(86.5% 0.028 135.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7A7C2

A6F7DC

Analogous

F7A6E9

F7A7C2

F7B4A6

Triadic

F7A7C2

C1F7A6

A6C1F7

Split-Comp.

F7A7C2

A6F7B4

A6E9F7

Tetradic

F7A7C2

E9F7A6

A6F7DC

B4A6F7

Contrast Matrix WCAG 2.1 Contrast

F7A7C2	E3BFBF	D6CEB8	C2E4CB	CBD7C5
—	1.1 Fail	1.2 Fail	1.4 Fail	1.2 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.1 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.4 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.2 Fail	1.1 Fail	1.1 Fail	1.1 Fail	—

White BG

1.9Fail

1.7Fail

1.6Fail

1.4Fail

1.5Fail

Black BG

11.3AAA

12.5AAA

13.4AAA

15.3AAA

14.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D4BB

D3D3BF

D3D2BD

D1D1D1

D0D0C9

Deuteranopia

D9DFBA

D6D8BF

D3D4BF

CFCCD3

D0CFCA

Tritanopia

F3B6B5

E1BFBF

D6C2C2

C4D6D7

CCCDCE

Achromatopsia

C2C2C2

CACACA

CECECE

D7D7D7

D1D1D1

Shades & Tints Shades & Tints

#F7A7C2

Dark

Light

#E3BFBF

Dark

Light

#D6CEB8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7a7c2;
  --color-2: #e3bfbf;
  --color-3: #d6ceb8;
  --color-4: #c2e4cb;
  --color-5: #cbd7c5;
}

SCSS

$color-1: #f7a7c2;
$color-2: #e3bfbf;
$color-3: #d6ceb8;
$color-4: #c2e4cb;
$color-5: #cbd7c5;

TAILWIND

colors: {
  'brand-1': '#f7a7c2',
  'brand-2': '#e3bfbf',
  'brand-3': '#d6ceb8',
  'brand-4': '#c2e4cb',
  'brand-5': '#cbd7c5',
}

RGB Array

[247, 167, 194], [227, 191, 191], [214, 206, 184], [194, 228, 203], [203, 215, 197]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7A7C2, #E3BFBF, #D6CEB8, #C2E4CB, #CBD7C5 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: #f7a7c2; --color-2: #e3bfbf; --color-3: #d6ceb8; --color-4: #c2e4cb; --color-5: #cbd7c5. 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