← Back to Editor

#36AB8A · #3F4233 · #8EB315 · #CAE62E · #FF5500

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#36AB8A

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#36AB8A
RGB
rgb(54, 171, 138)
HSL
hsl(163, 52%, 44%)
HSB
hsb(163, 68%, 67%)
CMYK
cmyk(68%, 0%, 19%, 33%)
Oklch
oklch(66.8% 0.115 170.2)

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

#3F4233

Grass Green · DarkSlateGray · Forest Green

HEX
#3F4233
RGB
rgb(63, 66, 51)
HSL
hsl(72, 13%, 23%)
HSB
hsb(72, 23%, 26%)
CMYK
cmyk(5%, 0%, 23%, 74%)
Oklch
oklch(37.1% 0.025 116.8)

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

#8EB315

Grass Green · Olive · Forest Green

HEX
#8EB315
RGB
rgb(142, 179, 21)
HSL
hsl(74, 79%, 39%)
HSB
hsb(74, 88%, 70%)
CMYK
cmyk(21%, 0%, 88%, 30%)
Oklch
oklch(71.4% 0.171 123.5)

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

#CAE62E

Autumn Sage · GreenYellow · Sunflower

HEX
#CAE62E
RGB
rgb(202, 230, 46)
HSL
hsl(69, 79%, 54%)
HSB
hsb(69, 80%, 90%)
CMYK
cmyk(12%, 0%, 80%, 10%)
Oklch
oklch(87.5% 0.193 118.6)

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

#FF5500

Tangerine · OrangeRed · Amber Brown

HEX
#FF5500
RGB
rgb(255, 85, 0)
HSL
hsl(20, 100%, 50%)
HSB
hsb(20, 100%, 100%)
CMYK
cmyk(0%, 67%, 100%, 0%)
Oklch
oklch(67.6% 0.217 38.8)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

36AB8A
AB3657

Analogous

36AB4F
36AB8A
3691AB

Triadic

36AB8A
8936AB
AB8936

Split-Comp.

36AB8A
AB3691
AB4F36

Tetradic

36AB8A
4F36AB
AB3657
91AB36

Contrast Matrix WCAG 2.1 Contrast

36AB8A
3F4233
8EB315
CAE62E
FF5500
—
3.6
AA Large
1.2
Fail
2.0
Fail
1.1
Fail
3.6
AA Large
—
4.2
AA Large
7.3
AAA
3.2
AA Large
1.2
Fail
4.2
AA Large
—
1.7
Fail
1.3
Fail
2.0
Fail
7.3
AAA
1.7
Fail
—
2.3
Fail
1.1
Fail
3.2
AA Large
1.3
Fail
2.3
Fail
—
White BG
2.9Fail
10.3AAA
2.4Fail
1.4Fail
3.2AA Large
Black BG
7.3AAA
2.0Fail
8.6AAA
14.9AAA
6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

696A92
404037
9E9E3B
D6D65B
B5B415

Deuteranopia

625994
404038
9C9944
D5D265
BFCC1A

Tritanopia

3C989A
3F393A
905960
CB7E85
F72528

Achromatopsia

848484
3F3F3F
969696
C9C9C9
7E7E7E

Shades & Tints Shades & Tints

#36AB8A

Dark
Light

#3F4233

Dark
Light

#8EB315

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #36ab8a;
  --color-2: #3f4233;
  --color-3: #8eb315;
  --color-4: #cae62e;
  --color-5: #ff5500;
}

SCSS

$color-1: #36ab8a;
$color-2: #3f4233;
$color-3: #8eb315;
$color-4: #cae62e;
$color-5: #ff5500;

TAILWIND

colors: {
  'brand-1': '#36ab8a',
  'brand-2': '#3f4233',
  'brand-3': '#8eb315',
  'brand-4': '#cae62e',
  'brand-5': '#ff5500',
}

RGB Array

[54, 171, 138], [63, 66, 51], [142, 179, 21], [202, 230, 46], [255, 85, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #36AB8A, #3F4233, #8EB315, #CAE62E, #FF5500 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #36ab8a; --color-2: #3f4233; --color-3: #8eb315; --color-4: #cae62e; --color-5: #ff5500. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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