← Back to Editor

#E33232 · #FFF3A6 · #8BCC8D · #82B384 · #5E7A5F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#E33232

Vermilion · Crimson · Passion Red

HEX
#E33232
RGB
rgb(227, 50, 50)
HSL
hsl(0, 76%, 54%)
HSB
hsb(0, 78%, 89%)
CMYK
cmyk(0%, 78%, 78%, 11%)
Oklch
oklch(59.9% 0.213 26.5)

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

#FFF3A6

Fresh Green · Wheat · Lemon Cream

HEX
#FFF3A6
RGB
rgb(255, 243, 166)
HSL
hsl(52, 100%, 83%)
HSB
hsb(52, 35%, 100%)
CMYK
cmyk(0%, 5%, 35%, 0%)
Oklch
oklch(95.6% 0.097 100.4)

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

#8BCC8D

Celadon · DarkSeaGreen · Apple Green

HEX
#8BCC8D
RGB
rgb(139, 204, 141)
HSL
hsl(122, 39%, 67%)
HSB
hsb(122, 32%, 80%)
CMYK
cmyk(32%, 0%, 31%, 20%)
Oklch
oklch(78.5% 0.110 145.2)

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

#82B384

Celadon · DarkSeaGreen · Apple Green

HEX
#82B384
RGB
rgb(130, 179, 132)
HSL
hsl(122, 24%, 61%)
HSB
hsb(122, 27%, 70%)
CMYK
cmyk(27%, 0%, 26%, 30%)
Oklch
oklch(71.9% 0.085 145.6)

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

#5E7A5F

Celadon · DimGray · Olive Green

HEX
#5E7A5F
RGB
rgb(94, 122, 95)
HSL
hsl(122, 13%, 42%)
HSB
hsb(122, 23%, 48%)
CMYK
cmyk(23%, 0%, 22%, 52%)
Oklch
oklch(55.0% 0.053 145.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E33232
31E3E3

Analogous

E3318A
E33232
E38A31

Triadic

E33232
31E331
3131E3

Split-Comp.

E33232
31E38A
318AE3

Tetradic

E33232
8AE331
31E3E3
8A31E3

Contrast Matrix WCAG 2.1 Contrast

E33232
FFF3A6
8BCC8D
82B384
5E7A5F
—
3.9
AA Large
2.3
Fail
1.8
Fail
1.1
Fail
3.9
AA Large
—
1.7
Fail
2.1
Fail
4.2
AA Large
2.3
Fail
1.7
Fail
—
1.3
Fail
2.5
Fail
1.8
Fail
2.1
Fail
1.3
Fail
—
2.0
Fail
1.1
Fail
4.2
AA Large
2.5
Fail
2.0
Fail
—
White BG
4.4AA Large
1.1Fail
1.9Fail
2.4Fail
4.7AA
Black BG
4.8AA
18.6AAA
11.1AAA
8.7AAA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

969532
FAFAB9
A7A89C
97988F
6A6A66

Deuteranopia

A1AE32
FBFBBD
A39FA0
949192
696667

Tritanopia

DA3232
FEC7CB
8EA8AB
84989A
5F6B6C

Achromatopsia

676767
EEEEEE
B1B1B1
9F9F9F
6F6F6F

Shades & Tints Shades & Tints

#E33232

Dark
Light

#FFF3A6

Dark
Light

#8BCC8D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e33232;
  --color-2: #fff3a6;
  --color-3: #8bcc8d;
  --color-4: #82b384;
  --color-5: #5e7a5f;
}

SCSS

$color-1: #e33232;
$color-2: #fff3a6;
$color-3: #8bcc8d;
$color-4: #82b384;
$color-5: #5e7a5f;

TAILWIND

colors: {
  'brand-1': '#e33232',
  'brand-2': '#fff3a6',
  'brand-3': '#8bcc8d',
  'brand-4': '#82b384',
  'brand-5': '#5e7a5f',
}

RGB Array

[227, 50, 50], [255, 243, 166], [139, 204, 141], [130, 179, 132], [94, 122, 95]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E33232, #FFF3A6, #8BCC8D, #82B384, #5E7A5F is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #e33232; --color-2: #fff3a6; --color-3: #8bcc8d; --color-4: #82b384; --color-5: #5e7a5f. 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 tech, SaaS, healthcare, eco industries. 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