← Back to Editor

#71AD8E · #99756E · #672234 · #CC463A · #DC5E46

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

#71AD8E

Celadon · CadetBlue · Olive Green

HEX
#71AD8E
RGB
rgb(113, 173, 142)
HSL
hsl(149, 27%, 56%)
HSB
hsb(149, 35%, 68%)
CMYK
cmyk(35%, 0%, 18%, 32%)
Oklch
oklch(69.8% 0.078 161.0)

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

#99756E

Crimson · Gray · Passion Red

HEX
#99756E
RGB
rgb(153, 117, 110)
HSL
hsl(10, 17%, 52%)
HSB
hsb(10, 28%, 60%)
CMYK
cmyk(0%, 24%, 28%, 40%)
Oklch
oklch(59.6% 0.047 31.1)

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

#672234

Dark Violet · Brown · Camellia

HEX
#672234
RGB
rgb(103, 34, 52)
HSL
hsl(344, 50%, 27%)
HSB
hsb(344, 67%, 40%)
CMYK
cmyk(0%, 67%, 50%, 60%)
Oklch
oklch(36.3% 0.100 7.6)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#CC463A

Crimson · Chocolate · Passion Red

HEX
#CC463A
RGB
rgb(204, 70, 58)
HSL
hsl(5, 59%, 51%)
HSB
hsb(5, 72%, 80%)
CMYK
cmyk(0%, 66%, 72%, 20%)
Oklch
oklch(58.0% 0.172 28.6)

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

#DC5E46

Vermilion · Tomato · Passion Red

HEX
#DC5E46
RGB
rgb(220, 94, 70)
HSL
hsl(10, 68%, 57%)
HSB
hsb(10, 68%, 86%)
CMYK
cmyk(0%, 57%, 68%, 14%)
Oklch
oklch(63.7% 0.163 32.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

71AD8E
AD7190

Analogous

72AD71
71AD8E
71ADAC

Triadic

71AD8E
8E71AD
AD8E71

Split-Comp.

71AD8E
AC71AD
AD7172

Tetradic

71AD8E
7172AD
AD7190
ADAC71

Contrast Matrix WCAG 2.1 Contrast

71AD8E
99756E
672234
CC463A
DC5E46
—
1.6
Fail
4.4
AA Large
1.8
Fail
1.4
Fail
1.6
Fail
—
2.8
Fail
1.1
Fail
1.1
Fail
4.4
AA Large
2.8
Fail
—
2.4
Fail
3.1
AA Large
1.8
Fail
1.1
Fail
2.4
Fail
—
1.3
Fail
1.4
Fail
1.1
Fail
3.1
AA Large
1.3
Fail
—
White BG
2.6Fail
4.1AA Large
11.3AAA
4.7AA
3.7AA Large
Black BG
8.1AAA
5.1AA
1.9Fail
4.5AA
5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8C96
898970
494930
92913D
A5A44C

Deuteranopia

888397
8C8E70
4D522F
9AA43E
ADB64D

Tritanopia

749B9D
977171
642C2B
C53F40
D65051

Achromatopsia

989898
7F7F7F
393939
6D6D6D
818181

Shades & Tints Shades & Tints

#71AD8E

Dark
Light

#99756E

Dark
Light

#672234

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #71ad8e;
  --color-2: #99756e;
  --color-3: #672234;
  --color-4: #cc463a;
  --color-5: #dc5e46;
}

SCSS

$color-1: #71ad8e;
$color-2: #99756e;
$color-3: #672234;
$color-4: #cc463a;
$color-5: #dc5e46;

TAILWIND

colors: {
  'brand-1': '#71ad8e',
  'brand-2': '#99756e',
  'brand-3': '#672234',
  'brand-4': '#cc463a',
  'brand-5': '#dc5e46',
}

RGB Array

[113, 173, 142], [153, 117, 110], [103, 34, 52], [204, 70, 58], [220, 94, 70]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #71AD8E, #99756E, #672234, #CC463A, #DC5E46 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: #71ad8e; --color-2: #99756e; --color-3: #672234; --color-4: #cc463a; --color-5: #dc5e46. 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