← Back to Editor

#302E2E · #59584D · #6C8065 · #759E8A · #85CCC2

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

#302E2E

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#302E2E
RGB
rgb(48, 46, 46)
HSL
hsl(0, 2%, 18%)
HSB
hsb(0, 4%, 19%)
CMYK
cmyk(0%, 4%, 4%, 81%)
Oklch
oklch(30.3% 0.003 17.3)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#59584D

Ink Gray · DarkOliveGreen · Charcoal

HEX
#59584D
RGB
rgb(89, 88, 77)
HSL
hsl(55, 7%, 33%)
HSB
hsb(55, 13%, 35%)
CMYK
cmyk(0%, 1%, 13%, 65%)
Oklch
oklch(45.8% 0.017 102.8)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#6C8065

Celadon · DimGray · Olive Green

HEX
#6C8065
RGB
rgb(108, 128, 101)
HSL
hsl(104, 12%, 45%)
HSB
hsb(104, 21%, 50%)
CMYK
cmyk(16%, 0%, 21%, 50%)
Oklch
oklch(57.6% 0.047 137.6)

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

#759E8A

Mineral Blue · LightSlateGray · Olive Green

HEX
#759E8A
RGB
rgb(117, 158, 138)
HSL
hsl(151, 17%, 54%)
HSB
hsb(151, 26%, 62%)
CMYK
cmyk(26%, 0%, 13%, 38%)
Oklch
oklch(66.3% 0.054 163.4)

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

#85CCC2

Jade · MediumAquaMarine · Lake Green

HEX
#85CCC2
RGB
rgb(133, 204, 194)
HSL
hsl(172, 41%, 66%)
HSB
hsb(172, 35%, 80%)
CMYK
cmyk(35%, 0%, 5%, 20%)
Oklch
oklch(79.5% 0.073 184.7)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

302E2E
2D2F2F

Analogous

2F2D2E
302E2E
2F2E2D

Triadic

302E2E
2D2F2D
2D2D2F

Split-Comp.

302E2E
2D2F2E
2D2E2F

Tetradic

302E2E
2E2F2D
2D2F2F
2E2D2F

Contrast Matrix WCAG 2.1 Contrast

302E2E
59584D
6C8065
759E8A
85CCC2
—
1.9
Fail
3.2
AA Large
4.5
AA
7.3
AAA
1.9
Fail
—
1.7
Fail
2.4
Fail
3.9
AA Large
3.2
AA Large
1.7
Fail
—
1.4
Fail
2.3
Fail
4.5
AA
2.4
Fail
1.4
Fail
—
1.6
Fail
7.3
AAA
3.9
AA Large
2.3
Fail
1.6
Fail
—
White BG
13.5AAA
7.2AAA
4.3AA Large
3.0Fail
1.8Fail
Black BG
1.6Fail
2.9Fail
4.9AA
7.0AAA
11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2F2E
595950
75756C
87878F
A4A4C4

Deuteranopia

2F2F2E
595950
74726D
848190
A09AC5

Tritanopia

302E2E
595252
6D7172
779394
89C6C7

Achromatopsia

2F2F2F
575757
777777
8F8F8F
B6B6B6

Shades & Tints Shades & Tints

#302E2E

Dark
Light

#59584D

Dark
Light

#6C8065

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #302e2e;
  --color-2: #59584d;
  --color-3: #6c8065;
  --color-4: #759e8a;
  --color-5: #85ccc2;
}

SCSS

$color-1: #302e2e;
$color-2: #59584d;
$color-3: #6c8065;
$color-4: #759e8a;
$color-5: #85ccc2;

TAILWIND

colors: {
  'brand-1': '#302e2e',
  'brand-2': '#59584d',
  'brand-3': '#6c8065',
  'brand-4': '#759e8a',
  'brand-5': '#85ccc2',
}

RGB Array

[48, 46, 46], [89, 88, 77], [108, 128, 101], [117, 158, 138], [133, 204, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #302E2E, #59584D, #6C8065, #759E8A, #85CCC2 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #302e2e; --color-2: #59584d; --color-3: #6c8065; --color-4: #759e8a; --color-5: #85ccc2. 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. Restrained colors convey professionalism and trust. 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