← Back to Editor

#B0BC96 · #D59C55 · #996B5B · #825C5B · #FE724E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B0BC96

Willow Green · DarkGray · Apple Green

HEX
#B0BC96
RGB
rgb(176, 188, 150)
HSL
hsl(79, 22%, 66%)
HSB
hsb(79, 20%, 74%)
CMYK
cmyk(6%, 0%, 20%, 26%)
Oklch
oklch(77.6% 0.054 121.9)

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

#D59C55

Ginger · SandyBrown · Warm Sun

HEX
#D59C55
RGB
rgb(213, 156, 85)
HSL
hsl(33, 60%, 58%)
HSB
hsb(33, 60%, 84%)
CMYK
cmyk(0%, 27%, 60%, 16%)
Oklch
oklch(73.3% 0.111 70.6)

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

#996B5B

Tangerine · Gray · Amber Brown

HEX
#996B5B
RGB
rgb(153, 107, 91)
HSL
hsl(15, 25%, 48%)
HSB
hsb(15, 41%, 60%)
CMYK
cmyk(0%, 30%, 41%, 40%)
Oklch
oklch(57.1% 0.064 40.0)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#825C5B

Crimson · DimGray · Passion Red

HEX
#825C5B
RGB
rgb(130, 92, 91)
HSL
hsl(2, 18%, 43%)
HSB
hsb(2, 30%, 51%)
CMYK
cmyk(0%, 29%, 30%, 49%)
Oklch
oklch(51.4% 0.050 20.6)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#FE724E

Peach Pink · Coral · Coral Red

HEX
#FE724E
RGB
rgb(254, 114, 78)
HSL
hsl(12, 99%, 65%)
HSB
hsb(12, 69%, 100%)
CMYK
cmyk(0%, 55%, 69%, 0%)
Oklch
oklch(71.5% 0.179 35.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B0BC96
A195BB

Analogous

BBB495
B0BC96
9CBB95

Triadic

B0BC96
95AFBB
BB95AF

Split-Comp.

B0BC96
959CBB
B495BB

Tetradic

B0BC96
95BBB4
A195BB
BB959C

Contrast Matrix WCAG 2.1 Contrast

B0BC96
D59C55
996B5B
825C5B
FE724E
—
1.2
Fail
2.3
Fail
2.9
Fail
1.4
Fail
1.2
Fail
—
1.9
Fail
2.4
Fail
1.1
Fail
2.3
Fail
1.9
Fail
—
1.3
Fail
1.7
Fail
2.9
Fail
2.4
Fail
1.3
Fail
—
2.1
Fail
1.4
Fail
1.1
Fail
1.7
Fail
2.1
Fail
—
White BG
2.0Fail
2.4Fail
4.6AA
5.8AA
2.7Fail
Black BG
10.5AAA
8.7AAA
4.6AA
3.6AA Large
7.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B59F
BCBC66
85855F
72715B
C1C057

Deuteranopia

B5B4A1
C0C46A
888B60
74775B
CAD459

Tritanopia

B1A6A8
D27477
976263
805B5B
F75E5F

Achromatopsia

B4B4B4
A5A5A5
777777
676767
989898

Shades & Tints Shades & Tints

#B0BC96

Dark
Light

#D59C55

Dark
Light

#996B5B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b0bc96;
  --color-2: #d59c55;
  --color-3: #996b5b;
  --color-4: #825c5b;
  --color-5: #fe724e;
}

SCSS

$color-1: #b0bc96;
$color-2: #d59c55;
$color-3: #996b5b;
$color-4: #825c5b;
$color-5: #fe724e;

TAILWIND

colors: {
  'brand-1': '#b0bc96',
  'brand-2': '#d59c55',
  'brand-3': '#996b5b',
  'brand-4': '#825c5b',
  'brand-5': '#fe724e',
}

RGB Array

[176, 188, 150], [213, 156, 85], [153, 107, 91], [130, 92, 91], [254, 114, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B0BC96, #D59C55, #996B5B, #825C5B, #FE724E is ideal for: corporate websites, product showcases, portfolios. 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: #b0bc96; --color-2: #d59c55; --color-3: #996b5b; --color-4: #825c5b; --color-5: #fe724e. 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 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