← Back to Editor

#58947B · #444A3C · #D08649 · #EFB345 · #E8DE49

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

#58947B

Mineral Blue · SlateGray · Olive Green

HEX
#58947B
RGB
rgb(88, 148, 123)
HSL
hsl(155, 25%, 46%)
HSB
hsb(155, 41%, 58%)
CMYK
cmyk(41%, 0%, 17%, 42%)
Oklch
oklch(61.8% 0.074 165.6)

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

#444A3C

Grass Green · DarkSlateGray · Forest Green

HEX
#444A3C
RGB
rgb(68, 74, 60)
HSL
hsl(86, 10%, 26%)
HSB
hsb(86, 19%, 29%)
CMYK
cmyk(8%, 0%, 19%, 71%)
Oklch
oklch(39.9% 0.024 126.4)

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

#D08649

Tangerine · Coral · Warm Sun

HEX
#D08649
RGB
rgb(208, 134, 73)
HSL
hsl(27, 59%, 55%)
HSB
hsb(27, 65%, 82%)
CMYK
cmyk(0%, 36%, 65%, 18%)
Oklch
oklch(68.5% 0.119 58.4)

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

#EFB345

Ginger · SandyBrown · Warm Sun

HEX
#EFB345
RGB
rgb(239, 179, 69)
HSL
hsl(39, 84%, 60%)
HSB
hsb(39, 71%, 94%)
CMYK
cmyk(0%, 25%, 71%, 6%)
Oklch
oklch(80.3% 0.141 79.1)

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

#E8DE49

Autumn Sage · SandyBrown · Sunflower

HEX
#E8DE49
RGB
rgb(232, 222, 73)
HSL
hsl(56, 78%, 60%)
HSB
hsb(56, 69%, 91%)
CMYK
cmyk(0%, 4%, 69%, 9%)
Oklch
oklch(88.3% 0.163 105.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

58947B
935870

Analogous

58935D
58947B
588E93

Triadic

58947B
7A5893
937A58

Split-Comp.

58947B
93588E
935D58

Tetradic

58947B
5D5893
935870
8E9358

Contrast Matrix WCAG 2.1 Contrast

58947B
444A3C
D08649
EFB345
E8DE49
—
2.6
Fail
1.2
Fail
1.9
Fail
2.5
Fail
2.6
Fail
—
3.1
AA Large
4.9
AA
6.5
AA
1.2
Fail
3.1
AA Large
—
1.6
Fail
2.1
Fail
1.9
Fail
4.9
AA
1.6
Fail
—
1.3
Fail
2.5
Fail
6.5
AA
2.1
Fail
1.3
Fail
—
White BG
3.5AA Large
9.2AAA
2.9Fail
1.9Fail
1.4Fail
Black BG
5.9AA
2.3Fail
7.2AAA
11.2AAA
15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

727381
47473F
B0AF58
D5D460
E4E46D

Deuteranopia

6F6A83
464640
B4BA5B
D9DD66
E4E576

Tritanopia

5B8687
444243
CC6366
EC7579
E78A90

Achromatopsia

7F7F7F
474747
959595
B8B8B8
D0D0D0

Shades & Tints Shades & Tints

#58947B

Dark
Light

#444A3C

Dark
Light

#D08649

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #58947b;
  --color-2: #444a3c;
  --color-3: #d08649;
  --color-4: #efb345;
  --color-5: #e8de49;
}

SCSS

$color-1: #58947b;
$color-2: #444a3c;
$color-3: #d08649;
$color-4: #efb345;
$color-5: #e8de49;

TAILWIND

colors: {
  'brand-1': '#58947b',
  'brand-2': '#444a3c',
  'brand-3': '#d08649',
  'brand-4': '#efb345',
  'brand-5': '#e8de49',
}

RGB Array

[88, 148, 123], [68, 74, 60], [208, 134, 73], [239, 179, 69], [232, 222, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #58947B, #444A3C, #D08649, #EFB345, #E8DE49 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: #58947b; --color-2: #444a3c; --color-3: #d08649; --color-4: #efb345; --color-5: #e8de49. 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