← Back to Editor

#E3FAB4 · #FF8739 · #FB1963 · #24183C · #B6F897

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

#E3FAB4

Willow Green · Wheat · Mint Green

HEX
#E3FAB4
RGB
rgb(227, 250, 180)
HSL
hsl(80, 88%, 84%)
HSB
hsb(80, 28%, 98%)
CMYK
cmyk(9%, 0%, 28%, 2%)
Oklch
oklch(95.2% 0.093 122.9)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#FF8739

Apricot · Coral · Warm Sun

HEX
#FF8739
RGB
rgb(255, 135, 57)
HSL
hsl(24, 100%, 61%)
HSB
hsb(24, 78%, 100%)
CMYK
cmyk(0%, 47%, 78%, 0%)
Oklch
oklch(74.5% 0.170 49.9)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#FB1963

Dark Violet · DeepPink · Rose Pink

HEX
#FB1963
RGB
rgb(251, 25, 99)
HSL
hsl(340, 97%, 54%)
HSB
hsb(340, 90%, 98%)
CMYK
cmyk(0%, 90%, 61%, 2%)
Oklch
oklch(63.6% 0.246 11.7)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#24183C

Deep Indigo · MidnightBlue · Dark Purple

HEX
#24183C
RGB
rgb(36, 24, 60)
HSL
hsl(260, 43%, 16%)
HSB
hsb(260, 60%, 24%)
CMYK
cmyk(40%, 60%, 0%, 76%)
Oklch
oklch(24.5% 0.067 296.5)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#B6F897

Emerald · LightGreen · Apple Green

HEX
#B6F897
RGB
rgb(182, 248, 151)
HSL
hsl(101, 87%, 78%)
HSB
hsb(101, 39%, 97%)
CMYK
cmyk(27%, 0%, 39%, 3%)
Oklch
oklch(91.3% 0.143 136.2)

Traditional「Emerald」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3FAB4
CAB2FA

Analogous

FAEEB2
E3FAB4
BEFAB2

Triadic

E3FAB4
B2E2FA
FAB2E2

Split-Comp.

E3FAB4
B2BEFA
EEB2FA

Tetradic

E3FAB4
B2FAEE
CAB2FA
FAB2BE

Contrast Matrix WCAG 2.1 Contrast

E3FAB4
FF8739
FB1963
24183C
B6F897
—
2.1
Fail
3.4
AA Large
14.6
AAA
1.1
Fail
2.1
Fail
—
1.6
Fail
6.9
AA
1.9
Fail
3.4
AA Large
1.6
Fail
—
4.3
AA Large
3.1
AA Large
14.6
AAA
6.9
AA
4.3
AA Large
—
13.3
AAA
1.1
Fail
1.9
Fail
3.1
AA Large
13.3
AAA
—
White BG
1.1Fail
2.4Fail
3.9AA Large
16.5AAA
1.2Fail
Black BG
18.6AAA
8.8AAA
5.4AA
1.3Fail
16.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDEDC5
CBCA4C
999751
1F1F33
D3D3AE

Deuteranopia

ECEAC9
D2DB50
A6B74D
202031
CFCAB4

Tritanopia

E4D2D5
F95B5E
F04340
232C2B
B9C1C5

Achromatopsia

EBEBEB
A2A2A2
656565
202020
D9D9D9

Shades & Tints Shades & Tints

#E3FAB4

Dark
Light

#FF8739

Dark
Light

#FB1963

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3fab4;
  --color-2: #ff8739;
  --color-3: #fb1963;
  --color-4: #24183c;
  --color-5: #b6f897;
}

SCSS

$color-1: #e3fab4;
$color-2: #ff8739;
$color-3: #fb1963;
$color-4: #24183c;
$color-5: #b6f897;

TAILWIND

colors: {
  'brand-1': '#e3fab4',
  'brand-2': '#ff8739',
  'brand-3': '#fb1963',
  'brand-4': '#24183c',
  'brand-5': '#b6f897',
}

RGB Array

[227, 250, 180], [255, 135, 57], [251, 25, 99], [36, 24, 60], [182, 248, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E3FAB4, #FF8739, #FB1963, #24183C, #B6F897 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: #e3fab4; --color-2: #ff8739; --color-3: #fb1963; --color-4: #24183c; --color-5: #b6f897. 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