← Back to Editor

#4D363C · #60A7AB · #8CB9BB · #B1B7A5 · #D5B68E

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

#4D363C

Dark Violet · DarkSlateGray · Camellia

HEX
#4D363C
RGB
rgb(77, 54, 60)
HSL
hsl(344, 18%, 26%)
HSB
hsb(344, 30%, 30%)
CMYK
cmyk(0%, 30%, 22%, 70%)
Oklch
oklch(36.1% 0.034 1.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#60A7AB

Slate Blue · CadetBlue · Lake Green

HEX
#60A7AB
RGB
rgb(96, 167, 171)
HSL
hsl(183, 31%, 52%)
HSB
hsb(183, 44%, 67%)
CMYK
cmyk(44%, 2%, 0%, 33%)
Oklch
oklch(68.3% 0.072 200.3)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#8CB9BB

Sky Blue · DarkGray · Lake Green

HEX
#8CB9BB
RGB
rgb(140, 185, 187)
HSL
hsl(183, 26%, 64%)
HSB
hsb(183, 25%, 73%)
CMYK
cmyk(25%, 1%, 0%, 27%)
Oklch
oklch(75.4% 0.048 199.6)

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

#B1B7A5

Willow Green · DarkGray · Apple Green

HEX
#B1B7A5
RGB
rgb(177, 183, 165)
HSL
hsl(80, 11%, 68%)
HSB
hsb(80, 10%, 72%)
CMYK
cmyk(3%, 0%, 10%, 28%)
Oklch
oklch(77.0% 0.026 122.0)

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

#D5B68E

Ginger · Tan · Warm Sun

HEX
#D5B68E
RGB
rgb(213, 182, 142)
HSL
hsl(34, 46%, 70%)
HSB
hsb(34, 33%, 84%)
CMYK
cmyk(0%, 15%, 33%, 16%)
Oklch
oklch(79.3% 0.064 73.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D363C
364E48

Analogous

4E3649
4D363C
4E3C36

Triadic

4D363C
3D4E36
363D4E

Split-Comp.

4D363C
364E3C
36494E

Tetradic

4D363C
494E36
364E48
3C364E

Contrast Matrix WCAG 2.1 Contrast

4D363C
60A7AB
8CB9BB
B1B7A5
D5B68E
—
4.0
AA Large
5.1
AA
5.3
AA
5.7
AA
4.0
AA Large
—
1.3
Fail
1.3
Fail
1.4
Fail
5.1
AA
1.3
Fail
—
1.0
Fail
1.1
Fail
5.3
AA
1.3
Fail
1.0
Fail
—
1.1
Fail
5.7
AA
1.4
Fail
1.1
Fail
1.1
Fail
—
White BG
11.0AAA
2.8Fail
2.1Fail
2.1Fail
1.9Fail
Black BG
1.9Fail
7.6AAA
9.8AAA
10.2AAA
10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

43433B
7F7FAA
9FA0BB
B4B4A9
C8C798

Deuteranopia

44463A
7B75AA
9D9ABA
B3B3AA
C9CC9A

Tritanopia

4C3939
64A9A9
8EBABA
B1ADAE
D39FA1

Achromatopsia

3E3E3E
929292
ACACAC
B3B3B3
BBBBBB

Shades & Tints Shades & Tints

#4D363C

Dark
Light

#60A7AB

Dark
Light

#8CB9BB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d363c;
  --color-2: #60a7ab;
  --color-3: #8cb9bb;
  --color-4: #b1b7a5;
  --color-5: #d5b68e;
}

SCSS

$color-1: #4d363c;
$color-2: #60a7ab;
$color-3: #8cb9bb;
$color-4: #b1b7a5;
$color-5: #d5b68e;

TAILWIND

colors: {
  'brand-1': '#4d363c',
  'brand-2': '#60a7ab',
  'brand-3': '#8cb9bb',
  'brand-4': '#b1b7a5',
  'brand-5': '#d5b68e',
}

RGB Array

[77, 54, 60], [96, 167, 171], [140, 185, 187], [177, 183, 165], [213, 182, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4D363C, #60A7AB, #8CB9BB, #B1B7A5, #D5B68E 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: #4d363c; --color-2: #60a7ab; --color-3: #8cb9bb; --color-4: #b1b7a5; --color-5: #d5b68e. 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