#B7CDC0 + #DBDFD0 + #FDEBD3 + #F3CBB2 + #F8A49A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B7CDC0

Celadon · Silver · Apple Green

HEX

#B7CDC0

RGB

rgb(183, 205, 192)

HSL

hsl(145, 18%, 76%)

HSB

hsb(145, 11%, 80%)

CMYK

cmyk(11%, 0%, 6%, 20%)

Oklch

oklch(82.8% 0.030 159.8)

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

#DBDFD0

Willow Green · LightGray · Mint Green

HEX

#DBDFD0

RGB

rgb(219, 223, 208)

HSL

hsl(76, 19%, 85%)

HSB

hsb(76, 7%, 87%)

CMYK

cmyk(2%, 0%, 7%, 13%)

Oklch

oklch(89.6% 0.021 119.0)

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

#FDEBD3

Goose Yellow · Beige · Peach Orange

HEX

#FDEBD3

RGB

rgb(253, 235, 211)

HSL

hsl(34, 91%, 91%)

HSB

hsb(34, 17%, 99%)

CMYK

cmyk(0%, 7%, 17%, 1%)

Oklch

oklch(94.8% 0.037 75.2)

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

#F3CBB2

Apricot · Wheat · Peach Orange

HEX

#F3CBB2

RGB

rgb(243, 203, 178)

HSL

hsl(23, 73%, 83%)

HSB

hsb(23, 27%, 95%)

CMYK

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

Oklch

oklch(87.0% 0.057 53.8)

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

#F8A49A

Peach Pink · LightSalmon · Coral Red

HEX

#F8A49A

RGB

rgb(248, 164, 154)

HSL

hsl(6, 87%, 79%)

HSB

hsb(6, 38%, 97%)

CMYK

cmyk(0%, 34%, 38%, 3%)

Oklch

oklch(79.9% 0.102 27.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7CDC0

CDB7C4

Analogous

B9CDB7

B7CDC0

B7CDCB

Triadic

B7CDC0

C0B7CD

CDC0B7

Split-Comp.

B7CDC0

CBB7CD

CDB7B9

Tetradic

B7CDC0

B7B9CD

CDB7C4

CDCBB7

Contrast Matrix WCAG 2.1 Contrast

B7CDC0	DBDFD0	FDEBD3	F3CBB2	F8A49A
—	1.2 Fail	1.4 Fail	1.1 Fail	1.2 Fail
1.2 Fail	—	1.2 Fail	1.1 Fail	1.4 Fail
1.4 Fail	1.2 Fail	—	1.3 Fail	1.7 Fail
1.1 Fail	1.1 Fail	1.3 Fail	—	1.3 Fail
1.2 Fail	1.4 Fail	1.7 Fail	1.3 Fail	—

White BG

1.7Fail

1.4Fail

1.2Fail

1.5Fail

2.0Fail

Black BG

12.5AAA

15.5AAA

18.0AAA

14.0AAA

10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C1C3

DDDDD4

F5F5D9

E2E1B8

D4D39C

Deuteranopia

BFBEC4

DDDCD5

F6F8DA

E4E7BA

D9DF9D

Tritanopia

B8C6C6

DBD6D7

FCDDDE

F1BDBE

F49E9F

Achromatopsia

C5C5C5

DCDCDC

EEEEEE

D4D4D4

BCBCBC

Shades & Tints Shades & Tints

#B7CDC0

Dark

Light

#DBDFD0

Dark

Light

#FDEBD3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7cdc0;
  --color-2: #dbdfd0;
  --color-3: #fdebd3;
  --color-4: #f3cbb2;
  --color-5: #f8a49a;
}

SCSS

$color-1: #b7cdc0;
$color-2: #dbdfd0;
$color-3: #fdebd3;
$color-4: #f3cbb2;
$color-5: #f8a49a;

TAILWIND

colors: {
  'brand-1': '#b7cdc0',
  'brand-2': '#dbdfd0',
  'brand-3': '#fdebd3',
  'brand-4': '#f3cbb2',
  'brand-5': '#f8a49a',
}

RGB Array

[183, 205, 192], [219, 223, 208], [253, 235, 211], [243, 203, 178], [248, 164, 154]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B7CDC0, #DBDFD0, #FDEBD3, #F3CBB2, #F8A49A 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: #b7cdc0; --color-2: #dbdfd0; --color-3: #fdebd3; --color-4: #f3cbb2; --color-5: #f8a49a. 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