← Back to Editor

#9DC153 · #EAB624 · #F47028 · #EC164C · #4B3A1C

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#9DC153

Grass Green · DarkSeaGreen · Olive Green

HEX
#9DC153
RGB
rgb(157, 193, 83)
HSL
hsl(80, 47%, 54%)
HSB
hsb(80, 57%, 76%)
CMYK
cmyk(19%, 0%, 57%, 24%)
Oklch
oklch(76.2% 0.144 124.9)

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

#EAB624

Ginger · GoldenRod · Sunflower

HEX
#EAB624
RGB
rgb(234, 182, 36)
HSL
hsl(44, 82%, 53%)
HSB
hsb(44, 85%, 92%)
CMYK
cmyk(0%, 22%, 85%, 8%)
Oklch
oklch(80.2% 0.156 86.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#F47028

Tangerine · Tomato · Warm Sun

HEX
#F47028
RGB
rgb(244, 112, 40)
HSL
hsl(21, 90%, 56%)
HSB
hsb(21, 84%, 96%)
CMYK
cmyk(0%, 54%, 84%, 4%)
Oklch
oklch(69.4% 0.181 45.0)

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

#EC164C

Vermilion · Crimson · Passion Red

HEX
#EC164C
RGB
rgb(236, 22, 76)
HSL
hsl(345, 85%, 51%)
HSB
hsb(345, 91%, 93%)
CMYK
cmyk(0%, 91%, 68%, 7%)
Oklch
oklch(60.4% 0.234 16.9)

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

#4B3A1C

Ochre · DarkOliveGreen · Cinnamon

HEX
#4B3A1C
RGB
rgb(75, 58, 28)
HSL
hsl(38, 46%, 20%)
HSB
hsb(38, 63%, 29%)
CMYK
cmyk(0%, 23%, 63%, 71%)
Oklch
oklch(36.0% 0.051 80.2)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9DC153
7753C1

Analogous

C1AE53
9DC153
65C153

Triadic

9DC153
539CC1
C1539C

Split-Comp.

9DC153
5365C1
AE53C1

Tetradic

9DC153
53C1AE
7753C1
C15365

Contrast Matrix WCAG 2.1 Contrast

9DC153
EAB624
F47028
EC164C
4B3A1C
—
1.1
Fail
1.4
Fail
2.1
Fail
5.3
AA
1.1
Fail
—
1.6
Fail
2.3
Fail
5.8
AA
1.4
Fail
1.6
Fail
—
1.5
Fail
3.7
AA Large
2.1
Fail
2.3
Fail
1.5
Fail
—
2.5
Fail
5.3
AA
5.8
AA
3.7
AA Large
2.5
Fail
—
White BG
2.1Fail
1.9Fail
2.9Fail
4.4AA Large
10.9AAA
Black BG
10.2AAA
11.2AAA
7.2AAA
4.8AA
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ADAD6E
D3D347
BBBA39
8F8D3F
444323

Deuteranopia

ABA874
D7DA50
C3CC3E
9CAC3C
454625

Tritanopia

9F8387
E76369
ED474A
E13532
4A292A

Achromatopsia

AAAAAA
B5B5B5
8F8F8F
5C5C5C
3C3C3C

Shades & Tints Shades & Tints

#9DC153

Dark
Light

#EAB624

Dark
Light

#F47028

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9dc153;
  --color-2: #eab624;
  --color-3: #f47028;
  --color-4: #ec164c;
  --color-5: #4b3a1c;
}

SCSS

$color-1: #9dc153;
$color-2: #eab624;
$color-3: #f47028;
$color-4: #ec164c;
$color-5: #4b3a1c;

TAILWIND

colors: {
  'brand-1': '#9dc153',
  'brand-2': '#eab624',
  'brand-3': '#f47028',
  'brand-4': '#ec164c',
  'brand-5': '#4b3a1c',
}

RGB Array

[157, 193, 83], [234, 182, 36], [244, 112, 40], [236, 22, 76], [75, 58, 28]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9DC153, #EAB624, #F47028, #EC164C, #4B3A1C 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: #9dc153; --color-2: #eab624; --color-3: #f47028; --color-4: #ec164c; --color-5: #4b3a1c. 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