← Back to Editor

#93B1A5 · #DEC396 · #C79A83 · #B5877A · #815C56

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

#93B1A5

Jade · DarkGray · Apple Green

HEX
#93B1A5
RGB
rgb(147, 177, 165)
HSL
hsl(156, 16%, 64%)
HSB
hsb(156, 17%, 69%)
CMYK
cmyk(17%, 0%, 7%, 31%)
Oklch
oklch(73.4% 0.037 169.1)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#DEC396

Goose Yellow · BurlyWood · Warm Sun

HEX
#DEC396
RGB
rgb(222, 195, 150)
HSL
hsl(37, 52%, 73%)
HSB
hsb(37, 32%, 87%)
CMYK
cmyk(0%, 12%, 32%, 13%)
Oklch
oklch(82.9% 0.067 80.3)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#C79A83

Apricot · Tan · Warm Sun

HEX
#C79A83
RGB
rgb(199, 154, 131)
HSL
hsl(20, 38%, 65%)
HSB
hsb(20, 34%, 78%)
CMYK
cmyk(0%, 23%, 34%, 22%)
Oklch
oklch(72.2% 0.063 48.4)

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

#B5877A

Crimson · Gray · Passion Red

HEX
#B5877A
RGB
rgb(181, 135, 122)
HSL
hsl(13, 29%, 59%)
HSB
hsb(13, 33%, 71%)
CMYK
cmyk(0%, 25%, 33%, 29%)
Oklch
oklch(66.4% 0.060 36.4)

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

#815C56

Crimson · DimGray · Passion Red

HEX
#815C56
RGB
rgb(129, 92, 86)
HSL
hsl(8, 20%, 42%)
HSB
hsb(8, 33%, 51%)
CMYK
cmyk(0%, 29%, 33%, 49%)
Oklch
oklch(51.2% 0.050 29.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

93B1A5
B295A0

Analogous

95B297
93B1A5
95AFB2

Triadic

93B1A5
A695B2
B2A695

Split-Comp.

93B1A5
B295AF
B29795

Tetradic

93B1A5
9795B2
B295A0
AFB295

Contrast Matrix WCAG 2.1 Contrast

93B1A5
DEC396
C79A83
B5877A
815C56
—
1.4
Fail
1.1
Fail
1.4
Fail
2.5
Fail
1.4
Fail
—
1.5
Fail
1.8
Fail
3.4
AA Large
1.1
Fail
1.5
Fail
—
1.2
Fail
2.3
Fail
1.4
Fail
1.8
Fail
1.2
Fail
—
1.9
Fail
2.5
Fail
3.4
AA Large
2.3
Fail
1.9
Fail
—
White BG
2.3Fail
1.7Fail
2.5Fail
3.1AA Large
5.8AA
Black BG
9.1AAA
12.4AAA
8.4AAA
6.7AA
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

A0A0A8
D2D2A1
B4B389
A1A17D
717157

Deuteranopia

9E9CA9
D4D6A4
B6B98A
A4A77E
737658

Tritanopia

95AAAB
DDA9AB
C58D8E
B38080
7F5959

Achromatopsia

A7A7A7
C6C6C6
A5A5A5
939393
666666

Shades & Tints Shades & Tints

#93B1A5

Dark
Light

#DEC396

Dark
Light

#C79A83

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #93b1a5;
  --color-2: #dec396;
  --color-3: #c79a83;
  --color-4: #b5877a;
  --color-5: #815c56;
}

SCSS

$color-1: #93b1a5;
$color-2: #dec396;
$color-3: #c79a83;
$color-4: #b5877a;
$color-5: #815c56;

TAILWIND

colors: {
  'brand-1': '#93b1a5',
  'brand-2': '#dec396',
  'brand-3': '#c79a83',
  'brand-4': '#b5877a',
  'brand-5': '#815c56',
}

RGB Array

[147, 177, 165], [222, 195, 150], [199, 154, 131], [181, 135, 122], [129, 92, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #93B1A5, #DEC396, #C79A83, #B5877A, #815C56 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: #93b1a5; --color-2: #dec396; --color-3: #c79a83; --color-4: #b5877a; --color-5: #815c56. 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