← Back to Editor

#35303B · #6C5A68 · #867F81 · #9FA59B · #B9CAB4

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

#35303B

Deep Indigo · DarkSlateGray · Eggplant

HEX
#35303B
RGB
rgb(53, 48, 59)
HSL
hsl(267, 10%, 21%)
HSB
hsb(267, 19%, 23%)
CMYK
cmyk(10%, 19%, 0%, 77%)
Oklch
oklch(31.9% 0.020 305.8)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#6C5A68

Rose Purple · DimGray · Charcoal

HEX
#6C5A68
RGB
rgb(108, 90, 104)
HSL
hsl(313, 9%, 39%)
HSB
hsb(313, 17%, 42%)
CMYK
cmyk(0%, 17%, 4%, 58%)
Oklch
oklch(49.0% 0.032 333.8)

Traditional「Rose Purple」· Paint「Charcoal」· Creative Midnight Shadow

#867F81

Ash · Gray · Warm Gray

HEX
#867F81
RGB
rgb(134, 127, 129)
HSL
hsl(343, 3%, 51%)
HSB
hsb(343, 5%, 53%)
CMYK
cmyk(0%, 5%, 4%, 47%)
Oklch
oklch(60.3% 0.009 358.0)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#9FA59B

Ash · DarkGray · Silver Sand

HEX
#9FA59B
RGB
rgb(159, 165, 155)
HSL
hsl(96, 5%, 63%)
HSB
hsb(96, 6%, 65%)
CMYK
cmyk(4%, 0%, 6%, 35%)
Oklch
oklch(71.4% 0.016 132.5)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#B9CAB4

Celadon · Silver · Apple Green

HEX
#B9CAB4
RGB
rgb(185, 202, 180)
HSL
hsl(106, 17%, 75%)
HSB
hsb(106, 11%, 79%)
CMYK
cmyk(8%, 0%, 11%, 21%)
Oklch
oklch(82.0% 0.035 138.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

35303B
363B30

Analogous

30313B
35303B
3A303B

Triadic

35303B
3B3530
303B35

Split-Comp.

35303B
3B3A30
313B30

Tetradic

35303B
3B3031
363B30
303B3A

Contrast Matrix WCAG 2.1 Contrast

35303B
6C5A68
867F81
9FA59B
B9CAB4
—
2.0
Fail
3.3
AA Large
5.1
AA
7.4
AAA
2.0
Fail
—
1.6
Fail
2.5
Fail
3.7
AA Large
3.3
AA Large
1.6
Fail
—
1.6
Fail
2.3
Fail
5.1
AA
2.5
Fail
1.6
Fail
—
1.5
Fail
7.4
AAA
3.7
AA Large
2.3
Fail
1.5
Fail
—
White BG
12.8AAA
6.4AA
3.9AA Large
2.5Fail
1.7Fail
Black BG
1.6Fail
3.3AA Large
5.4AA
8.3AAA
12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

333338
646465
838381
A2A29D
C0C1B9

Deuteranopia

333338
656764
838480
A1A19E
BFBEBB

Tritanopia

353636
6B6261
868080
9F9FA0
BABEBE

Achromatopsia

333333
616161
818181
A2A2A2
C2C2C2

Shades & Tints Shades & Tints

#35303B

Dark
Light

#6C5A68

Dark
Light

#867F81

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #35303b;
  --color-2: #6c5a68;
  --color-3: #867f81;
  --color-4: #9fa59b;
  --color-5: #b9cab4;
}

SCSS

$color-1: #35303b;
$color-2: #6c5a68;
$color-3: #867f81;
$color-4: #9fa59b;
$color-5: #b9cab4;

TAILWIND

colors: {
  'brand-1': '#35303b',
  'brand-2': '#6c5a68',
  'brand-3': '#867f81',
  'brand-4': '#9fa59b',
  'brand-5': '#b9cab4',
}

RGB Array

[53, 48, 59], [108, 90, 104], [134, 127, 129], [159, 165, 155], [185, 202, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #35303B, #6C5A68, #867F81, #9FA59B, #B9CAB4 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: #35303b; --color-2: #6c5a68; --color-3: #867f81; --color-4: #9fa59b; --color-5: #b9cab4. 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