← Back to Editor

#9FE3B6 · #FFF3BF · #7D0E0E · #E32222 · #FF4000

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

Color Details Color Details

#9FE3B6

Emerald · LightGreen · Apple Green

HEX
#9FE3B6
RGB
rgb(159, 227, 182)
HSL
hsl(140, 55%, 76%)
HSB
hsb(140, 30%, 89%)
CMYK
cmyk(30%, 0%, 20%, 11%)
Oklch
oklch(85.8% 0.093 155.0)

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

#FFF3BF

Goose Yellow · Bisque · Lemon Cream

HEX
#FFF3BF
RGB
rgb(255, 243, 191)
HSL
hsl(49, 100%, 87%)
HSB
hsb(49, 25%, 100%)
CMYK
cmyk(0%, 5%, 25%, 0%)
Oklch
oklch(96.1% 0.068 96.6)

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

#7D0E0E

Vermilion · Maroon · Wine Red

HEX
#7D0E0E
RGB
rgb(125, 14, 14)
HSL
hsl(0, 80%, 27%)
HSB
hsb(0, 89%, 49%)
CMYK
cmyk(0%, 89%, 89%, 51%)
Oklch
oklch(37.8% 0.144 27.7)

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

#E32222

Vermilion · Crimson · Passion Red

HEX
#E32222
RGB
rgb(227, 34, 34)
HSL
hsl(0, 78%, 51%)
HSB
hsb(0, 85%, 89%)
CMYK
cmyk(0%, 85%, 85%, 11%)
Oklch
oklch(58.7% 0.224 27.7)

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

#FF4000

Tangerine · OrangeRed · Amber Brown

HEX
#FF4000
RGB
rgb(255, 64, 0)
HSL
hsl(15, 100%, 50%)
HSB
hsb(15, 100%, 100%)
CMYK
cmyk(0%, 75%, 100%, 0%)
Oklch
oklch(65.6% 0.233 34.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9FE3B6
E3A0CD

Analogous

ABE3A0
9FE3B6
A0E3D8

Triadic

9FE3B6
B7A0E3
E3B7A0

Split-Comp.

9FE3B6
D8A0E3
E3A0AB

Tetradic

9FE3B6
A0ABE3
E3A0CD
E3D8A0

Contrast Matrix WCAG 2.1 Contrast

9FE3B6
FFF3BF
7D0E0E
E32222
FF4000
—
1.3
Fail
7.3
AAA
3.1
AA Large
2.4
Fail
1.3
Fail
—
9.7
AAA
4.2
AA Large
3.1
AA Large
7.3
AAA
9.7
AAA
—
2.3
Fail
3.1
AA Large
3.1
AA Large
4.2
AA Large
2.3
Fail
—
1.3
Fail
2.4
Fail
3.1
AA Large
3.1
AA Large
1.3
Fail
—
White BG
1.5Fail
1.1Fail
10.8AAA
4.6AA
3.5AA Large
Black BG
14.1AAA
18.8AAA
1.9Fail
4.5AA
6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBDC1
FAFACC
4D4C0E
8F8E22
ACAB0F

Deuteranopia

B9B3C4
FBFBCF
535C0E
9BA922
B7C613

Tritanopia

A2C9CB
FED6D8
770E0E
D92222
F51C1E

Achromatopsia

CACACA
F1F1F1
2F2F2F
5C5C5C
727272

Shades & Tints Shades & Tints

#9FE3B6

Dark
Light

#FFF3BF

Dark
Light

#7D0E0E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9fe3b6;
  --color-2: #fff3bf;
  --color-3: #7d0e0e;
  --color-4: #e32222;
  --color-5: #ff4000;
}

SCSS

$color-1: #9fe3b6;
$color-2: #fff3bf;
$color-3: #7d0e0e;
$color-4: #e32222;
$color-5: #ff4000;

TAILWIND

colors: {
  'brand-1': '#9fe3b6',
  'brand-2': '#fff3bf',
  'brand-3': '#7d0e0e',
  'brand-4': '#e32222',
  'brand-5': '#ff4000',
}

RGB Array

[159, 227, 182], [255, 243, 191], [125, 14, 14], [227, 34, 34], [255, 64, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9FE3B6, #FFF3BF, #7D0E0E, #E32222, #FF4000 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: #9fe3b6; --color-2: #fff3bf; --color-3: #7d0e0e; --color-4: #e32222; --color-5: #ff4000. 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