← Back to Editor

#365557 · #227772 · #80875E · #EB772E · #EF4718

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

#365557

Slate Blue · DarkSlateGray · Mint Ice

HEX
#365557
RGB
rgb(54, 85, 87)
HSL
hsl(184, 23%, 28%)
HSB
hsb(184, 38%, 34%)
CMYK
cmyk(38%, 2%, 0%, 66%)
Oklch
oklch(42.6% 0.037 201.0)

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

#227772

Mineral Blue · SeaGreen · Mint Ice

HEX
#227772
RGB
rgb(34, 119, 114)
HSL
hsl(176, 56%, 30%)
HSB
hsb(176, 71%, 47%)
CMYK
cmyk(71%, 0%, 4%, 53%)
Oklch
oklch(51.9% 0.079 189.3)

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

#80875E

Grass Green · Gray · Olive Green

HEX
#80875E
RGB
rgb(128, 135, 94)
HSL
hsl(70, 18%, 45%)
HSB
hsb(70, 30%, 53%)
CMYK
cmyk(5%, 0%, 30%, 47%)
Oklch
oklch(60.7% 0.059 116.1)

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

#EB772E

Tangerine · Chocolate · Warm Sun

HEX
#EB772E
RGB
rgb(235, 119, 46)
HSL
hsl(23, 83%, 55%)
HSB
hsb(23, 80%, 92%)
CMYK
cmyk(0%, 49%, 80%, 8%)
Oklch
oklch(69.2% 0.165 48.7)

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

#EF4718

Vermilion · OrangeRed · Passion Red

HEX
#EF4718
RGB
rgb(239, 71, 24)
HSL
hsl(13, 87%, 52%)
HSB
hsb(13, 90%, 94%)
CMYK
cmyk(0%, 70%, 90%, 6%)
Oklch
oklch(63.6% 0.211 35.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

365557
583937

Analogous

37584A
365557
374558

Triadic

365557
583756
565837

Split-Comp.

365557
583745
584A37

Tetradic

365557
4A3758
583937
455837

Contrast Matrix WCAG 2.1 Contrast

365557
227772
80875E
EB772E
EF4718
—
1.5
Fail
2.1
Fail
2.8
Fail
2.2
Fail
1.5
Fail
—
1.4
Fail
1.8
Fail
1.4
Fail
2.1
Fail
1.4
Fail
—
1.3
Fail
1.0
Fail
2.8
Fail
1.8
Fail
1.3
Fail
—
1.3
Fail
2.2
Fail
1.4
Fail
1.0
Fail
1.3
Fail
—
White BG
8.1AAA
5.3AA
3.8AA Large
2.9Fail
3.8AA Large
Black BG
2.6Fail
3.9AA Large
5.5AA
7.2AAA
5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

434457
474873
838368
B9B840
A6A523

Deuteranopia

423F56
423B74
83826A
C0C844
B0BD26

Tritanopia

385656
267474
807071
E54E51
E72C2E

Achromatopsia

4C4C4C
5D5D5D
808080
919191
747474

Shades & Tints Shades & Tints

#365557

Dark
Light

#227772

Dark
Light

#80875E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #365557;
  --color-2: #227772;
  --color-3: #80875e;
  --color-4: #eb772e;
  --color-5: #ef4718;
}

SCSS

$color-1: #365557;
$color-2: #227772;
$color-3: #80875e;
$color-4: #eb772e;
$color-5: #ef4718;

TAILWIND

colors: {
  'brand-1': '#365557',
  'brand-2': '#227772',
  'brand-3': '#80875e',
  'brand-4': '#eb772e',
  'brand-5': '#ef4718',
}

RGB Array

[54, 85, 87], [34, 119, 114], [128, 135, 94], [235, 119, 46], [239, 71, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #365557, #227772, #80875E, #EB772E, #EF4718 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: #365557; --color-2: #227772; --color-3: #80875e; --color-4: #eb772e; --color-5: #ef4718. 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