← Back to Editor

#5D9675 · #0D1C07 · #495C1A · #748E44 · #B2C78B

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#5D9675

Celadon · SlateGray · Olive Green

HEX
#5D9675
RGB
rgb(93, 150, 117)
HSL
hsl(145, 23%, 48%)
HSB
hsb(145, 38%, 59%)
CMYK
cmyk(38%, 0%, 22%, 41%)
Oklch
oklch(62.4% 0.079 157.7)

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

#0D1C07

Pine Green · Black · Dark Green

HEX
#0D1C07
RGB
rgb(13, 28, 7)
HSL
hsl(103, 60%, 7%)
HSB
hsb(103, 75%, 11%)
CMYK
cmyk(54%, 0%, 75%, 89%)
Oklch
oklch(20.6% 0.044 137.3)

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

#495C1A

Grass Green · DarkOliveGreen · Forest Green

HEX
#495C1A
RGB
rgb(73, 92, 26)
HSL
hsl(77, 56%, 23%)
HSB
hsb(77, 72%, 36%)
CMYK
cmyk(21%, 0%, 72%, 64%)
Oklch
oklch(44.4% 0.093 124.0)

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

#748E44

Grass Green · DarkOliveGreen · Olive Green

HEX
#748E44
RGB
rgb(116, 142, 68)
HSL
hsl(81, 35%, 41%)
HSB
hsb(81, 52%, 56%)
CMYK
cmyk(18%, 0%, 52%, 44%)
Oklch
oklch(60.9% 0.105 125.4)

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

#B2C78B

Willow Green · DarkSeaGreen · Apple Green

HEX
#B2C78B
RGB
rgb(178, 199, 139)
HSL
hsl(81, 35%, 66%)
HSB
hsb(81, 30%, 78%)
CMYK
cmyk(11%, 0%, 30%, 22%)
Oklch
oklch(79.9% 0.084 123.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5D9675
975E7F

Analogous

63975E
5D9675
5E9792

Triadic

5D9675
765E97
97765E

Split-Comp.

5D9675
925E97
975E63

Tetradic

5D9675
5E6397
975E7F
97925E

Contrast Matrix WCAG 2.1 Contrast

5D9675
0D1C07
495C1A
748E44
B2C78B
—
5.1
AA
2.2
Fail
1.1
Fail
1.9
Fail
5.1
AA
—
2.4
Fail
4.8
AA
9.6
AAA
2.2
Fail
2.4
Fail
—
2.0
Fail
4.0
AA Large
1.1
Fail
4.8
AA
2.0
Fail
—
2.0
Fail
1.9
Fail
9.6
AAA
4.0
AA Large
2.0
Fail
—
White BG
3.5AA Large
17.7AAA
7.4AAA
3.7AA Large
1.8Fail
Black BG
6.1AA
1.2Fail
2.8Fail
5.7AA
11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

76767D
13140C
51512A
7F7F56
BBBB9A

Deuteranopia

726E7F
13120D
504F2E
7E7C5A
BAB89D

Tritanopia

608385
0E1011
4A3739
756467
B3A5A8

Achromatopsia

818181
151515
4F4F4F
7E7E7E
BABABA

Shades & Tints Shades & Tints

#5D9675

Dark
Light

#0D1C07

Dark
Light

#495C1A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5d9675;
  --color-2: #0d1c07;
  --color-3: #495c1a;
  --color-4: #748e44;
  --color-5: #b2c78b;
}

SCSS

$color-1: #5d9675;
$color-2: #0d1c07;
$color-3: #495c1a;
$color-4: #748e44;
$color-5: #b2c78b;

TAILWIND

colors: {
  'brand-1': '#5d9675',
  'brand-2': '#0d1c07',
  'brand-3': '#495c1a',
  'brand-4': '#748e44',
  'brand-5': '#b2c78b',
}

RGB Array

[93, 150, 117], [13, 28, 7], [73, 92, 26], [116, 142, 68], [178, 199, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #5D9675, #0D1C07, #495C1A, #748E44, #B2C78B 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: #5d9675; --color-2: #0d1c07; --color-3: #495c1a; --color-4: #748e44; --color-5: #b2c78b. 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 cool-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