← Back to Editor

#B18F6C · #F9D982 · #D24C40 · #7F4A46 · #4C3932

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

#B18F6C

Ginger · Gray · Warm Sun

HEX
#B18F6C
RGB
rgb(177, 143, 108)
HSL
hsl(30, 31%, 56%)
HSB
hsb(30, 39%, 69%)
CMYK
cmyk(0%, 19%, 39%, 31%)
Oklch
oklch(67.3% 0.064 67.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#F9D982

Goose Yellow · Khaki · Sunflower

HEX
#F9D982
RGB
rgb(249, 217, 130)
HSL
hsl(44, 91%, 74%)
HSB
hsb(44, 48%, 98%)
CMYK
cmyk(0%, 13%, 48%, 2%)
Oklch
oklch(89.4% 0.112 89.9)

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

#D24C40

Vermilion · Chocolate · Passion Red

HEX
#D24C40
RGB
rgb(210, 76, 64)
HSL
hsl(5, 62%, 54%)
HSB
hsb(5, 70%, 82%)
CMYK
cmyk(0%, 64%, 70%, 18%)
Oklch
oklch(59.7% 0.171 28.4)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#7F4A46

Crimson · Sienna · Wine Red

HEX
#7F4A46
RGB
rgb(127, 74, 70)
HSL
hsl(4, 29%, 39%)
HSB
hsb(4, 45%, 50%)
CMYK
cmyk(0%, 42%, 45%, 50%)
Oklch
oklch(47.0% 0.073 24.8)

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

#4C3932

Tangerine · DarkSlateGray · Cinnamon

HEX
#4C3932
RGB
rgb(76, 57, 50)
HSL
hsl(16, 21%, 25%)
HSB
hsb(16, 34%, 30%)
CMYK
cmyk(0%, 25%, 34%, 70%)
Oklch
oklch(36.3% 0.030 41.2)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B18F6C
6C8FB2

Analogous

B26C6C
B18F6C
B2B26C

Triadic

B18F6C
6CB28F
8F6CB2

Split-Comp.

B18F6C
6CB2B2
6C6CB2

Tetradic

B18F6C
6CB26C
6C8FB2
B26CB2

Contrast Matrix WCAG 2.1 Contrast

B18F6C
F9D982
D24C40
7F4A46
4C3932
—
2.2
Fail
1.4
Fail
2.4
Fail
3.6
AA Large
2.2
Fail
—
3.2
AA Large
5.1
AA
7.9
AAA
1.4
Fail
3.2
AA Large
—
1.6
Fail
2.5
Fail
2.4
Fail
5.1
AA
1.6
Fail
—
1.5
Fail
3.6
AA Large
7.9
AAA
2.5
Fail
1.5
Fail
—
White BG
3.0Fail
1.4Fail
4.3AA Large
7.1AAA
10.8AAA
Black BG
7.0AAA
15.3AAA
4.8AA
3.0Fail
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A274
EBEB97
989743
686847
444434

Deuteranopia

A4A777
EDEF9C
A0AA44
6B6F47
454634

Tritanopia

AF7B7D
F7A8AB
CB4546
7C4848
4B3535

Achromatopsia

959595
D9D9D9
737373
595959
3E3E3E

Shades & Tints Shades & Tints

#B18F6C

Dark
Light

#F9D982

Dark
Light

#D24C40

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b18f6c;
  --color-2: #f9d982;
  --color-3: #d24c40;
  --color-4: #7f4a46;
  --color-5: #4c3932;
}

SCSS

$color-1: #b18f6c;
$color-2: #f9d982;
$color-3: #d24c40;
$color-4: #7f4a46;
$color-5: #4c3932;

TAILWIND

colors: {
  'brand-1': '#b18f6c',
  'brand-2': '#f9d982',
  'brand-3': '#d24c40',
  'brand-4': '#7f4a46',
  'brand-5': '#4c3932',
}

RGB Array

[177, 143, 108], [249, 217, 130], [210, 76, 64], [127, 74, 70], [76, 57, 50]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B18F6C, #F9D982, #D24C40, #7F4A46, #4C3932 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: #b18f6c; --color-2: #f9d982; --color-3: #d24c40; --color-4: #7f4a46; --color-5: #4c3932. 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