← Back to Editor

#A37631 · #BB9E66 · #C3B79F · #8B8A90 · #333A54

cool

A 5-color cool 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

#A37631

Ochre · Sienna · Amber Brown

HEX
#A37631
RGB
rgb(163, 118, 49)
HSL
hsl(36, 54%, 42%)
HSB
hsb(36, 70%, 64%)
CMYK
cmyk(0%, 28%, 70%, 36%)
Oklch
oklch(59.8% 0.102 75.0)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#BB9E66

Ginger · Tan · Sunflower

HEX
#BB9E66
RGB
rgb(187, 158, 102)
HSL
hsl(40, 38%, 57%)
HSB
hsb(40, 45%, 73%)
CMYK
cmyk(0%, 16%, 45%, 27%)
Oklch
oklch(71.2% 0.081 83.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#C3B79F

Ginger · Tan · Sunflower

HEX
#C3B79F
RGB
rgb(195, 183, 159)
HSL
hsl(40, 23%, 69%)
HSB
hsb(40, 18%, 76%)
CMYK
cmyk(0%, 6%, 18%, 24%)
Oklch
oklch(78.3% 0.036 84.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#8B8A90

Ash · Gray · Warm Gray

HEX
#8B8A90
RGB
rgb(139, 138, 144)
HSL
hsl(250, 3%, 55%)
HSB
hsb(250, 4%, 56%)
CMYK
cmyk(3%, 4%, 0%, 44%)
Oklch
oklch(63.6% 0.009 293.8)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#333A54

Indigo · DarkSlateGray · Prussian Blue

HEX
#333A54
RGB
rgb(51, 58, 84)
HSL
hsl(227, 24%, 26%)
HSB
hsb(227, 39%, 33%)
CMYK
cmyk(39%, 31%, 0%, 67%)
Oklch
oklch(35.4% 0.046 272.3)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A37631
3160A5

Analogous

A53D31
A37631
99A531

Triadic

A37631
31A577
7731A5

Split-Comp.

A37631
3199A5
3D31A5

Tetradic

A37631
31A53D
3160A5
A53199

Contrast Matrix WCAG 2.1 Contrast

A37631
BB9E66
C3B79F
8B8A90
333A54
—
1.6
Fail
2.0
Fail
1.2
Fail
2.8
Fail
1.6
Fail
—
1.3
Fail
1.3
Fail
4.4
AA Large
2.0
Fail
1.3
Fail
—
1.7
Fail
5.7
AA
1.2
Fail
1.3
Fail
1.7
Fail
—
3.3
AA Large
2.8
Fail
4.4
AA Large
5.7
AA
3.3
AA Large
—
White BG
4.0AA Large
2.6Fail
2.0Fail
3.4AA Large
11.2AAA
Black BG
5.2AA
8.2AAA
10.6AAA
6.1AA
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

908F42
AEAE74
BEBEA5
8B8B8F
36364E

Deuteranopia

929646
B0B277
BFBFA6
8B8B8E
36354C

Tritanopia

A14F52
BA7E81
C2A9AA
8B8D8D
334948

Achromatopsia

7C7C7C
A0A0A0
B8B8B8
8B8B8B
3B3B3B

Shades & Tints Shades & Tints

#A37631

Dark
Light

#BB9E66

Dark
Light

#C3B79F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a37631;
  --color-2: #bb9e66;
  --color-3: #c3b79f;
  --color-4: #8b8a90;
  --color-5: #333a54;
}

SCSS

$color-1: #a37631;
$color-2: #bb9e66;
$color-3: #c3b79f;
$color-4: #8b8a90;
$color-5: #333a54;

TAILWIND

colors: {
  'brand-1': '#a37631',
  'brand-2': '#bb9e66',
  'brand-3': '#c3b79f',
  'brand-4': '#8b8a90',
  'brand-5': '#333a54',
}

RGB Array

[163, 118, 49], [187, 158, 102], [195, 183, 159], [139, 138, 144], [51, 58, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #A37631, #BB9E66, #C3B79F, #8B8A90, #333A54 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: #a37631; --color-2: #bb9e66; --color-3: #c3b79f; --color-4: #8b8a90; --color-5: #333a54. 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 cool-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