← Back to Editor

#71B793 · #83C69A · #CABF89 · #E75035 · #EA1033

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 Library

Color Details Color Details

#71B793

Celadon · DarkSeaGreen · Olive Green

HEX
#71B793
RGB
rgb(113, 183, 147)
HSL
hsl(149, 33%, 58%)
HSB
hsb(149, 38%, 72%)
CMYK
cmyk(38%, 0%, 20%, 28%)
Oklch
oklch(72.3% 0.089 160.7)

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

#83C69A

Celadon · DarkSeaGreen · Apple Green

HEX
#83C69A
RGB
rgb(131, 198, 154)
HSL
hsl(141, 37%, 65%)
HSB
hsb(141, 34%, 78%)
CMYK
cmyk(34%, 0%, 22%, 22%)
Oklch
oklch(77.0% 0.093 154.8)

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

#CABF89

Fresh Green · Tan · Sunflower

HEX
#CABF89
RGB
rgb(202, 191, 137)
HSL
hsl(50, 38%, 66%)
HSB
hsb(50, 32%, 79%)
CMYK
cmyk(0%, 5%, 32%, 21%)
Oklch
oklch(80.1% 0.072 98.0)

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

#E75035

Vermilion · Tomato · Passion Red

HEX
#E75035
RGB
rgb(231, 80, 53)
HSL
hsl(9, 79%, 56%)
HSB
hsb(9, 77%, 91%)
CMYK
cmyk(0%, 65%, 77%, 9%)
Oklch
oklch(63.4% 0.192 32.4)

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

#EA1033

Vermilion · Crimson · Passion Red

HEX
#EA1033
RGB
rgb(234, 16, 51)
HSL
hsl(350, 87%, 49%)
HSB
hsb(350, 93%, 92%)
CMYK
cmyk(0%, 93%, 78%, 8%)
Oklch
oklch(59.5% 0.235 23.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

71B793
B77195

Analogous

72B771
71B793
71B7B6

Triadic

71B793
9371B7
B79371

Split-Comp.

71B793
B671B7
B77172

Tetradic

71B793
7172B7
B77195
B7B671

Contrast Matrix WCAG 2.1 Contrast

71B793
83C69A
CABF89
E75035
EA1033
—
1.2
Fail
1.3
Fail
1.6
Fail
1.9
Fail
1.2
Fail
—
1.1
Fail
1.9
Fail
2.3
Fail
1.3
Fail
1.1
Fail
—
2.0
Fail
2.5
Fail
1.6
Fail
1.9
Fail
2.0
Fail
—
1.2
Fail
1.9
Fail
2.3
Fail
2.5
Fail
1.2
Fail
—
White BG
2.4Fail
2.0Fail
1.9Fail
3.8AA Large
4.5AA
Black BG
8.9AAA
10.5AAA
11.3AAA
5.6AA
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F909C
A0A1A5
C5C596
A6A43C
8C8A2B

Deuteranopia

8B869E
9C97A7
C6C799
AEBA3D
98A928

Tritanopia

75A3A4
86ADAF
C9A0A3
DF4142
DF2422

Achromatopsia

9E9E9E
ADADAD
BCBCBC
7A7A7A
555555

Shades & Tints Shades & Tints

#71B793

Dark
Light

#83C69A

Dark
Light

#CABF89

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #71b793;
  --color-2: #83c69a;
  --color-3: #cabf89;
  --color-4: #e75035;
  --color-5: #ea1033;
}

SCSS

$color-1: #71b793;
$color-2: #83c69a;
$color-3: #cabf89;
$color-4: #e75035;
$color-5: #ea1033;

TAILWIND

colors: {
  'brand-1': '#71b793',
  'brand-2': '#83c69a',
  'brand-3': '#cabf89',
  'brand-4': '#e75035',
  'brand-5': '#ea1033',
}

RGB Array

[113, 183, 147], [131, 198, 154], [202, 191, 137], [231, 80, 53], [234, 16, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #71B793, #83C69A, #CABF89, #E75035, #EA1033 is ideal for: corporate websites, product showcases, portfolios. 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: #71b793; --color-2: #83c69a; --color-3: #cabf89; --color-4: #e75035; --color-5: #ea1033. 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. 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