← Back to Editor

#BFA4B6 · #B4BF8A · #707316 · #BF5B04 · #D97A07

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#BFA4B6

Mauve · DarkGray · Rose Pink

HEX
#BFA4B6
RGB
rgb(191, 164, 182)
HSL
hsl(320, 17%, 70%)
HSB
hsb(320, 14%, 75%)
CMYK
cmyk(0%, 14%, 5%, 25%)
Oklch
oklch(74.8% 0.040 338.3)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

#B4BF8A

Willow Green · Tan · Apple Green

HEX
#B4BF8A
RGB
rgb(180, 191, 138)
HSL
hsl(72, 29%, 65%)
HSB
hsb(72, 28%, 75%)
CMYK
cmyk(6%, 0%, 28%, 25%)
Oklch
oklch(78.3% 0.073 117.6)

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

#707316

Autumn Sage · Olive · Honey Gold

HEX
#707316
RGB
rgb(112, 115, 22)
HSL
hsl(62, 68%, 27%)
HSB
hsb(62, 81%, 45%)
CMYK
cmyk(3%, 0%, 81%, 55%)
Oklch
oklch(53.6% 0.110 111.5)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#BF5B04

Tangerine · Chocolate · Amber Brown

HEX
#BF5B04
RGB
rgb(191, 91, 4)
HSL
hsl(28, 96%, 38%)
HSB
hsb(28, 98%, 75%)
CMYK
cmyk(0%, 52%, 98%, 25%)
Oklch
oklch(58.4% 0.151 50.9)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#D97A07

Ochre · Chocolate · Amber Brown

HEX
#D97A07
RGB
rgb(217, 122, 7)
HSL
hsl(33, 94%, 44%)
HSB
hsb(33, 97%, 85%)
CMYK
cmyk(0%, 44%, 97%, 15%)
Oklch
oklch(67.1% 0.156 59.9)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BFA4B6
A5C0AE

Analogous

BBA5C0
BFA4B6
C0A5AA

Triadic

BFA4B6
B7C0A5
A5B7C0

Split-Comp.

BFA4B6
AAC0A5
A5C0BB

Tetradic

BFA4B6
C0BBA5
A5C0AE
A5AAC0

Contrast Matrix WCAG 2.1 Contrast

BFA4B6
B4BF8A
707316
BF5B04
D97A07
—
1.2
Fail
2.2
Fail
2.0
Fail
1.4
Fail
1.2
Fail
—
2.6
Fail
2.3
Fail
1.6
Fail
2.2
Fail
2.6
Fail
—
1.1
Fail
1.6
Fail
2.0
Fail
2.3
Fail
1.1
Fail
—
1.4
Fail
1.4
Fail
1.6
Fail
1.6
Fail
1.4
Fail
—
White BG
2.3Fail
2.0Fail
5.1AA
4.5AA Large
3.1AA Large
Black BG
9.2AAA
10.8AAA
4.2AA Large
4.7AA
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B3B2
B9B997
71712D
949319
B0AF23

Deuteranopia

B5B7B1
B8B79A
717132
9AA11E
B5BC2A

Tritanopia

BEAEAD
B5A1A3
703E42
BA2A2D
D4393E

Achromatopsia

AEAEAE
B6B6B6
686868
6F6F6F
898989

Shades & Tints Shades & Tints

#BFA4B6

Dark
Light

#B4BF8A

Dark
Light

#707316

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bfa4b6;
  --color-2: #b4bf8a;
  --color-3: #707316;
  --color-4: #bf5b04;
  --color-5: #d97a07;
}

SCSS

$color-1: #bfa4b6;
$color-2: #b4bf8a;
$color-3: #707316;
$color-4: #bf5b04;
$color-5: #d97a07;

TAILWIND

colors: {
  'brand-1': '#bfa4b6',
  'brand-2': '#b4bf8a',
  'brand-3': '#707316',
  'brand-4': '#bf5b04',
  'brand-5': '#d97a07',
}

RGB Array

[191, 164, 182], [180, 191, 138], [112, 115, 22], [191, 91, 4], [217, 122, 7]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BFA4B6, #B4BF8A, #707316, #BF5B04, #D97A07 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #bfa4b6; --color-2: #b4bf8a; --color-3: #707316; --color-4: #bf5b04; --color-5: #d97a07. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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