#B7DAC9 + #C3C2BB + #D79CA5 + #EB748D + #FF206F · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B7DAC9

Jade · Silver · Apple Green

HEX

#B7DAC9

RGB

rgb(183, 218, 201)

HSL

hsl(151, 32%, 79%)

HSB

hsb(151, 16%, 85%)

CMYK

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

Oklch

oklch(85.8% 0.044 164.5)

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

#C3C2BB

Silver Gray · Silver · Pearl Gray

HEX

#C3C2BB

RGB

rgb(195, 194, 187)

HSL

hsl(53, 6%, 75%)

HSB

hsb(53, 4%, 76%)

CMYK

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

Oklch

oklch(81.3% 0.010 100.0)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#D79CA5

Peach Pink · Tan · Coral Red

HEX

#D79CA5

RGB

rgb(215, 156, 165)

HSL

hsl(351, 42%, 73%)

HSB

hsb(351, 27%, 84%)

CMYK

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

Oklch

oklch(75.1% 0.071 8.8)

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

#EB748D

Peach Pink · LightCoral · Coral Red

HEX

#EB748D

RGB

rgb(235, 116, 141)

HSL

hsl(347, 75%, 69%)

HSB

hsb(347, 51%, 92%)

CMYK

cmyk(0%, 51%, 40%, 8%)

Oklch

oklch(70.3% 0.148 8.4)

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

#FF206F

Dark Violet · DeepPink · Rose Pink

HEX

#FF206F

RGB

rgb(255, 32, 111)

HSL

hsl(339, 100%, 56%)

HSB

hsb(339, 87%, 100%)

CMYK

cmyk(0%, 87%, 56%, 0%)

Oklch

oklch(64.9% 0.247 8.9)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7DAC9

DBB8C9

Analogous

B8DBB9

B7DAC9

B8DADB

Triadic

B7DAC9

CAB8DB

DBCAB8

Split-Comp.

B7DAC9

DBB8DA

DBB9B8

Tetradic

B7DAC9

B9B8DB

DBB8C9

DADBB8

Contrast Matrix WCAG 2.1 Contrast

B7DAC9	C3C2BB	D79CA5	EB748D	FF206F
—	1.2 Fail	1.5 Fail	1.9 Fail	2.4 Fail
1.2 Fail	—	1.3 Fail	1.6 Fail	2.1 Fail
1.5 Fail	1.3 Fail	—	1.2 Fail	1.6 Fail
1.9 Fail	1.6 Fail	1.2 Fail	—	1.3 Fail
2.4 Fail	2.1 Fail	1.6 Fail	1.3 Fail	—

White BG

1.5Fail

1.8Fail

2.3Fail

2.8Fail

3.7AA Large

Black BG

13.9AAA

11.8AAA

9.2AAA

7.4AAA

5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C6CD

C3C3BD

BDBDA3

B7B687

9E9C5C

Deuteranopia

C4C2CE

C3C3BD

C1C5A2

BEC786

ABBC57

Tritanopia

B9D0D1

C3BEBE

D4A1A1

E58281

F44D49

Achromatopsia

CECECE

C2C2C2

AFAFAF

9A9A9A

6C6C6C

Shades & Tints Shades & Tints

#B7DAC9

Dark

Light

#C3C2BB

Dark

Light

#D79CA5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7dac9;
  --color-2: #c3c2bb;
  --color-3: #d79ca5;
  --color-4: #eb748d;
  --color-5: #ff206f;
}

SCSS

$color-1: #b7dac9;
$color-2: #c3c2bb;
$color-3: #d79ca5;
$color-4: #eb748d;
$color-5: #ff206f;

TAILWIND

colors: {
  'brand-1': '#b7dac9',
  'brand-2': '#c3c2bb',
  'brand-3': '#d79ca5',
  'brand-4': '#eb748d',
  'brand-5': '#ff206f',
}

RGB Array

[183, 218, 201], [195, 194, 187], [215, 156, 165], [235, 116, 141], [255, 32, 111]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #B7DAC9, #C3C2BB, #D79CA5, #EB748D, #FF206F 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: #b7dac9; --color-2: #c3c2bb; --color-3: #d79ca5; --color-4: #eb748d; --color-5: #ff206f. 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 warm-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