← Back to Editor

#53A61C · #F7E0AE · #FF6E08 · #EA0244 · #3C3658

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 AppData Visualization

Color Details Color Details

#53A61C

Pine Green · LimeGreen · Forest Green

HEX
#53A61C
RGB
rgb(83, 166, 28)
HSL
hsl(96, 71%, 38%)
HSB
hsb(96, 83%, 65%)
CMYK
cmyk(50%, 0%, 83%, 35%)
Oklch
oklch(64.8% 0.183 136.5)

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

#F7E0AE

Goose Yellow · Wheat · Lemon Cream

HEX
#F7E0AE
RGB
rgb(247, 224, 174)
HSL
hsl(41, 82%, 83%)
HSB
hsb(41, 30%, 97%)
CMYK
cmyk(0%, 9%, 30%, 3%)
Oklch
oklch(91.3% 0.069 86.1)

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

#FF6E08

Tangerine · OrangeRed · Warm Sun

HEX
#FF6E08
RGB
rgb(255, 110, 8)
HSL
hsl(25, 100%, 52%)
HSB
hsb(25, 97%, 100%)
CMYK
cmyk(0%, 57%, 97%, 0%)
Oklch
oklch(70.6% 0.198 45.7)

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

#EA0244

Dark Violet · Crimson · Camellia

HEX
#EA0244
RGB
rgb(234, 2, 68)
HSL
hsl(343, 98%, 46%)
HSB
hsb(343, 99%, 92%)
CMYK
cmyk(0%, 99%, 71%, 8%)
Oklch
oklch(59.4% 0.238 18.2)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#3C3658

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#3C3658
RGB
rgb(60, 54, 88)
HSL
hsl(251, 24%, 28%)
HSB
hsb(251, 39%, 35%)
CMYK
cmyk(32%, 39%, 0%, 65%)
Oklch
oklch(35.5% 0.058 291.2)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

53A61C
6F1CA6

Analogous

98A61C
53A61C
1CA62A

Triadic

53A61C
1C53A6
A61C53

Split-Comp.

53A61C
2A1CA6
A61C98

Tetradic

53A61C
1C98A6
6F1CA6
A62A1C

Contrast Matrix WCAG 2.1 Contrast

53A61C
F7E0AE
FF6E08
EA0244
3C3658
—
2.4
Fail
1.1
Fail
1.5
Fail
3.7
AA Large
2.4
Fail
—
2.2
Fail
3.5
AA Large
8.7
AAA
1.1
Fail
2.2
Fail
—
1.6
Fail
4.0
AA Large
1.5
Fail
3.5
AA Large
1.6
Fail
—
2.5
Fail
3.7
AA Large
8.7
AAA
4.0
AA Large
2.5
Fail
—
White BG
3.1AA Large
1.3Fail
2.8Fail
4.6AA
11.3AAA
Black BG
6.8AA
16.2AAA
7.5AAA
4.6AA
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

77783D
EDEDBA
C0BF21
868334
393950

Deuteranopia

726C45
EEF0BD
C9D427
93A430
3A3A4E

Tritanopia

57585E
F6C4C6
F83438
DE2725
3C4948

Achromatopsia

7D7D7D
E1E1E1
8E8E8E
4F4F4F
3C3C3C

Shades & Tints Shades & Tints

#53A61C

Dark
Light

#F7E0AE

Dark
Light

#FF6E08

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #53a61c;
  --color-2: #f7e0ae;
  --color-3: #ff6e08;
  --color-4: #ea0244;
  --color-5: #3c3658;
}

SCSS

$color-1: #53a61c;
$color-2: #f7e0ae;
$color-3: #ff6e08;
$color-4: #ea0244;
$color-5: #3c3658;

TAILWIND

colors: {
  'brand-1': '#53a61c',
  'brand-2': '#f7e0ae',
  'brand-3': '#ff6e08',
  'brand-4': '#ea0244',
  'brand-5': '#3c3658',
}

RGB Array

[83, 166, 28], [247, 224, 174], [255, 110, 8], [234, 2, 68], [60, 54, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #53A61C, #F7E0AE, #FF6E08, #EA0244, #3C3658 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #53a61c; --color-2: #f7e0ae; --color-3: #ff6e08; --color-4: #ea0244; --color-5: #3c3658. 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. 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 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