← Back to Editor

#71B699 · #407D6E · #85363C · #CB5853 · #D0C7A8

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#71B699

Mineral Blue · MediumAquaMarine · Olive Green

HEX
#71B699
RGB
rgb(113, 182, 153)
HSL
hsl(155, 32%, 58%)
HSB
hsb(155, 38%, 71%)
CMYK
cmyk(38%, 0%, 16%, 29%)
Oklch
oklch(72.2% 0.082 165.6)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#407D6E

Mineral Blue · SeaGreen · Mint Ice

HEX
#407D6E
RGB
rgb(64, 125, 110)
HSL
hsl(165, 32%, 37%)
HSB
hsb(165, 49%, 49%)
CMYK
cmyk(49%, 0%, 12%, 51%)
Oklch
oklch(54.4% 0.068 175.7)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#85363C

Crimson · Brown · Wine Red

HEX
#85363C
RGB
rgb(133, 54, 60)
HSL
hsl(355, 42%, 37%)
HSB
hsb(355, 59%, 52%)
CMYK
cmyk(0%, 59%, 55%, 48%)
Oklch
oklch(44.3% 0.109 18.1)

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

#CB5853

Crimson · Tomato · Passion Red

HEX
#CB5853
RGB
rgb(203, 88, 83)
HSL
hsl(2, 54%, 56%)
HSB
hsb(2, 59%, 80%)
CMYK
cmyk(0%, 57%, 59%, 20%)
Oklch
oklch(60.5% 0.148 25.0)

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

#D0C7A8

Goose Yellow · Silver · Sunflower

HEX
#D0C7A8
RGB
rgb(208, 199, 168)
HSL
hsl(47, 30%, 74%)
HSB
hsb(47, 19%, 82%)
CMYK
cmyk(0%, 4%, 19%, 18%)
Oklch
oklch(82.9% 0.043 93.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

71B699
B6728E

Analogous

72B677
71B699
72B0B6

Triadic

71B699
9A72B6
B69A72

Split-Comp.

71B699
B672B0
B67772

Tetradic

71B699
7772B6
B6728E
B0B672

Contrast Matrix WCAG 2.1 Contrast

71B699
407D6E
85363C
CB5853
D0C7A8
—
2.0
Fail
3.4
AA Large
1.7
Fail
1.4
Fail
2.0
Fail
—
1.7
Fail
1.2
Fail
2.8
Fail
3.4
AA Large
1.7
Fail
—
2.0
Fail
4.8
AA
1.7
Fail
1.2
Fail
2.0
Fail
—
2.5
Fail
1.4
Fail
2.8
Fail
4.8
AA
2.5
Fail
—
White BG
2.4Fail
4.8AA
8.1AAA
4.2AA Large
1.7Fail
Black BG
8.9AAA
4.4AA Large
2.6Fail
5.1AA
12.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8FA0
5A5B72
63623B
999854
CCCCB0

Deuteranopia

8B86A2
575273
676D3A
A0A955
CDCDB1

Tritanopia

74A6A7
437475
813939
C55555
D0B5B7

Achromatopsia

9E9E9E
696969
4E4E4E
7A7A7A
C6C6C6

Shades & Tints Shades & Tints

#71B699

Dark
Light

#407D6E

Dark
Light

#85363C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #71b699;
  --color-2: #407d6e;
  --color-3: #85363c;
  --color-4: #cb5853;
  --color-5: #d0c7a8;
}

SCSS

$color-1: #71b699;
$color-2: #407d6e;
$color-3: #85363c;
$color-4: #cb5853;
$color-5: #d0c7a8;

TAILWIND

colors: {
  'brand-1': '#71b699',
  'brand-2': '#407d6e',
  'brand-3': '#85363c',
  'brand-4': '#cb5853',
  'brand-5': '#d0c7a8',
}

RGB Array

[113, 182, 153], [64, 125, 110], [133, 54, 60], [203, 88, 83], [208, 199, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #71B699, #407D6E, #85363C, #CB5853, #D0C7A8 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: #71b699; --color-2: #407d6e; --color-3: #85363c; --color-4: #cb5853; --color-5: #d0c7a8. 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