← Back to Editor

#608E86 · #059A9A · #8C9C0F · #D86B44 · #AD8374

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

#608E86

Mineral Blue · SlateGray · Mint Ice

HEX
#608E86
RGB
rgb(96, 142, 134)
HSL
hsl(170, 19%, 47%)
HSB
hsb(170, 32%, 56%)
CMYK
cmyk(32%, 0%, 6%, 44%)
Oklch
oklch(61.1% 0.052 182.5)

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

#059A9A

Lake Blue · Teal · Mint Ice

HEX
#059A9A
RGB
rgb(5, 154, 154)
HSL
hsl(180, 94%, 31%)
HSB
hsb(180, 97%, 60%)
CMYK
cmyk(97%, 0%, 0%, 40%)
Oklch
oklch(62.2% 0.105 194.8)

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

#8C9C0F

Autumn Sage · Olive · Honey Gold

HEX
#8C9C0F
RGB
rgb(140, 156, 15)
HSL
hsl(67, 82%, 34%)
HSB
hsb(67, 90%, 61%)
CMYK
cmyk(10%, 0%, 90%, 39%)
Oklch
oklch(65.7% 0.148 116.9)

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

#D86B44

Tangerine · Chocolate · Warm Sun

HEX
#D86B44
RGB
rgb(216, 107, 68)
HSL
hsl(16, 65%, 56%)
HSB
hsb(16, 69%, 85%)
CMYK
cmyk(0%, 50%, 69%, 15%)
Oklch
oklch(64.9% 0.147 39.9)

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

#AD8374

Tangerine · Gray · Warm Sun

HEX
#AD8374
RGB
rgb(173, 131, 116)
HSL
hsl(16, 26%, 57%)
HSB
hsb(16, 33%, 68%)
CMYK
cmyk(0%, 24%, 33%, 32%)
Oklch
oklch(64.7% 0.057 40.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

608E86
8F6169

Analogous

618F70
608E86
617F8F

Triadic

608E86
87618F
8F8761

Split-Comp.

608E86
8F617F
8F7061

Tetradic

608E86
70618F
8F6169
7F8F61

Contrast Matrix WCAG 2.1 Contrast

608E86
059A9A
8C9C0F
D86B44
AD8374
—
1.1
Fail
1.2
Fail
1.1
Fail
1.1
Fail
1.1
Fail
—
1.1
Fail
1.0
Fail
1.0
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.1
Fail
—
1.0
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.0
Fail
—
White BG
3.7AA Large
3.4AA Large
3.1AA Large
3.4AA Large
3.3AA Large
Black BG
5.7AA
6.1AA
6.9AA
6.1AA
6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

747488
46479A
939331
A9A84D
9B9A78

Deuteranopia

716E88
3D329A
929139
AFB750
9DA078

Tritanopia

62898A
0C9A9A
8D4C52
D35557
AB7A7B

Achromatopsia

7F7F7F
6D6D6D
878787
878787
8E8E8E

Shades & Tints Shades & Tints

#608E86

Dark
Light

#059A9A

Dark
Light

#8C9C0F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #608e86;
  --color-2: #059a9a;
  --color-3: #8c9c0f;
  --color-4: #d86b44;
  --color-5: #ad8374;
}

SCSS

$color-1: #608e86;
$color-2: #059a9a;
$color-3: #8c9c0f;
$color-4: #d86b44;
$color-5: #ad8374;

TAILWIND

colors: {
  'brand-1': '#608e86',
  'brand-2': '#059a9a',
  'brand-3': '#8c9c0f',
  'brand-4': '#d86b44',
  'brand-5': '#ad8374',
}

RGB Array

[96, 142, 134], [5, 154, 154], [140, 156, 15], [216, 107, 68], [173, 131, 116]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #608E86, #059A9A, #8C9C0F, #D86B44, #AD8374 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: #608e86; --color-2: #059a9a; --color-3: #8c9c0f; --color-4: #d86b44; --color-5: #ad8374. 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