← Back to Editor

#667863 · #2B2D2A · #5D6260 · #D2D6DA · #7B7965

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

#667863

Celadon · DimGray · Olive Green

HEX
#667863
RGB
rgb(102, 120, 99)
HSL
hsl(111, 10%, 43%)
HSB
hsb(111, 17%, 47%)
CMYK
cmyk(15%, 0%, 18%, 53%)
Oklch
oklch(55.2% 0.038 141.1)

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

#2B2D2A

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#2B2D2A
RGB
rgb(43, 45, 42)
HSL
hsl(100, 3%, 17%)
HSB
hsb(100, 7%, 18%)
CMYK
cmyk(4%, 0%, 7%, 82%)
Oklch
oklch(29.4% 0.006 134.9)

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

#5D6260

Ink Gray · DimGray · Charcoal

HEX
#5D6260
RGB
rgb(93, 98, 96)
HSL
hsl(156, 3%, 37%)
HSB
hsb(156, 5%, 38%)
CMYK
cmyk(5%, 0%, 2%, 62%)
Oklch
oklch(49.1% 0.007 170.2)

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

#D2D6DA

Azure · LightGray · Sky Blue

HEX
#D2D6DA
RGB
rgb(210, 214, 218)
HSL
hsl(210, 10%, 84%)
HSB
hsb(210, 4%, 85%)
CMYK
cmyk(4%, 2%, 0%, 15%)
Oklch
oklch(87.4% 0.007 247.9)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#7B7965

Autumn Sage · DimGray · Honey Gold

HEX
#7B7965
RGB
rgb(123, 121, 101)
HSL
hsl(55, 10%, 44%)
HSB
hsb(55, 18%, 48%)
CMYK
cmyk(0%, 2%, 18%, 52%)
Oklch
oklch(57.2% 0.030 102.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

667863
756379

Analogous

717963
667863
63796A

Triadic

667863
636679
796366

Split-Comp.

667863
6A6379
796371

Tetradic

667863
637179
756379
796A63

Contrast Matrix WCAG 2.1 Contrast

667863
2B2D2A
5D6260
D2D6DA
7B7965
—
2.9
Fail
1.3
Fail
3.2
AA Large
1.1
Fail
2.9
Fail
—
2.2
Fail
9.5
AAA
3.2
AA Large
1.3
Fail
2.2
Fail
—
4.3
AA Large
1.4
Fail
3.2
AA Large
9.5
AAA
4.3
AA Large
—
3.0
AA Large
1.1
Fail
3.2
AA Large
1.4
Fail
3.0
AA Large
—
White BG
4.7AA
13.9AAA
6.2AA
1.5Fail
4.4AA Large
Black BG
4.4AA Large
1.5Fail
3.4AA Large
14.4AAA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6E68
2C2C2B
5F5F60
D4D4D9
7A7A6A

Deuteranopia

6D6B69
2C2C2B
5F5F61
D4D3D9
7A7A6B

Tritanopia

676C6D
2B2B2B
5D6161
D2D8D8
7B6E6F

Achromatopsia

707070
2C2C2C
606060
D5D5D5
777777

Shades & Tints Shades & Tints

#667863

Dark
Light

#2B2D2A

Dark
Light

#5D6260

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #667863;
  --color-2: #2b2d2a;
  --color-3: #5d6260;
  --color-4: #d2d6da;
  --color-5: #7b7965;
}

SCSS

$color-1: #667863;
$color-2: #2b2d2a;
$color-3: #5d6260;
$color-4: #d2d6da;
$color-5: #7b7965;

TAILWIND

colors: {
  'brand-1': '#667863',
  'brand-2': '#2b2d2a',
  'brand-3': '#5d6260',
  'brand-4': '#d2d6da',
  'brand-5': '#7b7965',
}

RGB Array

[102, 120, 99], [43, 45, 42], [93, 98, 96], [210, 214, 218], [123, 121, 101]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #667863, #2B2D2A, #5D6260, #D2D6DA, #7B7965 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: #667863; --color-2: #2b2d2a; --color-3: #5d6260; --color-4: #d2d6da; --color-5: #7b7965. 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