← Back to Editor

#8C846A · #A59F82 · #FDFFC3 · #F33C33 · #C31D1D

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

#8C846A

Ochre · Gray · Honey Gold

HEX
#8C846A
RGB
rgb(140, 132, 106)
HSL
hsl(46, 14%, 48%)
HSB
hsb(46, 24%, 55%)
CMYK
cmyk(0%, 6%, 24%, 45%)
Oklch
oklch(61.3% 0.039 93.0)

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

#A59F82

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A59F82
RGB
rgb(165, 159, 130)
HSL
hsl(50, 16%, 58%)
HSB
hsb(50, 21%, 65%)
CMYK
cmyk(0%, 4%, 21%, 35%)
Oklch
oklch(70.0% 0.041 97.6)

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

#FDFFC3

Fresh Green · Bisque · Lemon Cream

HEX
#FDFFC3
RGB
rgb(253, 255, 195)
HSL
hsl(62, 100%, 88%)
HSB
hsb(62, 24%, 100%)
CMYK
cmyk(1%, 0%, 24%, 0%)
Oklch
oklch(98.4% 0.077 109.3)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F33C33

Vermilion · Tomato · Passion Red

HEX
#F33C33
RGB
rgb(243, 60, 51)
HSL
hsl(3, 89%, 58%)
HSB
hsb(3, 79%, 95%)
CMYK
cmyk(0%, 75%, 79%, 5%)
Oklch
oklch(63.5% 0.220 28.2)

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

#C31D1D

Vermilion · FireBrick · Passion Red

HEX
#C31D1D
RGB
rgb(195, 29, 29)
HSL
hsl(0, 74%, 44%)
HSB
hsb(0, 85%, 76%)
CMYK
cmyk(0%, 85%, 85%, 24%)
Oklch
oklch(52.5% 0.199 27.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C846A
69718C

Analogous

8C7269
8C846A
828C69

Triadic

8C846A
698C84
84698C

Split-Comp.

8C846A
69828C
72698C

Tetradic

8C846A
698C72
69718C
8C6982

Contrast Matrix WCAG 2.1 Contrast

8C846A
A59F82
FDFFC3
F33C33
C31D1D
—
1.4
Fail
3.6
AA Large
1.0
Fail
1.6
Fail
1.4
Fail
—
2.6
Fail
1.4
Fail
2.2
Fail
3.6
AA Large
2.6
Fail
—
3.7
AA Large
5.8
AA
1.0
Fail
1.4
Fail
3.7
AA Large
—
1.6
Fail
1.6
Fail
2.2
Fail
5.8
AA
1.6
Fail
—
White BG
3.7AA Large
2.7Fail
1.0Fail
3.8AA Large
6.0AA
Black BG
5.6AA
7.9AAA
20.3AAA
5.5AA
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

898870
A2A289
FEFED2
A4A235
7B7A1D

Deuteranopia

898A72
A3A38B
FEFED5
AEBC36
85911D

Tritanopia

8C7576
A58F90
FDDDE0
EA3737
BB1D1D

Achromatopsia

838383
9D9D9D
F8F8F8
727272
4F4F4F

Shades & Tints Shades & Tints

#8C846A

Dark
Light

#A59F82

Dark
Light

#FDFFC3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c846a;
  --color-2: #a59f82;
  --color-3: #fdffc3;
  --color-4: #f33c33;
  --color-5: #c31d1d;
}

SCSS

$color-1: #8c846a;
$color-2: #a59f82;
$color-3: #fdffc3;
$color-4: #f33c33;
$color-5: #c31d1d;

TAILWIND

colors: {
  'brand-1': '#8c846a',
  'brand-2': '#a59f82',
  'brand-3': '#fdffc3',
  'brand-4': '#f33c33',
  'brand-5': '#c31d1d',
}

RGB Array

[140, 132, 106], [165, 159, 130], [253, 255, 195], [243, 60, 51], [195, 29, 29]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8C846A, #A59F82, #FDFFC3, #F33C33, #C31D1D is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #8c846a; --color-2: #a59f82; --color-3: #fdffc3; --color-4: #f33c33; --color-5: #c31d1d. 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. 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