#B0DAC4 + #E7DEB3 + #FFB284 + #B76D84 + #786789 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B0DAC4

Celadon · Silver · Apple Green

HEX

#B0DAC4

RGB

rgb(176, 218, 196)

HSL

hsl(149, 36%, 77%)

HSB

hsb(149, 19%, 85%)

CMYK

cmyk(19%, 0%, 10%, 15%)

Oklch

oklch(85.2% 0.054 162.2)

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

#E7DEB3

Fresh Green · Wheat · Lemon Cream

HEX

#E7DEB3

RGB

rgb(231, 222, 179)

HSL

hsl(50, 52%, 80%)

HSB

hsb(50, 23%, 91%)

CMYK

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

Oklch

oklch(89.7% 0.057 97.6)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#FFB284

Apricot · LightSalmon · Peach Orange

HEX

#FFB284

RGB

rgb(255, 178, 132)

HSL

hsl(22, 100%, 76%)

HSB

hsb(22, 48%, 100%)

CMYK

cmyk(0%, 30%, 48%, 0%)

Oklch

oklch(82.7% 0.109 51.6)

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

#B76D84

Dark Violet · Gray · Rose Pink

HEX

#B76D84

RGB

rgb(183, 109, 132)

HSL

hsl(341, 34%, 57%)

HSB

hsb(341, 40%, 72%)

CMYK

cmyk(0%, 40%, 28%, 28%)

Oklch

oklch(62.2% 0.098 0.3)

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

#786789

Dark Plum · SlateGray · Violet

HEX

#786789

RGB

rgb(120, 103, 137)

HSL

hsl(270, 14%, 47%)

HSB

hsb(270, 25%, 54%)

CMYK

cmyk(12%, 25%, 0%, 46%)

Oklch

oklch(54.2% 0.056 307.3)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B0DAC4

D9AFC5

Analogous

B0D9AF

B0DAC4

AFD9D9

Triadic

B0DAC4

C4AFD9

D9C4AF

Split-Comp.

B0DAC4

D9AFD9

D9AFB0

Tetradic

B0DAC4

AFB0D9

D9AFC5

D9D9AF

Contrast Matrix WCAG 2.1 Contrast

B0DAC4	E7DEB3	FFB284	B76D84	786789
—	1.1 Fail	1.1 Fail	2.5 Fail	3.3 AA Large
1.1 Fail	—	1.3 Fail	2.8 Fail	3.8 AA Large
1.1 Fail	1.3 Fail	—	2.2 Fail	2.9 Fail
2.5 Fail	2.8 Fail	2.2 Fail	—	1.3 Fail
3.3 AA Large	3.8 AA Large	2.9 Fail	1.3 Fail	—

White BG

1.5Fail

1.4Fail

1.8Fail

3.8AA Large

5.1AA

Black BG

13.7AAA

15.5AAA

12.0AAA

5.5AA

4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C3C9

E3E3BD

DEDD8F

97967E

717081

Deuteranopia

C0BDCB

E4E4C0

E2E892

9BA17D

72737F

Tritanopia

B2CECE

E7C6C7

FB989A

B37A79

777A79

Achromatopsia

CBCBCB

DCDCDC

C4C4C4

868686

707070

Shades & Tints Shades & Tints

#B0DAC4

Dark

Light

#E7DEB3

Dark

Light

#FFB284

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b0dac4;
  --color-2: #e7deb3;
  --color-3: #ffb284;
  --color-4: #b76d84;
  --color-5: #786789;
}

SCSS

$color-1: #b0dac4;
$color-2: #e7deb3;
$color-3: #ffb284;
$color-4: #b76d84;
$color-5: #786789;

TAILWIND

colors: {
  'brand-1': '#b0dac4',
  'brand-2': '#e7deb3',
  'brand-3': '#ffb284',
  'brand-4': '#b76d84',
  'brand-5': '#786789',
}

RGB Array

[176, 218, 196], [231, 222, 179], [255, 178, 132], [183, 109, 132], [120, 103, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #B0DAC4, #E7DEB3, #FFB284, #B76D84, #786789 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: #b0dac4; --color-2: #e7deb3; --color-3: #ffb284; --color-4: #b76d84; --color-5: #786789. 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