← Back to Editor

#521B21 · #797F7A · #9AAF8A · #BABD8A · #FCD18A

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

Color Details Color Details

#521B21

Crimson · Maroon · Wine Red

HEX
#521B21
RGB
rgb(82, 27, 33)
HSL
hsl(353, 50%, 21%)
HSB
hsb(353, 67%, 32%)
CMYK
cmyk(0%, 67%, 60%, 68%)
Oklch
oklch(31.0% 0.082 16.8)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#797F7A

Ink Gray · Gray · Warm Gray

HEX
#797F7A
RGB
rgb(121, 127, 122)
HSL
hsl(130, 2%, 49%)
HSB
hsb(130, 5%, 50%)
CMYK
cmyk(5%, 0%, 4%, 50%)
Oklch
oklch(59.0% 0.010 150.6)

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

#9AAF8A

Celadon · DarkSeaGreen · Apple Green

HEX
#9AAF8A
RGB
rgb(154, 175, 138)
HSL
hsl(94, 19%, 61%)
HSB
hsb(94, 21%, 69%)
CMYK
cmyk(12%, 0%, 21%, 31%)
Oklch
oklch(72.8% 0.057 131.8)

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

#BABD8A

Fresh Green · Tan · Sunflower

HEX
#BABD8A
RGB
rgb(186, 189, 138)
HSL
hsl(64, 28%, 64%)
HSB
hsb(64, 27%, 74%)
CMYK
cmyk(2%, 0%, 27%, 26%)
Oklch
oklch(78.3% 0.069 110.7)

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

#FCD18A

Goose Yellow · Khaki · Peach Orange

HEX
#FCD18A
RGB
rgb(252, 209, 138)
HSL
hsl(37, 95%, 76%)
HSB
hsb(37, 45%, 99%)
CMYK
cmyk(0%, 17%, 45%, 1%)
Oklch
oklch(88.2% 0.101 79.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

521B21
1B504A

Analogous

501B3C
521B21
502F1B

Triadic

521B21
21501B
1B2150

Split-Comp.

521B21
1B502F
1B3C50

Tetradic

521B21
3C501B
1B504A
2F1B50

Contrast Matrix WCAG 2.1 Contrast

521B21
797F7A
9AAF8A
BABD8A
FCD18A
—
3.3
AA Large
5.8
AA
7.0
AA
9.5
AAA
3.3
AA Large
—
1.7
Fail
2.1
Fail
2.9
Fail
5.8
AA
1.7
Fail
—
1.2
Fail
1.6
Fail
7.0
AA
2.1
Fail
1.2
Fail
—
1.4
Fail
9.5
AAA
2.9
Fail
1.6
Fail
1.4
Fail
—
White BG
13.7AAA
4.1AA Large
2.4Fail
2.0Fail
1.4Fail
Black BG
1.5Fail
5.1AA
8.9AAA
10.7AAA
14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3A3A20
7C7C7B
A3A393
BBBB96
E9E99B

Deuteranopia

3D421F
7B7B7C
A2A095
BBBB99
ECEF9F

Tritanopia

4F1E1E
797C7C
9B9A9C
BAA0A2
FAA9AC

Achromatopsia

2C2C2C
7D7D7D
A5A5A5
B6B6B6
D6D6D6

Shades & Tints Shades & Tints

#521B21

Dark
Light

#797F7A

Dark
Light

#9AAF8A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #521b21;
  --color-2: #797f7a;
  --color-3: #9aaf8a;
  --color-4: #babd8a;
  --color-5: #fcd18a;
}

SCSS

$color-1: #521b21;
$color-2: #797f7a;
$color-3: #9aaf8a;
$color-4: #babd8a;
$color-5: #fcd18a;

TAILWIND

colors: {
  'brand-1': '#521b21',
  'brand-2': '#797f7a',
  'brand-3': '#9aaf8a',
  'brand-4': '#babd8a',
  'brand-5': '#fcd18a',
}

RGB Array

[82, 27, 33], [121, 127, 122], [154, 175, 138], [186, 189, 138], [252, 209, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #521B21, #797F7A, #9AAF8A, #BABD8A, #FCD18A is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #521b21; --color-2: #797f7a; --color-3: #9aaf8a; --color-4: #babd8a; --color-5: #fcd18a. 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. 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