← Back to Editor

#828587 · #A38778 · #C58A69 · #E68C5A · #BCE106

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

#828587

Ash · Gray · Warm Gray

HEX
#828587
RGB
rgb(130, 133, 135)
HSL
hsl(204, 2%, 52%)
HSB
hsb(204, 4%, 53%)
CMYK
cmyk(4%, 1%, 0%, 47%)
Oklch
oklch(61.5% 0.005 236.5)

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

#A38778

Tangerine · Gray · Warm Sun

HEX
#A38778
RGB
rgb(163, 135, 120)
HSL
hsl(21, 19%, 55%)
HSB
hsb(21, 26%, 64%)
CMYK
cmyk(0%, 17%, 26%, 36%)
Oklch
oklch(64.5% 0.041 49.8)

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

#C58A69

Tangerine · DarkSalmon · Warm Sun

HEX
#C58A69
RGB
rgb(197, 138, 105)
HSL
hsl(22, 44%, 59%)
HSB
hsb(22, 47%, 77%)
CMYK
cmyk(0%, 30%, 47%, 23%)
Oklch
oklch(68.4% 0.086 50.0)

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

#E68C5A

Apricot · SandyBrown · Warm Sun

HEX
#E68C5A
RGB
rgb(230, 140, 90)
HSL
hsl(21, 74%, 63%)
HSB
hsb(21, 61%, 90%)
CMYK
cmyk(0%, 39%, 61%, 10%)
Oklch
oklch(72.5% 0.128 48.9)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#BCE106

Grass Green · GreenYellow · Olive Green

HEX
#BCE106
RGB
rgb(188, 225, 6)
HSL
hsl(70, 95%, 45%)
HSB
hsb(70, 97%, 88%)
CMYK
cmyk(16%, 0%, 97%, 12%)
Oklch
oklch(85.2% 0.204 120.9)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

828587
878482

Analogous

828787
828587
828387

Triadic

828587
878285
858782

Split-Comp.

828587
878283
878782

Tetradic

828587
878287
878482
838782

Contrast Matrix WCAG 2.1 Contrast

828587
A38778
C58A69
E68C5A
BCE106
—
1.1
Fail
1.3
Fail
1.5
Fail
2.5
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
2.2
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
1.9
Fail
1.5
Fail
1.3
Fail
1.1
Fail
—
1.7
Fail
2.5
Fail
2.2
Fail
1.9
Fail
1.7
Fail
—
White BG
3.7AA Large
3.3AA Large
2.9Fail
2.5Fail
1.5Fail
Black BG
5.7AA
6.3AA
7.2AAA
8.3AAA
13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

838387
97977C
ABAB71
BFBE66
CCCC3B

Deuteranopia

838386
999B7D
AFB373
C4CB69
CAC748

Tritanopia

828686
A27E7F
C27779
E27072
BE656E

Achromatopsia

848484
8E8E8E
989898
A1A1A1
BDBDBD

Shades & Tints Shades & Tints

#828587

Dark
Light

#A38778

Dark
Light

#C58A69

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #828587;
  --color-2: #a38778;
  --color-3: #c58a69;
  --color-4: #e68c5a;
  --color-5: #bce106;
}

SCSS

$color-1: #828587;
$color-2: #a38778;
$color-3: #c58a69;
$color-4: #e68c5a;
$color-5: #bce106;

TAILWIND

colors: {
  'brand-1': '#828587',
  'brand-2': '#a38778',
  'brand-3': '#c58a69',
  'brand-4': '#e68c5a',
  'brand-5': '#bce106',
}

RGB Array

[130, 133, 135], [163, 135, 120], [197, 138, 105], [230, 140, 90], [188, 225, 6]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #828587, #A38778, #C58A69, #E68C5A, #BCE106 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: #828587; --color-2: #a38778; --color-3: #c58a69; --color-4: #e68c5a; --color-5: #bce106. 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