← Back to Editor

#927E64 · #B9AB7A · #D5C88D · #E3DE96 · #ABC5A5

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#927E64

Ochre · Gray · Amber Brown

HEX
#927E64
RGB
rgb(146, 126, 100)
HSL
hsl(34, 19%, 48%)
HSB
hsb(34, 32%, 57%)
CMYK
cmyk(0%, 14%, 32%, 43%)
Oklch
oklch(60.5% 0.045 74.1)

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

#B9AB7A

Ginger · Tan · Sunflower

HEX
#B9AB7A
RGB
rgb(185, 171, 122)
HSL
hsl(47, 31%, 60%)
HSB
hsb(47, 34%, 73%)
CMYK
cmyk(0%, 8%, 34%, 27%)
Oklch
oklch(74.1% 0.068 94.1)

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

#D5C88D

Ginger · BurlyWood · Sunflower

HEX
#D5C88D
RGB
rgb(213, 200, 141)
HSL
hsl(49, 46%, 69%)
HSB
hsb(49, 34%, 84%)
CMYK
cmyk(0%, 6%, 34%, 16%)
Oklch
oklch(83.0% 0.078 97.2)

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

#E3DE96

Fresh Green · Khaki · Sunflower

HEX
#E3DE96
RGB
rgb(227, 222, 150)
HSL
hsl(56, 58%, 74%)
HSB
hsb(56, 34%, 89%)
CMYK
cmyk(0%, 2%, 34%, 11%)
Oklch
oklch(88.8% 0.092 104.7)

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

#ABC5A5

Celadon · DarkGray · Apple Green

HEX
#ABC5A5
RGB
rgb(171, 197, 165)
HSL
hsl(109, 22%, 71%)
HSB
hsb(109, 16%, 77%)
CMYK
cmyk(13%, 0%, 16%, 23%)
Oklch
oklch(79.5% 0.053 139.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

927E64
637792

Analogous

926663
927E64
8F9263

Triadic

927E64
63927E
7E6392

Split-Comp.

927E64
638F92
666392

Tetradic

927E64
639266
637792
92638F

Contrast Matrix WCAG 2.1 Contrast

927E64
B9AB7A
D5C88D
E3DE96
ABC5A5
—
1.7
Fail
2.3
Fail
2.8
Fail
2.1
Fail
1.7
Fail
—
1.4
Fail
1.7
Fail
1.2
Fail
2.3
Fail
1.4
Fail
—
1.2
Fail
1.1
Fail
2.8
Fail
1.7
Fail
1.2
Fail
—
1.3
Fail
2.1
Fail
1.2
Fail
1.1
Fail
1.3
Fail
—
White BG
3.9AA Large
2.3Fail
1.7Fail
1.4Fail
1.9Fail
Black BG
5.4AA
9.2AAA
12.5AAA
15.2AAA
11.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

89896A
B3B386
CFCF9B
E1E1A7
B6B6AD

Deuteranopia

8B8C6C
B4B589
D0D19F
E1E1AC
B5B3AF

Tritanopia

916F70
B88F91
D4A7A9
E3B5B8
ACB3B4

Achromatopsia

818181
AAAAAA
C5C5C5
D7D7D7
BABABA

Shades & Tints Shades & Tints

#927E64

Dark
Light

#B9AB7A

Dark
Light

#D5C88D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #927e64;
  --color-2: #b9ab7a;
  --color-3: #d5c88d;
  --color-4: #e3de96;
  --color-5: #abc5a5;
}

SCSS

$color-1: #927e64;
$color-2: #b9ab7a;
$color-3: #d5c88d;
$color-4: #e3de96;
$color-5: #abc5a5;

TAILWIND

colors: {
  'brand-1': '#927e64',
  'brand-2': '#b9ab7a',
  'brand-3': '#d5c88d',
  'brand-4': '#e3de96',
  'brand-5': '#abc5a5',
}

RGB Array

[146, 126, 100], [185, 171, 122], [213, 200, 141], [227, 222, 150], [171, 197, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #927E64, #B9AB7A, #D5C88D, #E3DE96, #ABC5A5 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: #927e64; --color-2: #b9ab7a; --color-3: #d5c88d; --color-4: #e3de96; --color-5: #abc5a5. 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