#B5BBA3 + #8F9186 + #D97C7C + #F78365 + #FFA15E · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B5BBA3

Willow Green · DarkGray · Apple Green

HEX

#B5BBA3

RGB

rgb(181, 187, 163)

HSL

hsl(75, 15%, 69%)

HSB

hsb(75, 13%, 73%)

CMYK

cmyk(3%, 0%, 13%, 27%)

Oklch

oklch(78.1% 0.034 118.6)

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

#8F9186

Ash · Gray · Warm Gray

HEX

#8F9186

RGB

rgb(143, 145, 134)

HSL

hsl(71, 5%, 55%)

HSB

hsb(71, 8%, 57%)

CMYK

cmyk(1%, 0%, 8%, 43%)

Oklch

oklch(65.2% 0.016 115.2)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#D97C7C

Peach Pink · LightCoral · Coral Red

HEX

#D97C7C

RGB

rgb(217, 124, 124)

HSL

hsl(0, 55%, 67%)

HSB

hsb(0, 43%, 85%)

CMYK

cmyk(0%, 43%, 43%, 15%)

Oklch

oklch(68.8% 0.116 20.5)

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

#F78365

Peach Pink · Salmon · Coral Red

HEX

#F78365

RGB

rgb(247, 131, 101)

HSL

hsl(12, 90%, 68%)

HSB

hsb(12, 59%, 97%)

CMYK

cmyk(0%, 47%, 59%, 3%)

Oklch

oklch(73.3% 0.149 35.5)

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

#FFA15E

Apricot · SandyBrown · Warm Sun

HEX

#FFA15E

RGB

rgb(255, 161, 94)

HSL

hsl(25, 100%, 68%)

HSB

hsb(25, 63%, 100%)

CMYK

cmyk(0%, 37%, 63%, 0%)

Oklch

oklch(79.1% 0.139 54.6)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B5BBA3

AAA4BC

Analogous

BCB6A4

B5BBA3

AABCA4

Triadic

B5BBA3

A4B6BC

BCA4B6

Split-Comp.

B5BBA3

A4AABC

B6A4BC

Tetradic

B5BBA3

A4BCB6

AAA4BC

BCA4AA

Contrast Matrix WCAG 2.1 Contrast

B5BBA3	8F9186	D97C7C	F78365	FFA15E
—	1.6 Fail	1.5 Fail	1.3 Fail	1.0 Fail
1.6 Fail	—	1.1 Fail	1.3 Fail	1.6 Fail
1.5 Fail	1.1 Fail	—	1.2 Fail	1.5 Fail
1.3 Fail	1.3 Fail	1.2 Fail	—	1.3 Fail
1.0 Fail	1.6 Fail	1.5 Fail	1.3 Fail	—

White BG

2.0Fail

3.2AA Large

2.9Fail

2.5Fail

2.0Fail

Black BG

10.6AAA

6.6AA

7.1AAA

8.4AAA

10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B8B8A9

909089

B1B07C

C5C46C

D6D56E

Deuteranopia

B7B7AA

909089

B6BD7C

CCD46E

DCE372

Tritanopia

B5ADAE

8F8B8B

D47C7C

F17273

FA7B7E

Achromatopsia

B6B6B6

8F8F8F

989898

A2A2A2

B5B5B5

Shades & Tints Shades & Tints

#B5BBA3

Dark

Light

#8F9186

Dark

Light

#D97C7C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b5bba3;
  --color-2: #8f9186;
  --color-3: #d97c7c;
  --color-4: #f78365;
  --color-5: #ffa15e;
}

SCSS

$color-1: #b5bba3;
$color-2: #8f9186;
$color-3: #d97c7c;
$color-4: #f78365;
$color-5: #ffa15e;

TAILWIND

colors: {
  'brand-1': '#b5bba3',
  'brand-2': '#8f9186',
  'brand-3': '#d97c7c',
  'brand-4': '#f78365',
  'brand-5': '#ffa15e',
}

RGB Array

[181, 187, 163], [143, 145, 134], [217, 124, 124], [247, 131, 101], [255, 161, 94]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #B5BBA3, #8F9186, #D97C7C, #F78365, #FFA15E 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: #b5bba3; --color-2: #8f9186; --color-3: #d97c7c; --color-4: #f78365; --color-5: #ffa15e. 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