← Back to Editor

#B4B8A5 · #B8AE8D · #B5A15B · #FF2E5F · #24191C

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

#B4B8A5

Willow Green · DarkGray · Apple Green

HEX
#B4B8A5
RGB
rgb(180, 184, 165)
HSL
hsl(73, 12%, 68%)
HSB
hsb(73, 10%, 72%)
CMYK
cmyk(2%, 0%, 10%, 28%)
Oklch
oklch(77.4% 0.027 116.7)

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

#B8AE8D

Ginger · Tan · Sunflower

HEX
#B8AE8D
RGB
rgb(184, 174, 141)
HSL
hsl(46, 23%, 64%)
HSB
hsb(46, 23%, 72%)
CMYK
cmyk(0%, 5%, 23%, 28%)
Oklch
oklch(75.1% 0.047 93.2)

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

#B5A15B

Ginger · Tan · Sunflower

HEX
#B5A15B
RGB
rgb(181, 161, 91)
HSL
hsl(47, 38%, 53%)
HSB
hsb(47, 50%, 71%)
CMYK
cmyk(0%, 11%, 50%, 29%)
Oklch
oklch(71.1% 0.093 93.9)

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

#FF2E5F

Vermilion · Crimson · Passion Red

HEX
#FF2E5F
RGB
rgb(255, 46, 95)
HSL
hsl(346, 100%, 59%)
HSB
hsb(346, 82%, 100%)
CMYK
cmyk(0%, 82%, 63%, 0%)
Oklch
oklch(65.2% 0.238 15.0)

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

#24191C

Dark Violet · Black · Raspberry

HEX
#24191C
RGB
rgb(36, 25, 28)
HSL
hsl(344, 18%, 12%)
HSB
hsb(344, 31%, 14%)
CMYK
cmyk(0%, 31%, 22%, 86%)
Oklch
oklch(22.8% 0.018 0.6)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4B8A5
A8A4B7

Analogous

B7B2A4
B4B8A5
A9B7A4

Triadic

B4B8A5
A4B3B7
B7A4B3

Split-Comp.

B4B8A5
A4A9B7
B2A4B7

Tetradic

B4B8A5
A4B7B2
A8A4B7
B7A4A9

Contrast Matrix WCAG 2.1 Contrast

B4B8A5
B8AE8D
B5A15B
FF2E5F
24191C
—
1.1
Fail
1.3
Fail
1.8
Fail
8.4
AAA
1.1
Fail
—
1.2
Fail
1.6
Fail
7.7
AAA
1.3
Fail
1.2
Fail
—
1.4
Fail
6.7
AA
1.8
Fail
1.6
Fail
1.4
Fail
—
4.7
AA
8.4
AAA
7.7
AAA
6.7
AA
4.7
AA
—
White BG
2.0Fail
2.2Fail
2.6Fail
3.6AA Large
17.1AAA
Black BG
10.3AAA
9.5AAA
8.2AAA
5.8AA
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B6AA
B4B495
ACAC6C
A5A353
1F1F1B

Deuteranopia

B6B5AB
B4B597
AEAF70
B1C050
20211B

Tritanopia

B4ADAE
B79B9D
B4797C
F54A48
231B1B

Achromatopsia

B5B5B5
ADADAD
9F9F9F
727272
1D1D1D

Shades & Tints Shades & Tints

#B4B8A5

Dark
Light

#B8AE8D

Dark
Light

#B5A15B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4b8a5;
  --color-2: #b8ae8d;
  --color-3: #b5a15b;
  --color-4: #ff2e5f;
  --color-5: #24191c;
}

SCSS

$color-1: #b4b8a5;
$color-2: #b8ae8d;
$color-3: #b5a15b;
$color-4: #ff2e5f;
$color-5: #24191c;

TAILWIND

colors: {
  'brand-1': '#b4b8a5',
  'brand-2': '#b8ae8d',
  'brand-3': '#b5a15b',
  'brand-4': '#ff2e5f',
  'brand-5': '#24191c',
}

RGB Array

[180, 184, 165], [184, 174, 141], [181, 161, 91], [255, 46, 95], [36, 25, 28]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B4B8A5, #B8AE8D, #B5A15B, #FF2E5F, #24191C 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: #b4b8a5; --color-2: #b8ae8d; --color-3: #b5a15b; --color-4: #ff2e5f; --color-5: #24191c. 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