← Back to Editor

#057163 · #E6D99E · #773525 · #3B4636 · #182E3A

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

#057163

Mineral Blue · Teal · Peacock Green

HEX
#057163
RGB
rgb(5, 113, 99)
HSL
hsl(172, 92%, 23%)
HSB
hsb(172, 96%, 44%)
CMYK
cmyk(96%, 0%, 12%, 56%)
Oklch
oklch(49.2% 0.088 180.1)

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

#E6D99E

Goose Yellow · Khaki · Lemon Cream

HEX
#E6D99E
RGB
rgb(230, 217, 158)
HSL
hsl(49, 59%, 76%)
HSB
hsb(49, 31%, 90%)
CMYK
cmyk(0%, 6%, 31%, 10%)
Oklch
oklch(88.2% 0.078 97.2)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#773525

Crimson · Brown · Wine Red

HEX
#773525
RGB
rgb(119, 53, 37)
HSL
hsl(12, 53%, 31%)
HSB
hsb(12, 69%, 47%)
CMYK
cmyk(0%, 55%, 69%, 53%)
Oklch
oklch(41.5% 0.097 34.8)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#3B4636

Celadon · DarkSlateGray · Forest Green

HEX
#3B4636
RGB
rgb(59, 70, 54)
HSL
hsl(101, 13%, 24%)
HSB
hsb(101, 23%, 27%)
CMYK
cmyk(16%, 0%, 23%, 73%)
Oklch
oklch(37.9% 0.030 135.9)

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

#182E3A

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX
#182E3A
RGB
rgb(24, 46, 58)
HSL
hsl(201, 41%, 16%)
HSB
hsb(201, 59%, 23%)
CMYK
cmyk(59%, 21%, 0%, 77%)
Oklch
oklch(28.9% 0.036 233.7)

Traditional「Slate Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

057163
710513

Analogous

05712C
057163
054971

Triadic

057163
620571
716205

Split-Comp.

057163
710549
712C05

Tetradic

057163
2C0571
710513
497105

Contrast Matrix WCAG 2.1 Contrast

057163
E6D99E
773525
3B4636
182E3A
—
4.2
AA Large
1.5
Fail
1.7
Fail
2.4
Fail
4.2
AA Large
—
6.4
AA
7.0
AA
9.9
AAA
1.5
Fail
6.4
AA
—
1.1
Fail
1.6
Fail
1.7
Fail
7.0
AA
1.1
Fail
—
1.4
Fail
2.4
Fail
9.9
AAA
1.6
Fail
1.4
Fail
—
White BG
5.9AA
1.4Fail
9.1AAA
9.9AAA
14.1AAA
Black BG
3.5AA Large
14.8AAA
2.3Fail
2.1Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

343566
E0E0AC
5A5A29
40403A
222237

Deuteranopia

2E2567
E1E2B0
5E632A
3F3E3B
201F36

Tritanopia

0A696A
E5B8BA
742C2D
3C3D3E
193534

Achromatopsia

4F4F4F
D6D6D6
474747
414141
292929

Shades & Tints Shades & Tints

#057163

Dark
Light

#E6D99E

Dark
Light

#773525

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #057163;
  --color-2: #e6d99e;
  --color-3: #773525;
  --color-4: #3b4636;
  --color-5: #182e3a;
}

SCSS

$color-1: #057163;
$color-2: #e6d99e;
$color-3: #773525;
$color-4: #3b4636;
$color-5: #182e3a;

TAILWIND

colors: {
  'brand-1': '#057163',
  'brand-2': '#e6d99e',
  'brand-3': '#773525',
  'brand-4': '#3b4636',
  'brand-5': '#182e3a',
}

RGB Array

[5, 113, 99], [230, 217, 158], [119, 53, 37], [59, 70, 54], [24, 46, 58]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #057163, #E6D99E, #773525, #3B4636, #182E3A 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: #057163; --color-2: #e6d99e; --color-3: #773525; --color-4: #3b4636; --color-5: #182e3a. 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