← Back to Editor

#211711 · #543B2B · #9BD74A · #B8DEB3 · #E2EFE0

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

#211711

Tangerine · Black · Cinnamon

HEX
#211711
RGB
rgb(33, 23, 17)
HSL
hsl(22, 32%, 10%)
HSB
hsb(22, 48%, 13%)
CMYK
cmyk(0%, 30%, 48%, 87%)
Oklch
oklch(21.5% 0.020 52.3)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#543B2B

Tangerine · DarkOliveGreen · Cinnamon

HEX
#543B2B
RGB
rgb(84, 59, 43)
HSL
hsl(23, 32%, 25%)
HSB
hsb(23, 49%, 33%)
CMYK
cmyk(0%, 30%, 49%, 67%)
Oklch
oklch(37.6% 0.044 53.6)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#9BD74A

Grass Green · GreenYellow · Olive Green

HEX
#9BD74A
RGB
rgb(155, 215, 74)
HSL
hsl(86, 64%, 57%)
HSB
hsb(86, 66%, 84%)
CMYK
cmyk(28%, 0%, 66%, 16%)
Oklch
oklch(81.1% 0.181 129.5)

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

#B8DEB3

Celadon · Silver · Apple Green

HEX
#B8DEB3
RGB
rgb(184, 222, 179)
HSL
hsl(113, 39%, 79%)
HSB
hsb(113, 19%, 87%)
CMYK
cmyk(17%, 0%, 19%, 13%)
Oklch
oklch(86.2% 0.071 141.8)

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

#E2EFE0

Celadon · Beige · Mint Green

HEX
#E2EFE0
RGB
rgb(226, 239, 224)
HSL
hsl(112, 32%, 91%)
HSB
hsb(112, 6%, 94%)
CMYK
cmyk(5%, 0%, 6%, 6%)
Oklch
oklch(93.8% 0.024 141.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

211711
111C22

Analogous

221114
211711
221F11

Triadic

211711
112217
171122

Split-Comp.

211711
11221F
111422

Tetradic

211711
142211
111C22
1F1122

Contrast Matrix WCAG 2.1 Contrast

211711
543B2B
9BD74A
B8DEB3
E2EFE0
—
1.7
Fail
10.2
AAA
11.8
AAA
14.8
AAA
1.7
Fail
—
6.0
AA
6.9
AA
8.7
AAA
10.2
AAA
6.0
AA
—
1.2
Fail
1.4
Fail
11.8
AAA
6.9
AA
1.2
Fail
—
1.2
Fail
14.8
AAA
8.7
AAA
1.4
Fail
1.2
Fail
—
White BG
17.6AAA
10.3AAA
1.7Fail
1.5Fail
1.2Fail
Black BG
1.2Fail
2.0Fail
12.2AAA
14.1AAA
17.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1D1D12
49492F
B5B66C
C8C9BD
E8E8E4

Deuteranopia

1D1E13
4B4D30
B2AD74
C6C3C0
E7E6E5

Tritanopia

211414
533233
9E878D
BAC6C7
E3E6E7

Achromatopsia

191919
414141
B5B5B5
CECECE
E9E9E9

Shades & Tints Shades & Tints

#211711

Dark
Light

#543B2B

Dark
Light

#9BD74A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #211711;
  --color-2: #543b2b;
  --color-3: #9bd74a;
  --color-4: #b8deb3;
  --color-5: #e2efe0;
}

SCSS

$color-1: #211711;
$color-2: #543b2b;
$color-3: #9bd74a;
$color-4: #b8deb3;
$color-5: #e2efe0;

TAILWIND

colors: {
  'brand-1': '#211711',
  'brand-2': '#543b2b',
  'brand-3': '#9bd74a',
  'brand-4': '#b8deb3',
  'brand-5': '#e2efe0',
}

RGB Array

[33, 23, 17], [84, 59, 43], [155, 215, 74], [184, 222, 179], [226, 239, 224]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #211711, #543B2B, #9BD74A, #B8DEB3, #E2EFE0 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: #211711; --color-2: #543b2b; --color-3: #9bd74a; --color-4: #b8deb3; --color-5: #e2efe0. 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