← Back to Editor

#FFD98C · #D2B680 · #A59473 · #787167 · #4B4E5A

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

#FFD98C

Goose Yellow · Khaki · Lemon Cream

HEX
#FFD98C
RGB
rgb(255, 217, 140)
HSL
hsl(40, 100%, 77%)
HSB
hsb(40, 45%, 100%)
CMYK
cmyk(0%, 15%, 45%, 0%)
Oklch
oklch(90.1% 0.104 84.2)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#D2B680

Ginger · Tan · Sunflower

HEX
#D2B680
RGB
rgb(210, 182, 128)
HSL
hsl(40, 48%, 66%)
HSB
hsb(40, 39%, 82%)
CMYK
cmyk(0%, 13%, 39%, 18%)
Oklch
oklch(78.8% 0.078 83.4)

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

#A59473

Ginger · Gray · Sunflower

HEX
#A59473
RGB
rgb(165, 148, 115)
HSL
hsl(40, 22%, 55%)
HSB
hsb(40, 30%, 65%)
CMYK
cmyk(0%, 10%, 30%, 35%)
Oklch
oklch(67.3% 0.050 83.8)

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

#787167

Ochre · DimGray · Warm Gray

HEX
#787167
RGB
rgb(120, 113, 103)
HSL
hsl(35, 8%, 44%)
HSB
hsb(35, 14%, 47%)
CMYK
cmyk(0%, 6%, 14%, 53%)
Oklch
oklch(55.2% 0.017 77.0)

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

#4B4E5A

Indigo · DarkSlateGray · Charcoal

HEX
#4B4E5A
RGB
rgb(75, 78, 90)
HSL
hsl(228, 9%, 32%)
HSB
hsb(228, 17%, 35%)
CMYK
cmyk(17%, 13%, 0%, 65%)
Oklch
oklch(42.6% 0.020 274.4)

Traditional「Indigo」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFD98C
8AB1FF

Analogous

FF9D8A
FFD98C
EBFF8A

Triadic

FFD98C
8AFFD8
D88AFF

Split-Comp.

FFD98C
8AEBFF
9D8AFF

Tetradic

FFD98C
8AFF9D
8AB1FF
FF8AEB

Contrast Matrix WCAG 2.1 Contrast

FFD98C
D2B680
A59473
787167
4B4E5A
—
1.4
Fail
2.2
Fail
3.6
AA Large
6.1
AA
1.4
Fail
—
1.5
Fail
2.5
Fail
4.2
AA Large
2.2
Fail
1.5
Fail
—
1.6
Fail
2.8
Fail
3.6
AA Large
2.5
Fail
1.6
Fail
—
1.7
Fail
6.1
AA
4.2
AA Large
2.8
Fail
1.7
Fail
—
White BG
1.3Fail
2.0Fail
3.0Fail
4.8AA
8.3AAA
Black BG
15.6AAA
10.7AAA
7.1AAA
4.4AA Large
2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEE9F
C6C68D
9E9D7B
757569
4C4C57

Deuteranopia

F1F4A3
C8CA90
9FA07D
75766A
4C4C56

Tritanopia

FDADB1
D1979A
A48183
786B6C
4B5554

Achromatopsia

DCDCDC
B8B8B8
959595
727272
4E4E4E

Shades & Tints Shades & Tints

#FFD98C

Dark
Light

#D2B680

Dark
Light

#A59473

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffd98c;
  --color-2: #d2b680;
  --color-3: #a59473;
  --color-4: #787167;
  --color-5: #4b4e5a;
}

SCSS

$color-1: #ffd98c;
$color-2: #d2b680;
$color-3: #a59473;
$color-4: #787167;
$color-5: #4b4e5a;

TAILWIND

colors: {
  'brand-1': '#ffd98c',
  'brand-2': '#d2b680',
  'brand-3': '#a59473',
  'brand-4': '#787167',
  'brand-5': '#4b4e5a',
}

RGB Array

[255, 217, 140], [210, 182, 128], [165, 148, 115], [120, 113, 103], [75, 78, 90]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFD98C, #D2B680, #A59473, #787167, #4B4E5A 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: #ffd98c; --color-2: #d2b680; --color-3: #a59473; --color-4: #787167; --color-5: #4b4e5a. 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