← Back to Editor

#528E80 · #EEBC09 · #FC6151 · #283A39 · #2F131B

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 LibraryData Visualization

Color Details Color Details

#528E80

Mineral Blue · SlateGray · Mint Ice

HEX
#528E80
RGB
rgb(82, 142, 128)
HSL
hsl(166, 27%, 44%)
HSB
hsb(166, 42%, 56%)
CMYK
cmyk(42%, 0%, 10%, 44%)
Oklch
oklch(60.2% 0.067 177.2)

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

#EEBC09

Ochre · Orange · Honey Gold

HEX
#EEBC09
RGB
rgb(238, 188, 9)
HSL
hsl(47, 93%, 48%)
HSB
hsb(47, 96%, 93%)
CMYK
cmyk(0%, 21%, 96%, 7%)
Oklch
oklch(81.7% 0.166 89.1)

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

#FC6151

Peach Pink · Tomato · Coral Red

HEX
#FC6151
RGB
rgb(252, 97, 81)
HSL
hsl(6, 97%, 65%)
HSB
hsb(6, 68%, 99%)
CMYK
cmyk(0%, 62%, 68%, 1%)
Oklch
oklch(69.1% 0.192 28.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#283A39

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#283A39
RGB
rgb(40, 58, 57)
HSL
hsl(177, 18%, 19%)
HSB
hsb(177, 31%, 23%)
CMYK
cmyk(31%, 0%, 2%, 77%)
Oklch
oklch(33.3% 0.023 191.8)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#2F131B

Dark Violet · Black · Raspberry

HEX
#2F131B
RGB
rgb(47, 19, 27)
HSL
hsl(343, 42%, 13%)
HSB
hsb(343, 60%, 18%)
CMYK
cmyk(0%, 60%, 43%, 82%)
Oklch
oklch(23.2% 0.047 3.3)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

528E80
8E5260

Analogous

528E62
528E80
527E8E

Triadic

528E80
80528E
8E8052

Split-Comp.

528E80
8E527E
8E6252

Tetradic

528E80
62528E
8E5260
7E8E52

Contrast Matrix WCAG 2.1 Contrast

528E80
EEBC09
FC6151
283A39
2F131B
—
2.1
Fail
1.3
Fail
3.2
AA Large
4.5
AA
2.1
Fail
—
1.7
Fail
6.7
AA
9.6
AAA
1.3
Fail
1.7
Fail
—
4.0
AA Large
5.7
AA
3.2
AA Large
6.7
AA
4.0
AA Large
—
1.4
Fail
4.5
AA
9.6
AAA
5.7
AA
1.4
Fail
—
White BG
3.8AA Large
1.8Fail
3.0AA Large
12.0AAA
17.1AAA
Black BG
5.5AA
11.8AAA
7.0AA
1.8Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6C6D83
D8D834
B9B755
303039
232319

Deuteranopia

696484
DBDF3F
C2CD56
2F2D39
252719

Tritanopia

558687
EC575E
F45859
293939
2E1817

Achromatopsia

7A7A7A
B7B7B7
8E8E8E
353535
1C1C1C

Shades & Tints Shades & Tints

#528E80

Dark
Light

#EEBC09

Dark
Light

#FC6151

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #528e80;
  --color-2: #eebc09;
  --color-3: #fc6151;
  --color-4: #283a39;
  --color-5: #2f131b;
}

SCSS

$color-1: #528e80;
$color-2: #eebc09;
$color-3: #fc6151;
$color-4: #283a39;
$color-5: #2f131b;

TAILWIND

colors: {
  'brand-1': '#528e80',
  'brand-2': '#eebc09',
  'brand-3': '#fc6151',
  'brand-4': '#283a39',
  'brand-5': '#2f131b',
}

RGB Array

[82, 142, 128], [238, 188, 9], [252, 97, 81], [40, 58, 57], [47, 19, 27]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #528E80, #EEBC09, #FC6151, #283A39, #2F131B is ideal for: tech websites, dark mode UIs, game UIs, 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: #528e80; --color-2: #eebc09; --color-3: #fc6151; --color-4: #283a39; --color-5: #2f131b. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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