← Back to Editor

#008E85 · #5F7876 · #846257 · #FF3505 · #81827C

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

#008E85

Mineral Blue · Teal · Mint Ice

HEX
#008E85
RGB
rgb(0, 142, 133)
HSL
hsl(176, 100%, 28%)
HSB
hsb(176, 100%, 56%)
CMYK
cmyk(100%, 0%, 6%, 44%)
Oklch
oklch(58.2% 0.102 187.0)

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

#5F7876

Mineral Blue · DimGray · Mint Ice

HEX
#5F7876
RGB
rgb(95, 120, 118)
HSL
hsl(175, 12%, 42%)
HSB
hsb(175, 21%, 47%)
CMYK
cmyk(21%, 0%, 2%, 53%)
Oklch
oklch(55.2% 0.029 190.3)

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

#846257

Tangerine · DimGray · Amber Brown

HEX
#846257
RGB
rgb(132, 98, 87)
HSL
hsl(15, 21%, 43%)
HSB
hsb(15, 34%, 52%)
CMYK
cmyk(0%, 26%, 34%, 48%)
Oklch
oklch(52.8% 0.048 38.7)

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

#FF3505

Vermilion · OrangeRed · Passion Red

HEX
#FF3505
RGB
rgb(255, 53, 5)
HSL
hsl(12, 100%, 51%)
HSB
hsb(12, 98%, 100%)
CMYK
cmyk(0%, 79%, 98%, 0%)
Oklch
oklch(64.8% 0.240 32.6)

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

#81827C

Ink Gray · Gray · Warm Gray

HEX
#81827C
RGB
rgb(129, 130, 124)
HSL
hsl(70, 2%, 50%)
HSB
hsb(70, 5%, 51%)
CMYK
cmyk(1%, 0%, 5%, 49%)
Oklch
oklch(60.4% 0.009 114.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

008E85
8F000A

Analogous

008F3E
008E85
00518F

Triadic

008E85
85008F
8F8500

Split-Comp.

008E85
8F0051
8F3E00

Tetradic

008E85
3E008F
8F000A
518F00

Contrast Matrix WCAG 2.1 Contrast

008E85
5F7876
846257
FF3505
81827C
—
1.2
Fail
1.3
Fail
1.1
Fail
1.0
Fail
1.2
Fail
—
1.1
Fail
1.3
Fail
1.2
Fail
1.3
Fail
1.1
Fail
—
1.5
Fail
1.4
Fail
1.1
Fail
1.3
Fail
1.5
Fail
—
1.1
Fail
1.0
Fail
1.2
Fail
1.4
Fail
1.1
Fail
—
White BG
4.0AA Large
4.7AA
5.4AA
3.6AA Large
3.9AA Large
Black BG
5.2AA
4.4AA Large
3.9AA Large
5.8AA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3D3F87
6A6A76
75755A
A8A611
81817D

Deuteranopia

352B88
686777
777A5A
B3C213
81817E

Tritanopia

078989
607777
825C5C
F51A1C
817F7F

Achromatopsia

636363
707070
6B6B6B
6C6C6C
818181

Shades & Tints Shades & Tints

#008E85

Dark
Light

#5F7876

Dark
Light

#846257

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #008e85;
  --color-2: #5f7876;
  --color-3: #846257;
  --color-4: #ff3505;
  --color-5: #81827c;
}

SCSS

$color-1: #008e85;
$color-2: #5f7876;
$color-3: #846257;
$color-4: #ff3505;
$color-5: #81827c;

TAILWIND

colors: {
  'brand-1': '#008e85',
  'brand-2': '#5f7876',
  'brand-3': '#846257',
  'brand-4': '#ff3505',
  'brand-5': '#81827c',
}

RGB Array

[0, 142, 133], [95, 120, 118], [132, 98, 87], [255, 53, 5], [129, 130, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #008E85, #5F7876, #846257, #FF3505, #81827C 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: #008e85; --color-2: #5f7876; --color-3: #846257; --color-4: #ff3505; --color-5: #81827c. 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