← Back to Editor

#385B57 · #768767 · #9F9770 · #BB9C88 · #D0D0C8

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

#385B57

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#385B57
RGB
rgb(56, 91, 87)
HSL
hsl(173, 24%, 29%)
HSB
hsb(173, 38%, 36%)
CMYK
cmyk(38%, 0%, 4%, 64%)
Oklch
oklch(44.3% 0.041 186.7)

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

#768767

Celadon · Gray · Olive Green

HEX
#768767
RGB
rgb(118, 135, 103)
HSL
hsl(92, 13%, 47%)
HSB
hsb(92, 24%, 53%)
CMYK
cmyk(13%, 0%, 24%, 47%)
Oklch
oklch(60.1% 0.051 130.6)

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

#9F9770

Autumn Sage · Gray · Sunflower

HEX
#9F9770
RGB
rgb(159, 151, 112)
HSL
hsl(50, 20%, 53%)
HSB
hsb(50, 30%, 62%)
CMYK
cmyk(0%, 5%, 30%, 38%)
Oklch
oklch(67.3% 0.055 97.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#BB9C88

Apricot · Tan · Warm Sun

HEX
#BB9C88
RGB
rgb(187, 156, 136)
HSL
hsl(24, 27%, 63%)
HSB
hsb(24, 27%, 73%)
CMYK
cmyk(0%, 17%, 27%, 27%)
Oklch
oklch(71.5% 0.047 54.6)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#D0D0C8

Fresh Green · LightGray · Pearl Gray

HEX
#D0D0C8
RGB
rgb(208, 208, 200)
HSL
hsl(60, 8%, 80%)
HSB
hsb(60, 4%, 82%)
CMYK
cmyk(0%, 0%, 4%, 18%)
Oklch
oklch(85.5% 0.011 106.6)

Traditional「Fresh Green」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

385B57
5C383C

Analogous

385C46
385B57
384E5C

Triadic

385B57
58385C
5C5838

Split-Comp.

385B57
5C384E
5C4638

Tetradic

385B57
46385C
5C383C
4E5C38

Contrast Matrix WCAG 2.1 Contrast

385B57
768767
9F9770
BB9C88
D0D0C8
—
1.9
Fail
2.5
Fail
2.9
Fail
4.8
AA
1.9
Fail
—
1.3
Fail
1.5
Fail
2.5
Fail
2.5
Fail
1.3
Fail
—
1.2
Fail
1.9
Fail
2.9
Fail
1.5
Fail
1.2
Fail
—
1.6
Fail
4.8
AA
2.5
Fail
1.9
Fail
1.6
Fail
—
White BG
7.5AAA
3.9AA Large
2.9Fail
2.6Fail
1.6Fail
Black BG
2.8Fail
5.4AA
7.1AAA
8.2AAA
13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

474758
7D7E6F
9C9B79
AEAD8D
D0D0CA

Deuteranopia

454358
7C7B71
9C9D7C
AFB28E
D0D0CA

Tritanopia

3A5959
777576
9F8183
B99192
D0CBCC

Achromatopsia

505050
7E7E7E
959595
A3A3A3
CFCFCF

Shades & Tints Shades & Tints

#385B57

Dark
Light

#768767

Dark
Light

#9F9770

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #385b57;
  --color-2: #768767;
  --color-3: #9f9770;
  --color-4: #bb9c88;
  --color-5: #d0d0c8;
}

SCSS

$color-1: #385b57;
$color-2: #768767;
$color-3: #9f9770;
$color-4: #bb9c88;
$color-5: #d0d0c8;

TAILWIND

colors: {
  'brand-1': '#385b57',
  'brand-2': '#768767',
  'brand-3': '#9f9770',
  'brand-4': '#bb9c88',
  'brand-5': '#d0d0c8',
}

RGB Array

[56, 91, 87], [118, 135, 103], [159, 151, 112], [187, 156, 136], [208, 208, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #385B57, #768767, #9F9770, #BB9C88, #D0D0C8 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: #385b57; --color-2: #768767; --color-3: #9f9770; --color-4: #bb9c88; --color-5: #d0d0c8. 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