← Back to Editor

#E77533 · #FCF38B · #B0B77A · #0B5E56 · #03241D

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

#E77533

Tangerine · Chocolate · Warm Sun

HEX
#E77533
RGB
rgb(231, 117, 51)
HSL
hsl(22, 79%, 55%)
HSB
hsb(22, 78%, 91%)
CMYK
cmyk(0%, 49%, 78%, 9%)
Oklch
oklch(68.4% 0.161 47.4)

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

#FCF38B

Fresh Green · Khaki · Lemon Cream

HEX
#FCF38B
RGB
rgb(252, 243, 139)
HSL
hsl(55, 95%, 77%)
HSB
hsb(55, 45%, 99%)
CMYK
cmyk(0%, 4%, 45%, 1%)
Oklch
oklch(95.0% 0.126 104.2)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#B0B77A

Autumn Sage · Tan · Sunflower

HEX
#B0B77A
RGB
rgb(176, 183, 122)
HSL
hsl(67, 30%, 60%)
HSB
hsb(67, 33%, 72%)
CMYK
cmyk(4%, 0%, 33%, 28%)
Oklch
oklch(75.9% 0.082 113.7)

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

#0B5E56

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#0B5E56
RGB
rgb(11, 94, 86)
HSL
hsl(174, 79%, 21%)
HSB
hsb(174, 88%, 37%)
CMYK
cmyk(88%, 0%, 9%, 63%)
Oklch
oklch(43.5% 0.073 184.5)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#03241D

Mineral Blue · Black · Peacock Green

HEX
#03241D
RGB
rgb(3, 36, 29)
HSL
hsl(167, 85%, 8%)
HSB
hsb(167, 92%, 14%)
CMYK
cmyk(92%, 0%, 19%, 86%)
Oklch
oklch(23.4% 0.041 175.7)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E77533
32A4E7

Analogous

E7324A
E77533
E7CF32

Triadic

E77533
32E774
7432E7

Split-Comp.

E77533
32E7CF
324AE7

Tetradic

E77533
4AE732
32A4E7
CF32E7

Contrast Matrix WCAG 2.1 Contrast

E77533
FCF38B
B0B77A
0B5E56
03241D
—
2.6
Fail
1.4
Fail
2.5
Fail
5.5
AA
2.6
Fail
—
1.9
Fail
6.7
AA
14.4
AAA
1.4
Fail
1.9
Fail
—
3.6
AA Large
7.8
AAA
2.5
Fail
6.7
AA
3.6
AA Large
—
2.2
Fail
5.5
AA
14.4
AAA
7.8
AAA
2.2
Fail
—
White BG
3.0AA Large
1.1Fail
2.1Fail
7.6AAA
16.5AAA
Black BG
7.0AA
18.3AAA
9.9AAA
2.7Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B543
F8F8A4
B3B389
2F3058
11121F

Deuteranopia

BCC547
F9F9AA
B3B28C
2A2458
0F0D1F

Tritanopia

E15052
FCB8BC
B09497
0F595A
052020

Achromatopsia

909090
EAEAEA
AEAEAE
444444
191919

Shades & Tints Shades & Tints

#E77533

Dark
Light

#FCF38B

Dark
Light

#B0B77A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e77533;
  --color-2: #fcf38b;
  --color-3: #b0b77a;
  --color-4: #0b5e56;
  --color-5: #03241d;
}

SCSS

$color-1: #e77533;
$color-2: #fcf38b;
$color-3: #b0b77a;
$color-4: #0b5e56;
$color-5: #03241d;

TAILWIND

colors: {
  'brand-1': '#e77533',
  'brand-2': '#fcf38b',
  'brand-3': '#b0b77a',
  'brand-4': '#0b5e56',
  'brand-5': '#03241d',
}

RGB Array

[231, 117, 51], [252, 243, 139], [176, 183, 122], [11, 94, 86], [3, 36, 29]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E77533, #FCF38B, #B0B77A, #0B5E56, #03241D 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: #e77533; --color-2: #fcf38b; --color-3: #b0b77a; --color-4: #0b5e56; --color-5: #03241d. 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