← Back to Editor

#71C89B · #B5B672 · #D6895D · #E45C8A · #E21653

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

#71C89B

Celadon · MediumAquaMarine · Apple Green

HEX
#71C89B
RGB
rgb(113, 200, 155)
HSL
hsl(149, 44%, 61%)
HSB
hsb(149, 44%, 78%)
CMYK
cmyk(44%, 0%, 23%, 22%)
Oklch
oklch(76.6% 0.107 159.8)

TraditionalCeladon」· PaintApple Green」· Creative Mint Breeze

#B5B672

Autumn Sage · Tan · Sunflower

HEX
#B5B672
RGB
rgb(181, 182, 114)
HSL
hsl(61, 32%, 58%)
HSB
hsb(61, 37%, 71%)
CMYK
cmyk(1%, 0%, 37%, 29%)
Oklch
oklch(76.0% 0.089 109.1)

TraditionalAutumn Sage」· PaintSunflower」· Creative Blush Sunrise

#D6895D

Tangerine · DarkSalmon · Warm Sun

HEX
#D6895D
RGB
rgb(214, 137, 93)
HSL
hsl(22, 60%, 60%)
HSB
hsb(22, 57%, 84%)
CMYK
cmyk(0%, 36%, 57%, 16%)
Oklch
oklch(70.0% 0.111 49.9)

TraditionalTangerine」· PaintWarm Sun」· Creative Blush Sunrise

#E45C8A

Rouge · LightCoral · Rose Pink

HEX
#E45C8A
RGB
rgb(228, 92, 138)
HSL
hsl(340, 72%, 63%)
HSB
hsb(340, 60%, 89%)
CMYK
cmyk(0%, 60%, 39%, 11%)
Oklch
oklch(66.1% 0.174 2.0)

TraditionalRouge」· PaintRose Pink」· Creative Rose Petal

#E21653

Dark Violet · Crimson · Camellia

HEX
#E21653
RGB
rgb(226, 22, 83)
HSL
hsl(342, 82%, 49%)
HSB
hsb(342, 90%, 89%)
CMYK
cmyk(0%, 90%, 63%, 11%)
Oklch
oklch(58.7% 0.226 13.6)

TraditionalDark Violet」· PaintCamellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

71C89B
C7709D

Analogous

71C770
71C89B
70C7C6

Triadic

71C89B
9A70C7
C79A70

Split-Comp.

71C89B
C670C7
C77071

Tetradic

71C89B
7071C7
C7709D
C7C670

Contrast Matrix WCAG 2.1 Contrast

71C89B
B5B672
D6895D
E45C8A
E21653
1.1
Fail
1.4
Fail
1.7
Fail
2.3
Fail
1.1
Fail
1.3
Fail
1.6
Fail
2.2
Fail
1.4
Fail
1.3
Fail
1.2
Fail
1.7
Fail
1.7
Fail
1.6
Fail
1.2
Fail
1.4
Fail
2.3
Fail
2.2
Fail
1.7
Fail
1.4
Fail
White BG
2.0Fail
2.1Fail
2.8Fail
3.4AA Large
4.7AA
Black BG
10.4AAA
9.9AAA
7.6AAA
6.2AA
4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

9797A6
B5B582
B5B468
A9A87F
8A8844

Deuteranopia

928BA9
B5B586
B9BF6A
B1BB7C
96A541

Tritanopia

75AEB0
B58F92
D27072
DD7674
D83936

Achromatopsia

A9A9A9
AEAEAE
9B9B9B
8A8A8A
5A5A5A

Shades & Tints Shades & Tints

#71C89B

Dark
Light

#B5B672

Dark
Light

#D6895D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #71c89b;
  --color-2: #b5b672;
  --color-3: #d6895d;
  --color-4: #e45c8a;
  --color-5: #e21653;
}

SCSS

$color-1: #71c89b;
$color-2: #b5b672;
$color-3: #d6895d;
$color-4: #e45c8a;
$color-5: #e21653;

TAILWIND

colors: {
  'brand-1': '#71c89b',
  'brand-2': '#b5b672',
  'brand-3': '#d6895d',
  'brand-4': '#e45c8a',
  'brand-5': '#e21653',
}

RGB Array

[113, 200, 155], [181, 182, 114], [214, 137, 93], [228, 92, 138], [226, 22, 83]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #71C89B, #B5B672, #D6895D, #E45C8A, #E21653 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: #71c89b; --color-2: #b5b672; --color-3: #d6895d; --color-4: #e45c8a; --color-5: #e21653. 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