← Back to Editor

#7C9C65 · #9B9A65 · #B58251 · #CF3436 · #2E1415

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

#7C9C65

Celadon · Gray · Olive Green

HEX
#7C9C65
RGB
rgb(124, 156, 101)
HSL
hsl(95, 22%, 50%)
HSB
hsb(95, 35%, 61%)
CMYK
cmyk(21%, 0%, 35%, 39%)
Oklch
oklch(65.4% 0.086 132.9)

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

#9B9A65

Autumn Sage · Gray · Honey Gold

HEX
#9B9A65
RGB
rgb(155, 154, 101)
HSL
hsl(59, 21%, 50%)
HSB
hsb(59, 35%, 61%)
CMYK
cmyk(0%, 1%, 35%, 39%)
Oklch
oklch(67.4% 0.072 107.3)

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

#B58251

Tangerine · Sienna · Warm Sun

HEX
#B58251
RGB
rgb(181, 130, 81)
HSL
hsl(29, 40%, 51%)
HSB
hsb(29, 55%, 71%)
CMYK
cmyk(0%, 28%, 55%, 29%)
Oklch
oklch(64.7% 0.091 63.9)

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

#CF3436

Vermilion · Crimson · Passion Red

HEX
#CF3436
RGB
rgb(207, 52, 54)
HSL
hsl(359, 62%, 51%)
HSB
hsb(359, 75%, 81%)
CMYK
cmyk(0%, 75%, 74%, 19%)
Oklch
oklch(56.6% 0.192 25.2)

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

#2E1415

Crimson · Black · Deep Berry

HEX
#2E1415
RGB
rgb(46, 20, 21)
HSL
hsl(358, 39%, 13%)
HSB
hsb(358, 57%, 18%)
CMYK
cmyk(0%, 57%, 54%, 82%)
Oklch
oklch(23.0% 0.043 18.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7C9C65
84639C

Analogous

979C63
7C9C65
639C68

Triadic

7C9C65
637B9C
9C637B

Split-Comp.

7C9C65
68639C
9C6397

Tetradic

7C9C65
63979C
84639C
9C6863

Contrast Matrix WCAG 2.1 Contrast

7C9C65
9B9A65
B58251
CF3436
2E1415
—
1.1
Fail
1.1
Fail
1.6
Fail
5.5
AA
1.1
Fail
—
1.1
Fail
1.7
Fail
5.9
AA
1.1
Fail
1.1
Fail
—
1.5
Fail
5.1
AA
1.6
Fail
1.7
Fail
1.5
Fail
—
3.4
AA Large
5.5
AA
5.9
AA
5.1
AA
3.4
AA Large
—
White BG
3.1AA Large
2.9Fail
3.3AA Large
5.0AA
17.1AAA
Black BG
6.8AA
7.2AAA
6.3AA
4.2AA Large
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8A72
9B9B72
9F9E5D
8C8A36
232315

Deuteranopia

888675
9B9B75
A2A660
95A035
242615

Tritanopia

7E7D7F
9B7C7E
B26668
C73535
2D1515

Achromatopsia

8C8C8C
949494
8C8C8C
636363
1C1C1C

Shades & Tints Shades & Tints

#7C9C65

Dark
Light

#9B9A65

Dark
Light

#B58251

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7c9c65;
  --color-2: #9b9a65;
  --color-3: #b58251;
  --color-4: #cf3436;
  --color-5: #2e1415;
}

SCSS

$color-1: #7c9c65;
$color-2: #9b9a65;
$color-3: #b58251;
$color-4: #cf3436;
$color-5: #2e1415;

TAILWIND

colors: {
  'brand-1': '#7c9c65',
  'brand-2': '#9b9a65',
  'brand-3': '#b58251',
  'brand-4': '#cf3436',
  'brand-5': '#2e1415',
}

RGB Array

[124, 156, 101], [155, 154, 101], [181, 130, 81], [207, 52, 54], [46, 20, 21]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7C9C65, #9B9A65, #B58251, #CF3436, #2E1415 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: #7c9c65; --color-2: #9b9a65; --color-3: #b58251; --color-4: #cf3436; --color-5: #2e1415. 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