← Back to Editor

#8A7F60 · #796A62 · #CC4C41 · #E6621C · #31828A

A 5-color palette 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

#8A7F60

Ochre · Gray · Honey Gold

HEX
#8A7F60
RGB
rgb(138, 127, 96)
HSL
hsl(44, 18%, 46%)
HSB
hsb(44, 30%, 54%)
CMYK
cmyk(0%, 8%, 30%, 46%)
Oklch
oklch(59.8% 0.046 90.8)

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

#796A62

Tangerine · DimGray · Amber Brown

HEX
#796A62
RGB
rgb(121, 106, 98)
HSL
hsl(21, 11%, 43%)
HSB
hsb(21, 19%, 47%)
CMYK
cmyk(0%, 12%, 19%, 53%)
Oklch
oklch(53.6% 0.023 49.9)

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

#CC4C41

Crimson · Chocolate · Passion Red

HEX
#CC4C41
RGB
rgb(204, 76, 65)
HSL
hsl(5, 58%, 53%)
HSB
hsb(5, 68%, 80%)
CMYK
cmyk(0%, 63%, 68%, 20%)
Oklch
oklch(58.8% 0.165 28.1)

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

#E6621C

Tangerine · Chocolate · Warm Sun

HEX
#E6621C
RGB
rgb(230, 98, 28)
HSL
hsl(21, 80%, 51%)
HSB
hsb(21, 88%, 90%)
CMYK
cmyk(0%, 57%, 88%, 10%)
Oklch
oklch(65.3% 0.180 43.5)

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

#31828A

Slate Blue · SteelBlue · Mint Ice

HEX
#31828A
RGB
rgb(49, 130, 138)
HSL
hsl(185, 48%, 37%)
HSB
hsb(185, 64%, 54%)
CMYK
cmyk(64%, 6%, 0%, 46%)
Oklch
oklch(56.1% 0.078 204.3)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8A7F60
606B8A

Analogous

8A6A60
8A7F60
818A60

Triadic

8A7F60
608A7F
7F608A

Split-Comp.

8A7F60
60818A
6A608A

Tetradic

8A7F60
608A6A
606B8A
8A6081

Contrast Matrix WCAG 2.1 Contrast

8A7F60
796A62
CC4C41
E6621C
31828A
—
1.3
Fail
1.1
Fail
1.2
Fail
1.1
Fail
1.3
Fail
—
1.2
Fail
1.5
Fail
1.2
Fail
1.1
Fail
1.2
Fail
—
1.3
Fail
1.0
Fail
1.2
Fail
1.5
Fail
1.3
Fail
—
1.3
Fail
1.1
Fail
1.2
Fail
1.0
Fail
1.3
Fail
—
White BG
4.0AA Large
5.2AA
4.5AA Large
3.4AA Large
4.5AA Large
Black BG
5.3AA
4.1AA Large
4.7AA
6.1AA
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

858568
737264
959344
ADAC2D
545588

Deuteranopia

868769
737464
9CA644
B5BE31
4F4988

Tritanopia

896D6F
786566
C64646
DF3A3D
358786

Achromatopsia

7F7F7F
6E6E6E
717171
818181
6B6B6B

Shades & Tints Shades & Tints

#8A7F60

Dark
Light

#796A62

Dark
Light

#CC4C41

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8a7f60;
  --color-2: #796a62;
  --color-3: #cc4c41;
  --color-4: #e6621c;
  --color-5: #31828a;
}

SCSS

$color-1: #8a7f60;
$color-2: #796a62;
$color-3: #cc4c41;
$color-4: #e6621c;
$color-5: #31828a;

TAILWIND

colors: {
  'brand-1': '#8a7f60',
  'brand-2': '#796a62',
  'brand-3': '#cc4c41',
  'brand-4': '#e6621c',
  'brand-5': '#31828a',
}

RGB Array

[138, 127, 96], [121, 106, 98], [204, 76, 65], [230, 98, 28], [49, 130, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8A7F60, #796A62, #CC4C41, #E6621C, #31828A 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: #8a7f60; --color-2: #796a62; --color-3: #cc4c41; --color-4: #e6621c; --color-5: #31828a. 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