← Back to Editor

#AB9953 · #322F25 · #655D43 · #BEC9B2 · #CED2C6

cool

A 5-color cool palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#AB9953

Ochre · Gray · Honey Gold

HEX
#AB9953
RGB
rgb(171, 153, 83)
HSL
hsl(48, 35%, 50%)
HSB
hsb(48, 51%, 67%)
CMYK
cmyk(0%, 11%, 51%, 33%)
Oklch
oklch(68.4% 0.093 95.3)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#322F25

Ochre · DarkSlateGray · Amber Gold

HEX
#322F25
RGB
rgb(50, 47, 37)
HSL
hsl(46, 15%, 17%)
HSB
hsb(46, 26%, 20%)
CMYK
cmyk(0%, 6%, 26%, 80%)
Oklch
oklch(30.5% 0.018 93.3)

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

#655D43

Ochre · DarkOliveGreen · Honey Gold

HEX
#655D43
RGB
rgb(101, 93, 67)
HSL
hsl(46, 20%, 33%)
HSB
hsb(46, 34%, 40%)
CMYK
cmyk(0%, 8%, 34%, 60%)
Oklch
oklch(47.9% 0.041 93.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#BEC9B2

Willow Green · Silver · Apple Green

HEX
#BEC9B2
RGB
rgb(190, 201, 178)
HSL
hsl(89, 18%, 74%)
HSB
hsb(89, 11%, 79%)
CMYK
cmyk(5%, 0%, 11%, 21%)
Oklch
oklch(82.1% 0.034 128.1)

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

#CED2C6

Willow Green · LightGray · Apple Green

HEX
#CED2C6
RGB
rgb(206, 210, 198)
HSL
hsl(80, 12%, 80%)
HSB
hsb(80, 6%, 82%)
CMYK
cmyk(2%, 0%, 6%, 18%)
Oklch
oklch(85.7% 0.017 121.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AB9953
5365AC

Analogous

AC6E53
AB9953
91AC53

Triadic

AB9953
53AC9A
9A53AC

Split-Comp.

AB9953
5391AC
6E53AC

Tetradic

AB9953
53AC6E
5365AC
AC5391

Contrast Matrix WCAG 2.1 Contrast

AB9953
322F25
655D43
BEC9B2
CED2C6
—
4.7
AA
2.3
Fail
1.6
Fail
1.8
Fail
4.7
AA
—
2.0
Fail
7.8
AAA
8.7
AAA
2.3
Fail
2.0
Fail
—
3.8
AA Large
4.3
AA Large
1.6
Fail
7.8
AAA
3.8
AA Large
—
1.1
Fail
1.8
Fail
8.7
AAA
4.3
AA Large
1.1
Fail
—
White BG
2.8Fail
13.4AAA
6.6AA
1.7Fail
1.5Fail
Black BG
7.4AAA
1.6Fail
3.2AA Large
12.2AAA
13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A364
313127
626149
C3C3B8
D0D0C9

Deuteranopia

A4A668
313128
62634B
C2C1B9
D0CFCA

Tritanopia

AA7174
32292A
654E4F
BFBCBD
CECBCC

Achromatopsia

969696
2F2F2F
5C5C5C
C3C3C3
CFCFCF

Shades & Tints Shades & Tints

#AB9953

Dark
Light

#322F25

Dark
Light

#655D43

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ab9953;
  --color-2: #322f25;
  --color-3: #655d43;
  --color-4: #bec9b2;
  --color-5: #ced2c6;
}

SCSS

$color-1: #ab9953;
$color-2: #322f25;
$color-3: #655d43;
$color-4: #bec9b2;
$color-5: #ced2c6;

TAILWIND

colors: {
  'brand-1': '#ab9953',
  'brand-2': '#322f25',
  'brand-3': '#655d43',
  'brand-4': '#bec9b2',
  'brand-5': '#ced2c6',
}

RGB Array

[171, 153, 83], [50, 47, 37], [101, 93, 67], [190, 201, 178], [206, 210, 198]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #AB9953, #322F25, #655D43, #BEC9B2, #CED2C6 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: #ab9953; --color-2: #322f25; --color-3: #655d43; --color-4: #bec9b2; --color-5: #ced2c6. 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