← Back to Editor

#78AD8D · #28493E · #0B1D20 · #C62201 · #81971A

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#78AD8D

Celadon · DarkSeaGreen · Olive Green

HEX
#78AD8D
RGB
rgb(120, 173, 141)
HSL
hsl(144, 24%, 57%)
HSB
hsb(144, 31%, 68%)
CMYK
cmyk(31%, 0%, 18%, 32%)
Oklch
oklch(70.1% 0.073 157.4)

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

#28493E

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#28493E
RGB
rgb(40, 73, 62)
HSL
hsl(160, 29%, 22%)
HSB
hsb(160, 45%, 29%)
CMYK
cmyk(45%, 0%, 15%, 71%)
Oklch
oklch(37.6% 0.044 170.5)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#0B1D20

Slate Blue · Black · Peacock Green

HEX
#0B1D20
RGB
rgb(11, 29, 32)
HSL
hsl(189, 49%, 8%)
HSB
hsb(189, 66%, 13%)
CMYK
cmyk(66%, 9%, 0%, 87%)
Oklch
oklch(21.7% 0.024 209.4)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#C62201

Vermilion · FireBrick · Wine Red

HEX
#C62201
RGB
rgb(198, 34, 1)
HSL
hsl(10, 99%, 39%)
HSB
hsb(10, 99%, 78%)
CMYK
cmyk(0%, 83%, 99%, 22%)
Oklch
oklch(53.2% 0.201 32.0)

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

#81971A

Grass Green · Olive · Forest Green

HEX
#81971A
RGB
rgb(129, 151, 26)
HSL
hsl(71, 71%, 35%)
HSB
hsb(71, 83%, 59%)
CMYK
cmyk(15%, 0%, 83%, 41%)
Oklch
oklch(63.7% 0.143 119.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

78AD8D
AC7797

Analogous

7CAC77
78AD8D
77ACA6

Triadic

78AD8D
8C77AC
AC8C77

Split-Comp.

78AD8D
A677AC
AC777C

Tetradic

78AD8D
777CAC
AC7797
ACA677

Contrast Matrix WCAG 2.1 Contrast

78AD8D
28493E
0B1D20
C62201
81971A
—
3.9
AA Large
6.7
AA
2.2
Fail
1.3
Fail
3.9
AA Large
—
1.7
Fail
1.7
Fail
3.0
AA Large
6.7
AA
1.7
Fail
—
3.0
Fail
5.3
AA
2.2
Fail
1.7
Fail
3.0
Fail
—
1.8
Fail
1.3
Fail
3.0
AA Large
5.3
AA
1.8
Fail
—
White BG
2.6Fail
9.9AAA
17.3AAA
5.8AA
3.3AA Large
Black BG
8.2AAA
2.1Fail
1.2Fail
3.6AA Large
6.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8F95
363741
13131F
7F7E09
8B8B38

Deuteranopia

8C8897
343241
12101F
89950B
898840

Tritanopia

7B9B9C
2A4343
0C1F1F
BE0F11
825055

Achromatopsia

9A9A9A
3E3E3E
181818
4F4F4F
828282

Shades & Tints Shades & Tints

#78AD8D

Dark
Light

#28493E

Dark
Light

#0B1D20

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #78ad8d;
  --color-2: #28493e;
  --color-3: #0b1d20;
  --color-4: #c62201;
  --color-5: #81971a;
}

SCSS

$color-1: #78ad8d;
$color-2: #28493e;
$color-3: #0b1d20;
$color-4: #c62201;
$color-5: #81971a;

TAILWIND

colors: {
  'brand-1': '#78ad8d',
  'brand-2': '#28493e',
  'brand-3': '#0b1d20',
  'brand-4': '#c62201',
  'brand-5': '#81971a',
}

RGB Array

[120, 173, 141], [40, 73, 62], [11, 29, 32], [198, 34, 1], [129, 151, 26]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #78AD8D, #28493E, #0B1D20, #C62201, #81971A 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: #78ad8d; --color-2: #28493e; --color-3: #0b1d20; --color-4: #c62201; --color-5: #81971a. 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