← Back to Editor

#163019 · #2B4720 · #0F733A · #E3CFAA · #87171A

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

#163019

Celadon · Black · Dark Green

HEX
#163019
RGB
rgb(22, 48, 25)
HSL
hsl(127, 37%, 14%)
HSB
hsb(127, 54%, 19%)
CMYK
cmyk(54%, 0%, 48%, 81%)
Oklch
oklch(28.1% 0.053 146.5)

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

#2B4720

Celadon · DarkSlateGray · Dark Green

HEX
#2B4720
RGB
rgb(43, 71, 32)
HSL
hsl(103, 38%, 20%)
HSB
hsb(103, 55%, 28%)
CMYK
cmyk(39%, 0%, 55%, 72%)
Oklch
oklch(36.5% 0.072 137.5)

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

#0F733A

Pine Green · ForestGreen · Forest Green

HEX
#0F733A
RGB
rgb(15, 115, 58)
HSL
hsl(146, 77%, 25%)
HSB
hsb(146, 87%, 45%)
CMYK
cmyk(87%, 0%, 50%, 55%)
Oklch
oklch(48.9% 0.124 151.7)

Traditional「Pine Green」· Paint「Forest Green」· Creative Blush Sunrise

#E3CFAA

Goose Yellow · Wheat · Peach Orange

HEX
#E3CFAA
RGB
rgb(227, 207, 170)
HSL
hsl(39, 50%, 78%)
HSB
hsb(39, 25%, 89%)
CMYK
cmyk(0%, 9%, 25%, 11%)
Oklch
oklch(86.2% 0.054 82.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#87171A

Vermilion · DarkRed · Wine Red

HEX
#87171A
RGB
rgb(135, 23, 26)
HSL
hsl(358, 71%, 31%)
HSB
hsb(358, 83%, 53%)
CMYK
cmyk(0%, 83%, 81%, 47%)
Oklch
oklch(40.6% 0.147 25.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

163019
31162E

Analogous

213116
163019
163127

Triadic

163019
1A1631
311A16

Split-Comp.

163019
271631
311621

Tetradic

163019
162131
31162E
312716

Contrast Matrix WCAG 2.1 Contrast

163019
2B4720
0F733A
E3CFAA
87171A
—
1.4
Fail
2.4
Fail
9.4
AAA
1.5
Fail
1.4
Fail
—
1.7
Fail
6.8
AA
1.1
Fail
2.4
Fail
1.7
Fail
—
3.9
AA Large
1.6
Fail
9.4
AAA
6.8
AA
3.9
AA Large
—
6.4
AA
1.5
Fail
1.1
Fail
1.6
Fail
6.4
AA
—
White BG
14.3AAA
10.4AAA
5.9AA
1.5Fail
9.7AAA
Black BG
1.5Fail
2.0Fail
3.5AA Large
13.8AAA
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

21211F
373729
3A3B48
DADAB3
575519

Deuteranopia

201E20
36332C
352D4B
DCDDB5
5D6519

Tritanopia

172324
2C3133
145355
E2BABC
811919

Achromatopsia

262626
3A3A3A
4F4F4F
D1D1D1
393939

Shades & Tints Shades & Tints

#163019

Dark
Light

#2B4720

Dark
Light

#0F733A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #163019;
  --color-2: #2b4720;
  --color-3: #0f733a;
  --color-4: #e3cfaa;
  --color-5: #87171a;
}

SCSS

$color-1: #163019;
$color-2: #2b4720;
$color-3: #0f733a;
$color-4: #e3cfaa;
$color-5: #87171a;

TAILWIND

colors: {
  'brand-1': '#163019',
  'brand-2': '#2b4720',
  'brand-3': '#0f733a',
  'brand-4': '#e3cfaa',
  'brand-5': '#87171a',
}

RGB Array

[22, 48, 25], [43, 71, 32], [15, 115, 58], [227, 207, 170], [135, 23, 26]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #163019, #2B4720, #0F733A, #E3CFAA, #87171A is ideal for: tech websites, dark mode UIs, game UIs, 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: #163019; --color-2: #2b4720; --color-3: #0f733a; --color-4: #e3cfaa; --color-5: #87171a. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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