← Back to Editor

#E6A21C · #C45627 · #875945 · #458779 · #B5A855

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

#E6A21C

Ginger · GoldenRod · Sunflower

HEX
#E6A21C
RGB
rgb(230, 162, 28)
HSL
hsl(40, 80%, 51%)
HSB
hsb(40, 88%, 90%)
CMYK
cmyk(0%, 30%, 88%, 10%)
Oklch
oklch(75.9% 0.153 77.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#C45627

Tangerine · Chocolate · Amber Brown

HEX
#C45627
RGB
rgb(196, 86, 39)
HSL
hsl(18, 67%, 46%)
HSB
hsb(18, 80%, 77%)
CMYK
cmyk(0%, 56%, 80%, 23%)
Oklch
oklch(58.6% 0.153 41.6)

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

#875945

Tangerine · Sienna · Amber Brown

HEX
#875945
RGB
rgb(135, 89, 69)
HSL
hsl(18, 32%, 40%)
HSB
hsb(18, 49%, 53%)
CMYK
cmyk(0%, 34%, 49%, 47%)
Oklch
oklch(50.9% 0.068 44.3)

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

#458779

Mineral Blue · SeaGreen · Mint Ice

HEX
#458779
RGB
rgb(69, 135, 121)
HSL
hsl(167, 32%, 40%)
HSB
hsb(167, 49%, 53%)
CMYK
cmyk(49%, 0%, 10%, 47%)
Oklch
oklch(57.6% 0.071 178.1)

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

#B5A855

Autumn Sage · Tan · Sunflower

HEX
#B5A855
RGB
rgb(181, 168, 85)
HSL
hsl(52, 39%, 52%)
HSB
hsb(52, 53%, 71%)
CMYK
cmyk(0%, 7%, 53%, 29%)
Oklch
oklch(72.5% 0.106 100.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E6A21C
1E61E6

Analogous

E63F1E
E6A21C
C5E61E

Triadic

E6A21C
1EE6A3
A31EE6

Split-Comp.

E6A21C
1EC5E6
3F1EE6

Tetradic

E6A21C
1EE63F
1E61E6
E61EC5

Contrast Matrix WCAG 2.1 Contrast

E6A21C
C45627
875945
458779
B5A855
—
2.0
Fail
2.7
Fail
1.9
Fail
1.1
Fail
2.0
Fail
—
1.3
Fail
1.1
Fail
1.8
Fail
2.7
Fail
1.3
Fail
—
1.4
Fail
2.5
Fail
1.9
Fail
1.1
Fail
1.4
Fail
—
1.7
Fail
1.1
Fail
1.8
Fail
2.5
Fail
1.7
Fail
—
White BG
2.2Fail
4.5AA Large
5.9AA
4.2AA Large
2.4Fail
Black BG
9.5AAA
4.7AA
3.5AA Large
5.0AA
8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C83C
949332
73734A
62627C
AFAF69

Deuteranopia

CDD244
9BA335
76794B
5E597D
B0B16E

Tritanopia

E3565C
BF3B3D
854E4F
487F80
B4797C

Achromatopsia

A7A7A7
727272
646464
727272
A2A2A2

Shades & Tints Shades & Tints

#E6A21C

Dark
Light

#C45627

Dark
Light

#875945

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e6a21c;
  --color-2: #c45627;
  --color-3: #875945;
  --color-4: #458779;
  --color-5: #b5a855;
}

SCSS

$color-1: #e6a21c;
$color-2: #c45627;
$color-3: #875945;
$color-4: #458779;
$color-5: #b5a855;

TAILWIND

colors: {
  'brand-1': '#e6a21c',
  'brand-2': '#c45627',
  'brand-3': '#875945',
  'brand-4': '#458779',
  'brand-5': '#b5a855',
}

RGB Array

[230, 162, 28], [196, 86, 39], [135, 89, 69], [69, 135, 121], [181, 168, 85]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E6A21C, #C45627, #875945, #458779, #B5A855 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: #e6a21c; --color-2: #c45627; --color-3: #875945; --color-4: #458779; --color-5: #b5a855. 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