← Back to Editor

#302D34 · #3E5B56 · #7EBAC4 · #DEEDD8 · #C5D887

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#302D34

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#302D34
RGB
rgb(48, 45, 52)
HSL
hsl(266, 7%, 19%)
HSB
hsb(266, 13%, 20%)
CMYK
cmyk(8%, 13%, 0%, 80%)
Oklch
oklch(30.3% 0.013 305.0)

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

#3E5B56

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#3E5B56
RGB
rgb(62, 91, 86)
HSL
hsl(170, 19%, 30%)
HSB
hsb(170, 32%, 36%)
CMYK
cmyk(32%, 0%, 5%, 64%)
Oklch
oklch(44.7% 0.035 182.8)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#7EBAC4

Sky Blue · MediumAquaMarine · Lake Green

HEX
#7EBAC4
RGB
rgb(126, 186, 196)
HSL
hsl(189, 37%, 63%)
HSB
hsb(189, 36%, 77%)
CMYK
cmyk(36%, 5%, 0%, 23%)
Oklch
oklch(75.1% 0.063 209.0)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#DEEDD8

Celadon · Beige · Mint Green

HEX
#DEEDD8
RGB
rgb(222, 237, 216)
HSL
hsl(103, 37%, 89%)
HSB
hsb(103, 9%, 93%)
CMYK
cmyk(6%, 0%, 9%, 7%)
Oklch
oklch(92.9% 0.032 136.6)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#C5D887

Willow Green · Tan · Apple Green

HEX
#C5D887
RGB
rgb(197, 216, 135)
HSL
hsl(74, 51%, 69%)
HSB
hsb(74, 38%, 85%)
CMYK
cmyk(9%, 0%, 38%, 15%)
Oklch
oklch(84.9% 0.107 119.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

302D34
31342D

Analogous

2D2E34
302D34
332D34

Triadic

302D34
34302D
2D3430

Split-Comp.

302D34
34332D
2E342D

Tetradic

302D34
342D2E
31342D
2D3433

Contrast Matrix WCAG 2.1 Contrast

302D34
3E5B56
7EBAC4
DEEDD8
C5D887
—
1.8
Fail
6.3
AA
11.1
AAA
8.7
AAA
1.8
Fail
—
3.4
AA Large
6.1
AA
4.8
AA
6.3
AA
3.4
AA Large
—
1.8
Fail
1.4
Fail
11.1
AAA
6.1
AA
1.8
Fail
—
1.3
Fail
8.7
AAA
4.8
AA
1.4
Fail
1.3
Fail
—
White BG
13.5AAA
7.4AAA
2.2Fail
1.2Fail
1.6Fail
Black BG
1.6Fail
2.8Fail
9.7AAA
17.2AAA
13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2F32
4B4B57
9899C2
E4E5DD
CDCD9B

Deuteranopia

2F2F32
494758
9590C1
E4E2DE
CCCB9F

Tritanopia

303131
3F5858
81C0BF
DFE1E2
C6AAAD

Achromatopsia

2F2F2F
525252
A9A9A9
E6E6E6
C9C9C9

Shades & Tints Shades & Tints

#302D34

Dark
Light

#3E5B56

Dark
Light

#7EBAC4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #302d34;
  --color-2: #3e5b56;
  --color-3: #7ebac4;
  --color-4: #deedd8;
  --color-5: #c5d887;
}

SCSS

$color-1: #302d34;
$color-2: #3e5b56;
$color-3: #7ebac4;
$color-4: #deedd8;
$color-5: #c5d887;

TAILWIND

colors: {
  'brand-1': '#302d34',
  'brand-2': '#3e5b56',
  'brand-3': '#7ebac4',
  'brand-4': '#deedd8',
  'brand-5': '#c5d887',
}

RGB Array

[48, 45, 52], [62, 91, 86], [126, 186, 196], [222, 237, 216], [197, 216, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #302D34, #3E5B56, #7EBAC4, #DEEDD8, #C5D887 is ideal for: 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: #302d34; --color-2: #3e5b56; --color-3: #7ebac4; --color-4: #deedd8; --color-5: #c5d887. 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. 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