← Back to Editor

#A4AB76 · #858A63 · #612F2F · #B22636 · #FC586C

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

#A4AB76

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A4AB76
RGB
rgb(164, 171, 118)
HSL
hsl(68, 24%, 57%)
HSB
hsb(68, 31%, 67%)
CMYK
cmyk(4%, 0%, 31%, 33%)
Oklch
oklch(72.2% 0.073 114.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#858A63

Autumn Sage · Gray · Honey Gold

HEX
#858A63
RGB
rgb(133, 138, 99)
HSL
hsl(68, 16%, 46%)
HSB
hsb(68, 28%, 54%)
CMYK
cmyk(4%, 0%, 28%, 46%)
Oklch
oklch(61.9% 0.056 114.0)

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

#612F2F

Crimson · DarkOliveGreen · Wine Red

HEX
#612F2F
RGB
rgb(97, 47, 47)
HSL
hsl(0, 35%, 28%)
HSB
hsb(0, 52%, 38%)
CMYK
cmyk(0%, 52%, 52%, 62%)
Oklch
oklch(37.2% 0.073 21.2)

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

#B22636

Vermilion · Brown · Passion Red

HEX
#B22636
RGB
rgb(178, 38, 54)
HSL
hsl(353, 65%, 42%)
HSB
hsb(353, 79%, 70%)
CMYK
cmyk(0%, 79%, 70%, 30%)
Oklch
oklch(50.3% 0.175 20.7)

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

#FC586C

Peach Pink · Tomato · Coral Red

HEX
#FC586C
RGB
rgb(252, 88, 108)
HSL
hsl(353, 96%, 67%)
HSB
hsb(353, 65%, 99%)
CMYK
cmyk(0%, 65%, 57%, 1%)
Oklch
oklch(68.5% 0.199 17.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A4AB76
7E77AC

Analogous

AC9877
A4AB76
8AAC77

Triadic

A4AB76
77A5AC
AC77A5

Split-Comp.

A4AB76
778AAC
9877AC

Tetradic

A4AB76
77AC98
7E77AC
AC778A

Contrast Matrix WCAG 2.1 Contrast

A4AB76
858A63
612F2F
B22636
FC586C
—
1.5
Fail
4.4
AA Large
2.7
Fail
1.3
Fail
1.5
Fail
—
3.0
Fail
1.8
Fail
1.2
Fail
4.4
AA Large
3.0
Fail
—
1.6
Fail
3.5
AA Large
2.7
Fail
1.8
Fail
1.6
Fail
—
2.1
Fail
1.3
Fail
1.2
Fail
3.5
AA Large
2.1
Fail
—
White BG
2.4Fail
3.6AA Large
10.7AAA
6.5AA
3.1AA Large
Black BG
8.7AAA
5.8AA
2.0Fail
3.2AA Large
6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A783
87876C
4B4B2F
757432
B5B467

Deuteranopia

A7A686
87876F
4E522F
7E8831
BFCB66

Tritanopia

A48D8F
857476
5E2F2F
AB2F2E
F46363

Achromatopsia

A3A3A3
848484
3E3E3E
525252
8B8B8B

Shades & Tints Shades & Tints

#A4AB76

Dark
Light

#858A63

Dark
Light

#612F2F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a4ab76;
  --color-2: #858a63;
  --color-3: #612f2f;
  --color-4: #b22636;
  --color-5: #fc586c;
}

SCSS

$color-1: #a4ab76;
$color-2: #858a63;
$color-3: #612f2f;
$color-4: #b22636;
$color-5: #fc586c;

TAILWIND

colors: {
  'brand-1': '#a4ab76',
  'brand-2': '#858a63',
  'brand-3': '#612f2f',
  'brand-4': '#b22636',
  'brand-5': '#fc586c',
}

RGB Array

[164, 171, 118], [133, 138, 99], [97, 47, 47], [178, 38, 54], [252, 88, 108]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A4AB76, #858A63, #612F2F, #B22636, #FC586C 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: #a4ab76; --color-2: #858a63; --color-3: #612f2f; --color-4: #b22636; --color-5: #fc586c. 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