← Back to Editor

#E36D27 · #BF982F · #909E51 · #51A17C · #0C9F8F

space

A 5-color space 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

#E36D27

Tangerine · Chocolate · Warm Sun

HEX
#E36D27
RGB
rgb(227, 109, 39)
HSL
hsl(22, 77%, 52%)
HSB
hsb(22, 83%, 89%)
CMYK
cmyk(0%, 52%, 83%, 11%)
Oklch
oklch(66.5% 0.166 46.9)

TraditionalTangerine」· PaintWarm Sun」· Creative Blush Sunrise

#BF982F

Ochre · GoldenRod · Honey Gold

HEX
#BF982F
RGB
rgb(191, 152, 47)
HSL
hsl(44, 61%, 47%)
HSB
hsb(44, 75%, 75%)
CMYK
cmyk(0%, 20%, 75%, 25%)
Oklch
oklch(69.8% 0.126 87.4)

TraditionalOchre」· PaintHoney Gold」· Creative Blush Sunrise

#909E51

Grass Green · Gray · Olive Green

HEX
#909E51
RGB
rgb(144, 158, 81)
HSL
hsl(71, 32%, 47%)
HSB
hsb(71, 49%, 62%)
CMYK
cmyk(9%, 0%, 49%, 38%)
Oklch
oklch(67.1% 0.103 117.8)

TraditionalGrass Green」· PaintOlive Green」· Creative Blush Sunrise

#51A17C

Mineral Blue · MediumSeaGreen · Olive Green

HEX
#51A17C
RGB
rgb(81, 161, 124)
HSL
hsl(152, 33%, 47%)
HSB
hsb(152, 50%, 63%)
CMYK
cmyk(50%, 0%, 23%, 37%)
Oklch
oklch(64.8% 0.098 161.9)

TraditionalMineral Blue」· PaintOlive Green」· Creative Blush Sunrise

#0C9F8F

Mineral Blue · Teal · Mint Ice

HEX
#0C9F8F
RGB
rgb(12, 159, 143)
HSL
hsl(173, 86%, 34%)
HSB
hsb(173, 92%, 62%)
CMYK
cmyk(92%, 0%, 10%, 38%)
Oklch
oklch(63.1% 0.111 182.4)

TraditionalMineral Blue」· PaintMint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E36D27
269EE3

Analogous

E3263F
E36D27
E3CA26

Triadic

E36D27
26E36B
6B26E3

Split-Comp.

E36D27
26E3CA
263FE3

Tetradic

E36D27
3FE326
269EE3
CA26E3

Contrast Matrix WCAG 2.1 Contrast

E36D27
BF982F
909E51
51A17C
0C9F8F
1.2
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.2
Fail
1.1
Fail
1.1
Fail
1.2
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.2
Fail
1.1
Fail
1.1
Fail
White BG
3.2AA Large
2.7Fail
2.9Fail
3.1AA Large
3.3AA Large
Black BG
6.5AA
7.7AAA
7.2AAA
6.7AA
6.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B0AF38
AEAE48
969664
747485
4C4D93

Deuteranopia

B7C03C
B0B34F
959468
6F6987
433894

Tritanopia

DD4548
BD5C61
917276
558C8E
139697

Achromatopsia

888888
989898
919191
858585
717171

Shades & Tints Shades & Tints

#E36D27

Dark
Light

#BF982F

Dark
Light

#909E51

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e36d27;
  --color-2: #bf982f;
  --color-3: #909e51;
  --color-4: #51a17c;
  --color-5: #0c9f8f;
}

SCSS

$color-1: #e36d27;
$color-2: #bf982f;
$color-3: #909e51;
$color-4: #51a17c;
$color-5: #0c9f8f;

TAILWIND

colors: {
  'brand-1': '#e36d27',
  'brand-2': '#bf982f',
  'brand-3': '#909e51',
  'brand-4': '#51a17c',
  'brand-5': '#0c9f8f',
}

RGB Array

[227, 109, 39], [191, 152, 47], [144, 158, 81], [81, 161, 124], [12, 159, 143]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #E36D27, #BF982F, #909E51, #51A17C, #0C9F8F 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: #e36d27; --color-2: #bf982f; --color-3: #909e51; --color-4: #51a17c; --color-5: #0c9f8f. 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 space-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