← Back to Editor

#BEAC7C · #BBA373 · #5C5648 · #98B0A0 · #AAC1AF

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

#BEAC7C

Ginger · Tan · Sunflower

HEX
#BEAC7C
RGB
rgb(190, 172, 124)
HSL
hsl(44, 34%, 62%)
HSB
hsb(44, 35%, 75%)
CMYK
cmyk(0%, 9%, 35%, 25%)
Oklch
oklch(74.8% 0.068 89.9)

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

#BBA373

Ginger · Tan · Sunflower

HEX
#BBA373
RGB
rgb(187, 163, 115)
HSL
hsl(40, 35%, 59%)
HSB
hsb(40, 39%, 73%)
CMYK
cmyk(0%, 13%, 39%, 27%)
Oklch
oklch(72.5% 0.070 84.2)

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

#5C5648

Ochre · DarkOliveGreen · Honey Gold

HEX
#5C5648
RGB
rgb(92, 86, 72)
HSL
hsl(42, 12%, 32%)
HSB
hsb(42, 22%, 36%)
CMYK
cmyk(0%, 7%, 22%, 64%)
Oklch
oklch(45.5% 0.023 87.6)

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

#98B0A0

Celadon · DarkGray · Apple Green

HEX
#98B0A0
RGB
rgb(152, 176, 160)
HSL
hsl(140, 13%, 64%)
HSB
hsb(140, 14%, 69%)
CMYK
cmyk(14%, 0%, 9%, 31%)
Oklch
oklch(73.4% 0.035 156.3)

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

#AAC1AF

Celadon · DarkGray · Apple Green

HEX
#AAC1AF
RGB
rgb(170, 193, 175)
HSL
hsl(133, 16%, 71%)
HSB
hsb(133, 12%, 76%)
CMYK
cmyk(12%, 0%, 9%, 24%)
Oklch
oklch(78.8% 0.036 151.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BEAC7C
7D8FBF

Analogous

BF8D7D
BEAC7C
B0BF7D

Triadic

BEAC7C
7DBFAD
AD7DBF

Split-Comp.

BEAC7C
7DB0BF
8D7DBF

Tetradic

BEAC7C
7DBF8D
7D8FBF
BF7DB0

Contrast Matrix WCAG 2.1 Contrast

BEAC7C
BBA373
5C5648
98B0A0
AAC1AF
—
1.1
Fail
3.3
AA Large
1.0
Fail
1.2
Fail
1.1
Fail
—
3.0
Fail
1.1
Fail
1.3
Fail
3.3
AA Large
3.0
Fail
—
3.1
AA Large
3.8
AA Large
1.0
Fail
1.1
Fail
3.1
AA Large
—
1.2
Fail
1.2
Fail
1.3
Fail
3.8
AA Large
1.2
Fail
—
White BG
2.2Fail
2.4Fail
7.3AAA
2.3Fail
1.9Fail
Black BG
9.4AAA
8.6AAA
2.9Fail
9.1AAA
11.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B688
B1B07F
59594B
A2A3A4
B4B4B3

Deuteranopia

B7B98A
B2B481
5A5A4C
A19FA5
B3B1B4

Tritanopia

BD9193
BA888A
5C4E4F
99A7A8
ABB7B8

Achromatopsia

ACACAC
A5A5A5
565656
A7A7A7
B8B8B8

Shades & Tints Shades & Tints

#BEAC7C

Dark
Light

#BBA373

Dark
Light

#5C5648

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #beac7c;
  --color-2: #bba373;
  --color-3: #5c5648;
  --color-4: #98b0a0;
  --color-5: #aac1af;
}

SCSS

$color-1: #beac7c;
$color-2: #bba373;
$color-3: #5c5648;
$color-4: #98b0a0;
$color-5: #aac1af;

TAILWIND

colors: {
  'brand-1': '#beac7c',
  'brand-2': '#bba373',
  'brand-3': '#5c5648',
  'brand-4': '#98b0a0',
  'brand-5': '#aac1af',
}

RGB Array

[190, 172, 124], [187, 163, 115], [92, 86, 72], [152, 176, 160], [170, 193, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BEAC7C, #BBA373, #5C5648, #98B0A0, #AAC1AF is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #beac7c; --color-2: #bba373; --color-3: #5c5648; --color-4: #98b0a0; --color-5: #aac1af. 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. 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