← Back to Editor

#82857A · #F7CB8E · #E29F44 · #D45037 · #2A2A1E

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

#82857A

Ink Gray · Gray · Warm Gray

HEX
#82857A
RGB
rgb(130, 133, 122)
HSL
hsl(76, 4%, 50%)
HSB
hsb(76, 8%, 52%)
CMYK
cmyk(2%, 0%, 8%, 48%)
Oklch
oklch(61.1% 0.017 119.3)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#F7CB8E

Goose Yellow · Khaki · Peach Orange

HEX
#F7CB8E
RGB
rgb(247, 203, 142)
HSL
hsl(35, 87%, 76%)
HSB
hsb(35, 43%, 97%)
CMYK
cmyk(0%, 18%, 43%, 3%)
Oklch
oklch(86.7% 0.092 75.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#E29F44

Ginger · SandyBrown · Warm Sun

HEX
#E29F44
RGB
rgb(226, 159, 68)
HSL
hsl(35, 73%, 58%)
HSB
hsb(35, 70%, 89%)
CMYK
cmyk(0%, 30%, 70%, 11%)
Oklch
oklch(75.1% 0.132 71.4)

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

#D45037

Vermilion · Chocolate · Passion Red

HEX
#D45037
RGB
rgb(212, 80, 55)
HSL
hsl(10, 65%, 52%)
HSB
hsb(10, 74%, 83%)
CMYK
cmyk(0%, 62%, 74%, 17%)
Oklch
oklch(60.4% 0.172 32.8)

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

#2A2A1E

Autumn Sage · DarkSlateGray · Amber Gold

HEX
#2A2A1E
RGB
rgb(42, 42, 30)
HSL
hsl(60, 17%, 14%)
HSB
hsb(60, 29%, 16%)
CMYK
cmyk(0%, 0%, 29%, 84%)
Oklch
oklch(28.1% 0.021 107.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

82857A
7D7A85

Analogous

85827A
82857A
7D857A

Triadic

82857A
7A8285
857A82

Split-Comp.

82857A
7A7D85
827A85

Tetradic

82857A
7A8582
7D7A85
857A7D

Contrast Matrix WCAG 2.1 Contrast

82857A
F7CB8E
E29F44
D45037
2A2A1E
—
2.5
Fail
1.7
Fail
1.1
Fail
3.9
AA Large
2.5
Fail
—
1.5
Fail
2.8
Fail
9.6
AAA
1.7
Fail
1.5
Fail
—
1.9
Fail
6.4
AA
1.1
Fail
2.8
Fail
1.9
Fail
—
3.5
AA Large
3.9
AA Large
9.6
AAA
6.4
AA
3.5
AA Large
—
White BG
3.8AA Large
1.5Fail
2.3Fail
4.2AA Large
14.5AAA
Black BG
5.6AA
13.9AAA
9.3AAA
5.0AA
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

83837D
E4E49D
C5C45A
9B9A3D
2A2A21

Deuteranopia

83837D
E7EAA0
C9CE5F
A3AC3F
2A2A22

Tritanopia

827F7F
F5A8AB
DF6B6F
CD4243
2A2324

Achromatopsia

838383
D1D1D1
A9A9A9
757575
292929

Shades & Tints Shades & Tints

#82857A

Dark
Light

#F7CB8E

Dark
Light

#E29F44

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #82857a;
  --color-2: #f7cb8e;
  --color-3: #e29f44;
  --color-4: #d45037;
  --color-5: #2a2a1e;
}

SCSS

$color-1: #82857a;
$color-2: #f7cb8e;
$color-3: #e29f44;
$color-4: #d45037;
$color-5: #2a2a1e;

TAILWIND

colors: {
  'brand-1': '#82857a',
  'brand-2': '#f7cb8e',
  'brand-3': '#e29f44',
  'brand-4': '#d45037',
  'brand-5': '#2a2a1e',
}

RGB Array

[130, 133, 122], [247, 203, 142], [226, 159, 68], [212, 80, 55], [42, 42, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #82857A, #F7CB8E, #E29F44, #D45037, #2A2A1E 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: #82857a; --color-2: #f7cb8e; --color-3: #e29f44; --color-4: #d45037; --color-5: #2a2a1e. 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