← Back to Editor

#86BF9F · #AFC270 · #D66F2B · #ED2F36 · #40222B

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

#86BF9F

Celadon · DarkSeaGreen · Apple Green

HEX
#86BF9F
RGB
rgb(134, 191, 159)
HSL
hsl(146, 31%, 64%)
HSB
hsb(146, 30%, 75%)
CMYK
cmyk(30%, 0%, 17%, 25%)
Oklch
oklch(75.6% 0.075 159.3)

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

#AFC270

Grass Green · DarkSeaGreen · Olive Green

HEX
#AFC270
RGB
rgb(175, 194, 112)
HSL
hsl(74, 40%, 60%)
HSB
hsb(74, 42%, 76%)
CMYK
cmyk(10%, 0%, 42%, 24%)
Oklch
oklch(78.1% 0.109 119.7)

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

#D66F2B

Tangerine · Chocolate · Amber Brown

HEX
#D66F2B
RGB
rgb(214, 111, 43)
HSL
hsl(24, 68%, 50%)
HSB
hsb(24, 80%, 84%)
CMYK
cmyk(0%, 48%, 80%, 16%)
Oklch
oklch(65.0% 0.151 49.9)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#ED2F36

Vermilion · Crimson · Passion Red

HEX
#ED2F36
RGB
rgb(237, 47, 54)
HSL
hsl(358, 84%, 56%)
HSB
hsb(358, 80%, 93%)
CMYK
cmyk(0%, 80%, 77%, 7%)
Oklch
oklch(61.5% 0.223 25.4)

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

#40222B

Dark Violet · DarkSlateGray · Raspberry

HEX
#40222B
RGB
rgb(64, 34, 43)
HSL
hsl(342, 31%, 19%)
HSB
hsb(342, 47%, 25%)
CMYK
cmyk(0%, 47%, 33%, 75%)
Oklch
oklch(29.5% 0.048 1.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86BF9F
C087A7

Analogous

8BC087
86BF9F
87C0BC

Triadic

86BF9F
9F87C0
C09F87

Split-Comp.

86BF9F
BC87C0
C0878B

Tetradic

86BF9F
878BC0
C087A7
C0BC87

Contrast Matrix WCAG 2.1 Contrast

86BF9F
AFC270
D66F2B
ED2F36
40222B
—
1.1
Fail
1.6
Fail
2.0
Fail
6.7
AA
1.1
Fail
—
1.7
Fail
2.1
Fail
7.3
AAA
1.6
Fail
1.7
Fail
—
1.2
Fail
4.2
AA Large
2.0
Fail
2.1
Fail
1.2
Fail
—
3.4
AA Large
6.7
AA
7.3
AAA
4.2
AA Large
3.4
AA Large
—
White BG
2.1Fail
1.9Fail
3.4AA Large
4.1AA Large
14.2AAA
Black BG
10.0AAA
10.8AAA
6.2AA
5.1AA
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9F9FA7
B7B784
A9A83B
9B9934
333329

Deuteranopia

9B97A9
B6B589
AFB73F
A6B434
353728

Tritanopia

89ADAE
B09497
D1484B
E33333
3F2727

Achromatopsia

AAAAAA
B3B3B3
868686
696969
2C2C2C

Shades & Tints Shades & Tints

#86BF9F

Dark
Light

#AFC270

Dark
Light

#D66F2B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86bf9f;
  --color-2: #afc270;
  --color-3: #d66f2b;
  --color-4: #ed2f36;
  --color-5: #40222b;
}

SCSS

$color-1: #86bf9f;
$color-2: #afc270;
$color-3: #d66f2b;
$color-4: #ed2f36;
$color-5: #40222b;

TAILWIND

colors: {
  'brand-1': '#86bf9f',
  'brand-2': '#afc270',
  'brand-3': '#d66f2b',
  'brand-4': '#ed2f36',
  'brand-5': '#40222b',
}

RGB Array

[134, 191, 159], [175, 194, 112], [214, 111, 43], [237, 47, 54], [64, 34, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #86BF9F, #AFC270, #D66F2B, #ED2F36, #40222B 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: #86bf9f; --color-2: #afc270; --color-3: #d66f2b; --color-4: #ed2f36; --color-5: #40222b. 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