← Back to Editor

#4C414D · #697A74 · #B4B17A · #FECB80 · #FA9B60

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

#4C414D

Dark Plum · DarkSlateGray · Charcoal

HEX
#4C414D
RGB
rgb(76, 65, 77)
HSL
hsl(295, 8%, 28%)
HSB
hsb(295, 16%, 30%)
CMYK
cmyk(1%, 16%, 0%, 70%)
Oklch
oklch(39.1% 0.025 323.4)

Traditional「Dark Plum」· Paint「Charcoal」· Creative Midnight Shadow

#697A74

Ink Gray · DimGray · Warm Gray

HEX
#697A74
RGB
rgb(105, 122, 116)
HSL
hsl(159, 7%, 45%)
HSB
hsb(159, 14%, 48%)
CMYK
cmyk(14%, 0%, 5%, 52%)
Oklch
oklch(56.4% 0.022 172.2)

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

#B4B17A

Autumn Sage · Tan · Sunflower

HEX
#B4B17A
RGB
rgb(180, 177, 122)
HSL
hsl(57, 28%, 59%)
HSB
hsb(57, 32%, 71%)
CMYK
cmyk(0%, 2%, 32%, 29%)
Oklch
oklch(75.0% 0.074 105.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#FECB80

Goose Yellow · Khaki · Warm Sun

HEX
#FECB80
RGB
rgb(254, 203, 128)
HSL
hsl(36, 98%, 75%)
HSB
hsb(36, 50%, 100%)
CMYK
cmyk(0%, 20%, 50%, 0%)
Oklch
oklch(87.1% 0.109 76.1)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#FA9B60

Apricot · SandyBrown · Warm Sun

HEX
#FA9B60
RGB
rgb(250, 155, 96)
HSL
hsl(23, 94%, 68%)
HSB
hsb(23, 62%, 98%)
CMYK
cmyk(0%, 38%, 62%, 2%)
Oklch
oklch(77.5% 0.136 51.4)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4C414D
434D42

Analogous

46424D
4C414D
4D4248

Triadic

4C414D
4D4C42
424D4C

Split-Comp.

4C414D
484D42
424D46

Tetradic

4C414D
4D4642
434D42
42484D

Contrast Matrix WCAG 2.1 Contrast

4C414D
697A74
B4B17A
FECB80
FA9B60
—
2.1
Fail
4.4
AA Large
6.5
AA
4.6
AA
2.1
Fail
—
2.1
Fail
3.0
AA Large
2.1
Fail
4.4
AA Large
2.1
Fail
—
1.5
Fail
1.0
Fail
6.5
AA
3.0
AA Large
1.5
Fail
—
1.4
Fail
4.6
AA
2.1
Fail
1.0
Fail
1.4
Fail
—
White BG
9.7AAA
4.5AA
2.2Fail
1.5Fail
2.1Fail
Black BG
2.2Fail
4.6AA
9.5AAA
14.1AAA
9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

47474A
707175
B3B387
E8E792
D1D06E

Deuteranopia

484949
6F6E76
B3B38B
EBEF97
D6DE72

Tritanopia

4B4847
6A7777
B49294
FBA0A4
F57A7C

Achromatopsia

464646
747474
ACACAC
D2D2D2
B1B1B1

Shades & Tints Shades & Tints

#4C414D

Dark
Light

#697A74

Dark
Light

#B4B17A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4c414d;
  --color-2: #697a74;
  --color-3: #b4b17a;
  --color-4: #fecb80;
  --color-5: #fa9b60;
}

SCSS

$color-1: #4c414d;
$color-2: #697a74;
$color-3: #b4b17a;
$color-4: #fecb80;
$color-5: #fa9b60;

TAILWIND

colors: {
  'brand-1': '#4c414d',
  'brand-2': '#697a74',
  'brand-3': '#b4b17a',
  'brand-4': '#fecb80',
  'brand-5': '#fa9b60',
}

RGB Array

[76, 65, 77], [105, 122, 116], [180, 177, 122], [254, 203, 128], [250, 155, 96]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4C414D, #697A74, #B4B17A, #FECB80, #FA9B60 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: #4c414d; --color-2: #697a74; --color-3: #b4b17a; --color-4: #fecb80; --color-5: #fa9b60. 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