← Back to Editor

#544C49 · #697D75 · #BFC7A3 · #EBEAB2 · #8AB8A8

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 LibraryData Visualization

Color Details Color Details

#544C49

Ink Gray · DarkSlateGray · Charcoal

HEX
#544C49
RGB
rgb(84, 76, 73)
HSL
hsl(16, 7%, 31%)
HSB
hsb(16, 13%, 33%)
CMYK
cmyk(0%, 10%, 13%, 67%)
Oklch
oklch(42.3% 0.012 41.8)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#697D75

Mineral Blue · DimGray · Warm Gray

HEX
#697D75
RGB
rgb(105, 125, 117)
HSL
hsl(156, 9%, 45%)
HSB
hsb(156, 16%, 49%)
CMYK
cmyk(16%, 0%, 6%, 51%)
Oklch
oklch(57.1% 0.026 169.2)

Traditional「Mineral Blue」· Paint「Warm Gray」· Creative Urban Concrete

#BFC7A3

Willow Green · Silver · Apple Green

HEX
#BFC7A3
RGB
rgb(191, 199, 163)
HSL
hsl(73, 24%, 71%)
HSB
hsb(73, 18%, 78%)
CMYK
cmyk(4%, 0%, 18%, 22%)
Oklch
oklch(81.4% 0.050 117.7)

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

#EBEAB2

Fresh Green · Wheat · Lemon Cream

HEX
#EBEAB2
RGB
rgb(235, 234, 178)
HSL
hsl(59, 59%, 81%)
HSB
hsb(59, 24%, 92%)
CMYK
cmyk(0%, 0%, 24%, 8%)
Oklch
oklch(92.4% 0.072 106.9)

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

#8AB8A8

Jade · DarkSeaGreen · Apple Green

HEX
#8AB8A8
RGB
rgb(138, 184, 168)
HSL
hsl(159, 24%, 63%)
HSB
hsb(159, 25%, 72%)
CMYK
cmyk(25%, 0%, 9%, 28%)
Oklch
oklch(74.5% 0.054 171.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

544C49
4A5255

Analogous

554A4C
544C49
55524A

Triadic

544C49
4A554C
4C4A55

Split-Comp.

544C49
4A5552
4A4C55

Tetradic

544C49
4C554A
4A5255
524A55

Contrast Matrix WCAG 2.1 Contrast

544C49
697D75
BFC7A3
EBEAB2
8AB8A8
—
1.9
Fail
4.8
AA
6.8
AA
3.8
AA Large
1.9
Fail
—
2.5
Fail
3.5
AA Large
2.0
Fail
4.8
AA
2.5
Fail
—
1.4
Fail
1.3
Fail
6.8
AA
3.5
AA Large
1.4
Fail
—
1.8
Fail
3.8
AA Large
2.0
Fail
1.3
Fail
1.8
Fail
—
White BG
8.4AAA
4.4AA Large
1.8Fail
1.2Fail
2.2Fail
Black BG
2.5Fail
4.8AA
11.9AAA
16.9AAA
9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

51504A
727277
C2C3AC
EBEBC0
9E9EAC

Deuteranopia

51524A
716F77
C2C1AE
EBEBC3
9B98AD

Tritanopia

544A4A
6A7879
BFB3B4
EBCACD
8CAFB0

Achromatopsia

4E4E4E
767676
C1C1C1
E4E4E4
A8A8A8

Shades & Tints Shades & Tints

#544C49

Dark
Light

#697D75

Dark
Light

#BFC7A3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #544c49;
  --color-2: #697d75;
  --color-3: #bfc7a3;
  --color-4: #ebeab2;
  --color-5: #8ab8a8;
}

SCSS

$color-1: #544c49;
$color-2: #697d75;
$color-3: #bfc7a3;
$color-4: #ebeab2;
$color-5: #8ab8a8;

TAILWIND

colors: {
  'brand-1': '#544c49',
  'brand-2': '#697d75',
  'brand-3': '#bfc7a3',
  'brand-4': '#ebeab2',
  'brand-5': '#8ab8a8',
}

RGB Array

[84, 76, 73], [105, 125, 117], [191, 199, 163], [235, 234, 178], [138, 184, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #544C49, #697D75, #BFC7A3, #EBEAB2, #8AB8A8 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: #544c49; --color-2: #697d75; --color-3: #bfc7a3; --color-4: #ebeab2; --color-5: #8ab8a8. 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 general-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