← Back to Editor

#8FB1AB · #BCBEA9 · #C0884B · #8C794F · #78734B

warm

A 5-color warm palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8FB1AB

Jade · DarkGray · Lake Green

HEX
#8FB1AB
RGB
rgb(143, 177, 171)
HSL
hsl(169, 18%, 63%)
HSB
hsb(169, 19%, 69%)
CMYK
cmyk(19%, 0%, 3%, 31%)
Oklch
oklch(73.3% 0.038 183.3)

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

#BCBEA9

Fresh Green · Silver · Sunflower

HEX
#BCBEA9
RGB
rgb(188, 190, 169)
HSL
hsl(66, 14%, 70%)
HSB
hsb(66, 11%, 75%)
CMYK
cmyk(1%, 0%, 11%, 25%)
Oklch
oklch(79.4% 0.029 111.5)

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

#C0884B

Ginger · Chocolate · Warm Sun

HEX
#C0884B
RGB
rgb(192, 136, 75)
HSL
hsl(31, 48%, 52%)
HSB
hsb(31, 61%, 75%)
CMYK
cmyk(0%, 29%, 61%, 25%)
Oklch
oklch(67.0% 0.104 66.8)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#8C794F

Ochre · DimGray · Honey Gold

HEX
#8C794F
RGB
rgb(140, 121, 79)
HSL
hsl(41, 28%, 43%)
HSB
hsb(41, 44%, 55%)
CMYK
cmyk(0%, 14%, 44%, 45%)
Oklch
oklch(58.3% 0.063 86.2)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#78734B

Autumn Sage · DimGray · Honey Gold

HEX
#78734B
RGB
rgb(120, 115, 75)
HSL
hsl(53, 23%, 38%)
HSB
hsb(53, 37%, 47%)
CMYK
cmyk(0%, 4%, 37%, 53%)
Oklch
oklch(55.0% 0.058 102.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8FB1AB
B29096

Analogous

90B29A
8FB1AB
90A7B2

Triadic

8FB1AB
AB90B2
B2AB90

Split-Comp.

8FB1AB
B290A7
B29A90

Tetradic

8FB1AB
9A90B2
B29096
A7B290

Contrast Matrix WCAG 2.1 Contrast

8FB1AB
BCBEA9
C0884B
8C794F
78734B
—
1.2
Fail
1.3
Fail
1.8
Fail
2.1
Fail
1.2
Fail
—
1.6
Fail
2.2
Fail
2.5
Fail
1.3
Fail
1.6
Fail
—
1.4
Fail
1.6
Fail
1.8
Fail
2.2
Fail
1.4
Fail
—
1.1
Fail
2.1
Fail
2.5
Fail
1.6
Fail
1.1
Fail
—
White BG
2.3Fail
1.9Fail
3.1AA Large
4.2AA Large
4.8AA
Black BG
9.0AAA
11.1AAA
6.9AA
5.0AA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9EAC
BDBDAE
A8A75A
848459
767655

Deuteranopia

9C99AD
BDBDAF
ABAF5D
85865C
767757

Tritanopia

91AEAE
BCB2B3
BD6568
8B6163
785C5E

Achromatopsia

A6A6A6
BBBBBB
929292
7A7A7A
707070

Shades & Tints Shades & Tints

#8FB1AB

Dark
Light

#BCBEA9

Dark
Light

#C0884B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8fb1ab;
  --color-2: #bcbea9;
  --color-3: #c0884b;
  --color-4: #8c794f;
  --color-5: #78734b;
}

SCSS

$color-1: #8fb1ab;
$color-2: #bcbea9;
$color-3: #c0884b;
$color-4: #8c794f;
$color-5: #78734b;

TAILWIND

colors: {
  'brand-1': '#8fb1ab',
  'brand-2': '#bcbea9',
  'brand-3': '#c0884b',
  'brand-4': '#8c794f',
  'brand-5': '#78734b',
}

RGB Array

[143, 177, 171], [188, 190, 169], [192, 136, 75], [140, 121, 79], [120, 115, 75]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #8FB1AB, #BCBEA9, #C0884B, #8C794F, #78734B is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #8fb1ab; --color-2: #bcbea9; --color-3: #c0884b; --color-4: #8c794f; --color-5: #78734b. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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. Restrained colors convey professionalism and trust. 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