#F2D4B9 + #D3E5D7 + #F5BCB9 + #D0839F + #C09EA4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F2D4B9

Apricot · Wheat · Peach Orange

HEX

#F2D4B9

RGB

rgb(242, 212, 185)

HSL

hsl(28, 69%, 84%)

HSB

hsb(28, 24%, 95%)

CMYK

cmyk(0%, 12%, 24%, 5%)

Oklch

oklch(88.8% 0.049 64.1)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#D3E5D7

Celadon · LightGray · Mint Green

HEX

#D3E5D7

RGB

rgb(211, 229, 215)

HSL

hsl(133, 26%, 86%)

HSB

hsb(133, 8%, 90%)

CMYK

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

Oklch

oklch(90.5% 0.027 152.3)

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

#F5BCB9

Peach Pink · LightPink · Cherry Blossom

HEX

#F5BCB9

RGB

rgb(245, 188, 185)

HSL

hsl(3, 75%, 84%)

HSB

hsb(3, 24%, 96%)

CMYK

cmyk(0%, 23%, 24%, 4%)

Oklch

oklch(84.6% 0.066 22.0)

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

#D0839F

Rouge · LightCoral · Rose Pink

HEX

#D0839F

RGB

rgb(208, 131, 159)

HSL

hsl(338, 45%, 66%)

HSB

hsb(338, 37%, 82%)

CMYK

cmyk(0%, 37%, 24%, 18%)

Oklch

oklch(69.8% 0.101 356.7)

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

#C09EA4

Peach Pink · DarkGray · Coral Red

HEX

#C09EA4

RGB

rgb(192, 158, 164)

HSL

hsl(349, 21%, 69%)

HSB

hsb(349, 18%, 75%)

CMYK

cmyk(0%, 18%, 15%, 25%)

Oklch

oklch(73.2% 0.041 6.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2D4B9

BAD8F2

Analogous

F2BABC

F2D4B9

F2F0BA

Triadic

F2D4B9

BAF2D4

D4BAF2

Split-Comp.

F2D4B9

BAF2F0

BABCF2

Tetradic

F2D4B9

BCF2BA

BAD8F2

F0BAF2

Contrast Matrix WCAG 2.1 Contrast

F2D4B9	D3E5D7	F5BCB9	D0839F	C09EA4
—	1.1 Fail	1.2 Fail	2.0 Fail	1.7 Fail
1.1 Fail	—	1.2 Fail	2.1 Fail	1.8 Fail
1.2 Fail	1.2 Fail	—	1.7 Fail	1.5 Fail
2.0 Fail	2.1 Fail	1.7 Fail	—	1.2 Fail
1.7 Fail	1.8 Fail	1.5 Fail	1.2 Fail	—

White BG

1.4Fail

1.3Fail

1.6Fail

2.8Fail

2.4Fail

Black BG

14.9AAA

16.0AAA

12.8AAA

7.4AAA

8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E5C0

DBDBDA

DCDCBA

AFAE98

B1B1A3

Deuteranopia

E7E9C1

DAD8DB

E0E4BA

B3B997

B3B6A2

Tritanopia

F0C5C6

D4DDDE

F2BABA

CC9392

BEA1A1

Achromatopsia

DADADA

DEDEDE

CDCDCD

9D9D9D

A9A9A9

Shades & Tints Shades & Tints

#F2D4B9

Dark

Light

#D3E5D7

Dark

Light

#F5BCB9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2d4b9;
  --color-2: #d3e5d7;
  --color-3: #f5bcb9;
  --color-4: #d0839f;
  --color-5: #c09ea4;
}

SCSS

$color-1: #f2d4b9;
$color-2: #d3e5d7;
$color-3: #f5bcb9;
$color-4: #d0839f;
$color-5: #c09ea4;

TAILWIND

colors: {
  'brand-1': '#f2d4b9',
  'brand-2': '#d3e5d7',
  'brand-3': '#f5bcb9',
  'brand-4': '#d0839f',
  'brand-5': '#c09ea4',
}

RGB Array

[242, 212, 185], [211, 229, 215], [245, 188, 185], [208, 131, 159], [192, 158, 164]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2D4B9, #D3E5D7, #F5BCB9, #D0839F, #C09EA4 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: #f2d4b9; --color-2: #d3e5d7; --color-3: #f5bcb9; --color-4: #d0839f; --color-5: #c09ea4. 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