← Back to Editor

#67B778 · #59895F · #42482E · #271E15 · #0B0000

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

#67B778

Celadon · MediumSeaGreen · Olive Green

HEX
#67B778
RGB
rgb(103, 183, 120)
HSL
hsl(133, 36%, 56%)
HSB
hsb(133, 44%, 72%)
CMYK
cmyk(44%, 0%, 34%, 28%)
Oklch
oklch(71.2% 0.121 149.4)

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

#59895F

Celadon · DimGray · Olive Green

HEX
#59895F
RGB
rgb(89, 137, 95)
HSL
hsl(128, 21%, 44%)
HSB
hsb(128, 35%, 54%)
CMYK
cmyk(35%, 0%, 31%, 46%)
Oklch
oklch(58.4% 0.082 147.5)

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

#42482E

Grass Green · DarkSlateGray · Forest Green

HEX
#42482E
RGB
rgb(66, 72, 46)
HSL
hsl(74, 22%, 23%)
HSB
hsb(74, 36%, 28%)
CMYK
cmyk(8%, 0%, 36%, 72%)
Oklch
oklch(38.9% 0.042 119.0)

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

#271E15

Ochre · Black · Cinnamon

HEX
#271E15
RGB
rgb(39, 30, 21)
HSL
hsl(30, 30%, 12%)
HSB
hsb(30, 46%, 15%)
CMYK
cmyk(0%, 23%, 46%, 85%)
Oklch
oklch(24.3% 0.021 66.5)

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

#0B0000

Vermilion · Black · Deep Berry

HEX
#0B0000
RGB
rgb(11, 0, 0)
HSL
hsl(0, 100%, 2%)
HSB
hsb(0, 100%, 4%)
CMYK
cmyk(0%, 100%, 100%, 96%)
Oklch
oklch(9.4% 0.039 29.2)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

67B778
B766A6

Analogous

7DB766
67B778
66B7A0

Triadic

67B778
7866B7
B77866

Split-Comp.

67B778
A066B7
B7667D

Tetradic

67B778
667DB7
B766A6
B7A066

Contrast Matrix WCAG 2.1 Contrast

67B778
59895F
42482E
271E15
0B0000
—
1.7
Fail
3.9
AA Large
6.7
AA
8.5
AAA
1.7
Fail
—
2.4
Fail
4.0
AA Large
5.1
AA
3.9
AA Large
2.4
Fail
—
1.7
Fail
2.2
Fail
6.7
AA
4.0
AA Large
1.7
Fail
—
1.3
Fail
8.5
AAA
5.1
AA
2.2
Fail
1.3
Fail
—
White BG
2.4Fail
4.1AA Large
9.6AAA
16.4AAA
20.7AAA
Black BG
8.6AAA
5.2AA
2.2Fail
1.3Fail
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8A87
6E6E69
454534
232317
060600

Deuteranopia

857F8B
6B676C
444436
242418
070800

Tritanopia

6B9396
5B7173
42393A
271919
0A0000

Achromatopsia

989898
767676
434343
202020
030303

Shades & Tints Shades & Tints

#67B778

Dark
Light

#59895F

Dark
Light

#42482E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #67b778;
  --color-2: #59895f;
  --color-3: #42482e;
  --color-4: #271e15;
  --color-5: #0b0000;
}

SCSS

$color-1: #67b778;
$color-2: #59895f;
$color-3: #42482e;
$color-4: #271e15;
$color-5: #0b0000;

TAILWIND

colors: {
  'brand-1': '#67b778',
  'brand-2': '#59895f',
  'brand-3': '#42482e',
  'brand-4': '#271e15',
  'brand-5': '#0b0000',
}

RGB Array

[103, 183, 120], [89, 137, 95], [66, 72, 46], [39, 30, 21], [11, 0, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #67B778, #59895F, #42482E, #271E15, #0B0000 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: #67b778; --color-2: #59895f; --color-3: #42482e; --color-4: #271e15; --color-5: #0b0000. 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