← Back to Editor

#7F9D85 · #B2817A · #E15232 · #403436 · #2D2727

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 LibraryData Visualization

Color Details Color Details

#7F9D85

Celadon · Gray · Olive Green

HEX
#7F9D85
RGB
rgb(127, 157, 133)
HSL
hsl(132, 13%, 56%)
HSB
hsb(132, 19%, 62%)
CMYK
cmyk(19%, 0%, 15%, 38%)
Oklch
oklch(66.6% 0.049 150.9)

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

#B2817A

Crimson · Gray · Passion Red

HEX
#B2817A
RGB
rgb(178, 129, 122)
HSL
hsl(7, 27%, 59%)
HSB
hsb(7, 31%, 70%)
CMYK
cmyk(0%, 28%, 31%, 30%)
Oklch
oklch(65.0% 0.062 28.0)

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

#E15232

Vermilion · Chocolate · Passion Red

HEX
#E15232
RGB
rgb(225, 82, 50)
HSL
hsl(11, 74%, 54%)
HSB
hsb(11, 78%, 88%)
CMYK
cmyk(0%, 64%, 78%, 12%)
Oklch
oklch(62.7% 0.184 34.1)

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

#403436

Crimson · DarkSlateGray · Wine Red

HEX
#403436
RGB
rgb(64, 52, 54)
HSL
hsl(350, 10%, 23%)
HSB
hsb(350, 19%, 25%)
CMYK
cmyk(0%, 19%, 16%, 75%)
Oklch
oklch(33.9% 0.017 6.8)

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

#2D2727

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#2D2727
RGB
rgb(45, 39, 39)
HSL
hsl(0, 7%, 16%)
HSB
hsb(0, 13%, 18%)
CMYK
cmyk(0%, 13%, 13%, 82%)
Oklch
oklch(27.9% 0.009 17.7)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7F9D85
9D8098

Analogous

899D80
7F9D85
809D95

Triadic

7F9D85
86809D
9D8680

Split-Comp.

7F9D85
95809D
9D8089

Tetradic

7F9D85
80899D
9D8098
9D9580

Contrast Matrix WCAG 2.1 Contrast

7F9D85
B2817A
E15232
403436
2D2727
—
1.1
Fail
1.3
Fail
4.0
AA Large
4.9
AA
1.1
Fail
—
1.2
Fail
3.6
AA Large
4.4
AA Large
1.3
Fail
1.2
Fail
—
3.1
AA Large
3.8
AA Large
4.0
AA Large
3.6
AA Large
3.1
AA Large
—
1.2
Fail
4.9
AA
4.4
AA Large
3.8
AA Large
1.2
Fail
—
White BG
3.0Fail
3.3AA Large
3.9AA Large
11.9AAA
14.7AAA
Black BG
7.1AAA
6.3AA
5.5AA
1.8Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8C8B
9D9C7C
A3A23A
3B3B36
2A2A27

Deuteranopia

8A888C
A0A37C
ABB63C
3C3C35
2B2B27

Tritanopia

818F90
B07D7D
DA4041
3F3535
2D2727

Achromatopsia

919191
8F8F8F
797979
383838
292929

Shades & Tints Shades & Tints

#7F9D85

Dark
Light

#B2817A

Dark
Light

#E15232

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7f9d85;
  --color-2: #b2817a;
  --color-3: #e15232;
  --color-4: #403436;
  --color-5: #2d2727;
}

SCSS

$color-1: #7f9d85;
$color-2: #b2817a;
$color-3: #e15232;
$color-4: #403436;
$color-5: #2d2727;

TAILWIND

colors: {
  'brand-1': '#7f9d85',
  'brand-2': '#b2817a',
  'brand-3': '#e15232',
  'brand-4': '#403436',
  'brand-5': '#2d2727',
}

RGB Array

[127, 157, 133], [178, 129, 122], [225, 82, 50], [64, 52, 54], [45, 39, 39]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7F9D85, #B2817A, #E15232, #403436, #2D2727 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #7f9d85; --color-2: #b2817a; --color-3: #e15232; --color-4: #403436; --color-5: #2d2727. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. 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