← Back to Editor

#846666 · #B38E73 · #EEE8C8 · #8BCBCB · #6991AA

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 Library

Color Details Color Details

#846666

Crimson · DimGray · Passion Red

HEX
#846666
RGB
rgb(132, 102, 102)
HSL
hsl(0, 13%, 46%)
HSB
hsb(0, 23%, 52%)
CMYK
cmyk(0%, 23%, 23%, 48%)
Oklch
oklch(54.0% 0.039 18.4)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#B38E73

Tangerine · Gray · Warm Sun

HEX
#B38E73
RGB
rgb(179, 142, 115)
HSL
hsl(25, 30%, 58%)
HSB
hsb(25, 36%, 70%)
CMYK
cmyk(0%, 21%, 36%, 30%)
Oklch
oklch(67.5% 0.059 57.7)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#EEE8C8

Fresh Green · Bisque · Lemon Cream

HEX
#EEE8C8
RGB
rgb(238, 232, 200)
HSL
hsl(51, 53%, 86%)
HSB
hsb(51, 16%, 93%)
CMYK
cmyk(0%, 3%, 16%, 7%)
Oklch
oklch(92.7% 0.043 98.4)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#8BCBCB

Sky Blue · SkyBlue · Lake Green

HEX
#8BCBCB
RGB
rgb(139, 203, 203)
HSL
hsl(180, 38%, 67%)
HSB
hsb(180, 32%, 80%)
CMYK
cmyk(32%, 0%, 0%, 20%)
Oklch
oklch(79.9% 0.065 195.9)

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

#6991AA

Slate Blue · CadetBlue · Navy Blue

HEX
#6991AA
RGB
rgb(105, 145, 170)
HSL
hsl(203, 28%, 54%)
HSB
hsb(203, 38%, 67%)
CMYK
cmyk(38%, 15%, 0%, 33%)
Oklch
oklch(63.7% 0.058 236.3)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

846666
668585

Analogous

856675
846666
857566

Triadic

846666
668566
666685

Split-Comp.

846666
668575
667585

Tetradic

846666
758566
668585
756685

Contrast Matrix WCAG 2.1 Contrast

846666
B38E73
EEE8C8
8BCBCB
6991AA
—
1.7
Fail
4.2
AA Large
2.8
Fail
1.5
Fail
1.7
Fail
—
2.4
Fail
1.6
Fail
1.1
Fail
4.2
AA Large
2.4
Fail
—
1.5
Fail
2.7
Fail
2.8
Fail
1.6
Fail
1.5
Fail
—
1.8
Fail
1.5
Fail
1.1
Fail
2.7
Fail
1.8
Fail
—
White BG
5.2AA
3.0Fail
1.2Fail
1.8Fail
3.4AA Large
Black BG
4.1AA Large
7.0AAA
17.0AAA
11.5AAA
6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

777766
A3A37A
EBEBD0
A7A7CB
7A7BA4

Deuteranopia

797B66
A5A87B
ECECD2
A39ECB
7875A3

Tritanopia

836666
B17F80
EED6D7
8ECBCB
6B9F9E

Achromatopsia

6F6F6F
969696
E6E6E6
B8B8B8
888888

Shades & Tints Shades & Tints

#846666

Dark
Light

#B38E73

Dark
Light

#EEE8C8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #846666;
  --color-2: #b38e73;
  --color-3: #eee8c8;
  --color-4: #8bcbcb;
  --color-5: #6991aa;
}

SCSS

$color-1: #846666;
$color-2: #b38e73;
$color-3: #eee8c8;
$color-4: #8bcbcb;
$color-5: #6991aa;

TAILWIND

colors: {
  'brand-1': '#846666',
  'brand-2': '#b38e73',
  'brand-3': '#eee8c8',
  'brand-4': '#8bcbcb',
  'brand-5': '#6991aa',
}

RGB Array

[132, 102, 102], [179, 142, 115], [238, 232, 200], [139, 203, 203], [105, 145, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #846666, #B38E73, #EEE8C8, #8BCBCB, #6991AA is ideal for: corporate websites, product showcases, portfolios. 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: #846666; --color-2: #b38e73; --color-3: #eee8c8; --color-4: #8bcbcb; --color-5: #6991aa. 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. 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