← Back to Editor

#94A16D · #BC7853 · #D83228 · #962E27 · #362826

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

#94A16D

Grass Green · Gray · Olive Green

HEX
#94A16D
RGB
rgb(148, 161, 109)
HSL
hsl(75, 22%, 53%)
HSB
hsb(75, 32%, 63%)
CMYK
cmyk(8%, 0%, 32%, 37%)
Oklch
oklch(68.5% 0.074 119.8)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#BC7853

Tangerine · Chocolate · Warm Sun

HEX
#BC7853
RGB
rgb(188, 120, 83)
HSL
hsl(21, 44%, 53%)
HSB
hsb(21, 56%, 74%)
CMYK
cmyk(0%, 36%, 56%, 26%)
Oklch
oklch(63.6% 0.100 48.8)

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

#D83228

Vermilion · Crimson · Passion Red

HEX
#D83228
RGB
rgb(216, 50, 40)
HSL
hsl(3, 69%, 50%)
HSB
hsb(3, 81%, 85%)
CMYK
cmyk(0%, 77%, 81%, 15%)
Oklch
oklch(57.9% 0.204 28.7)

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

#962E27

Crimson · Brown · Wine Red

HEX
#962E27
RGB
rgb(150, 46, 39)
HSL
hsl(4, 59%, 37%)
HSB
hsb(4, 74%, 59%)
CMYK
cmyk(0%, 69%, 74%, 41%)
Oklch
oklch(45.8% 0.140 27.8)

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

#362826

Crimson · DarkSlateGray · Deep Berry

HEX
#362826
RGB
rgb(54, 40, 38)
HSL
hsl(8, 17%, 18%)
HSB
hsb(8, 30%, 21%)
CMYK
cmyk(0%, 26%, 30%, 79%)
Oklch
oklch(29.2% 0.021 27.8)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

94A16D
7A6DA2

Analogous

A2946D
94A16D
7AA26D

Triadic

94A16D
6D94A2
A26D94

Split-Comp.

94A16D
6D7AA2
946DA2

Tetradic

94A16D
6DA294
7A6DA2
A26D7A

Contrast Matrix WCAG 2.1 Contrast

94A16D
BC7853
D83228
962E27
362826
—
1.3
Fail
1.7
Fail
2.8
Fail
5.1
AA
1.3
Fail
—
1.4
Fail
2.2
Fail
4.0
AA Large
1.7
Fail
1.4
Fail
—
1.6
Fail
3.0
Fail
2.8
Fail
2.2
Fail
1.6
Fail
—
1.8
Fail
5.1
AA
4.0
AA Large
3.0
Fail
1.8
Fail
—
White BG
2.8Fail
3.5AA Large
4.8AA
7.7AAA
14.1AAA
Black BG
7.6AAA
5.9AA
4.4AA Large
2.7Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9A7A
9F9E5C
908F2A
696829
303026

Deuteranopia

99987D
A3A85E
9AA62B
6F7729
313227

Tritanopia

958486
B96365
D02C2D
912A2A
352727

Achromatopsia

979797
888888
626262
4C4C4C
2C2C2C

Shades & Tints Shades & Tints

#94A16D

Dark
Light

#BC7853

Dark
Light

#D83228

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #94a16d;
  --color-2: #bc7853;
  --color-3: #d83228;
  --color-4: #962e27;
  --color-5: #362826;
}

SCSS

$color-1: #94a16d;
$color-2: #bc7853;
$color-3: #d83228;
$color-4: #962e27;
$color-5: #362826;

TAILWIND

colors: {
  'brand-1': '#94a16d',
  'brand-2': '#bc7853',
  'brand-3': '#d83228',
  'brand-4': '#962e27',
  'brand-5': '#362826',
}

RGB Array

[148, 161, 109], [188, 120, 83], [216, 50, 40], [150, 46, 39], [54, 40, 38]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #94A16D, #BC7853, #D83228, #962E27, #362826 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: #94a16d; --color-2: #bc7853; --color-3: #d83228; --color-4: #962e27; --color-5: #362826. 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