← Back to Editor

#BFA898 · #040003 · #17A8A1 · #8F7D01 · #D86EAC

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#BFA898

Apricot · Tan · Warm Sun

HEX
#BFA898
RGB
rgb(191, 168, 152)
HSL
hsl(25, 23%, 67%)
HSB
hsb(25, 20%, 75%)
CMYK
cmyk(0%, 12%, 20%, 25%)
Oklch
oklch(74.7% 0.035 57.0)

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

#040003

Rose Purple · Black · Dark Purple

HEX
#040003
RGB
rgb(4, 0, 3)
HSL
hsl(315, 100%, 1%)
HSB
hsb(315, 100%, 2%)
CMYK
cmyk(0%, 100%, 25%, 98%)
Oklch
oklch(7.3% 0.032 335.2)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#17A8A1

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#17A8A1
RGB
rgb(23, 168, 161)
HSL
hsl(177, 76%, 37%)
HSB
hsb(177, 86%, 66%)
CMYK
cmyk(86%, 0%, 4%, 34%)
Oklch
oklch(66.2% 0.111 189.5)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#8F7D01

Autumn Sage · Olive · Honey Gold

HEX
#8F7D01
RGB
rgb(143, 125, 1)
HSL
hsl(52, 99%, 28%)
HSB
hsb(52, 99%, 56%)
CMYK
cmyk(0%, 13%, 99%, 44%)
Oklch
oklch(58.8% 0.122 99.1)

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

#D86EAC

Mauve · Orchid · Rose Pink

HEX
#D86EAC
RGB
rgb(216, 110, 172)
HSL
hsl(325, 58%, 64%)
HSB
hsb(325, 49%, 85%)
CMYK
cmyk(0%, 49%, 20%, 15%)
Oklch
oklch(67.9% 0.151 345.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BFA898
97AEBE

Analogous

BE979B
BFA898
BEBB97

Triadic

BFA898
97BEA8
A897BE

Split-Comp.

BFA898
97BEBB
979BBE

Tetradic

BFA898
9BBE97
97AEBE
BB97BE

Contrast Matrix WCAG 2.1 Contrast

BFA898
040003
17A8A1
8F7D01
D86EAC
—
9.2
AAA
1.3
Fail
1.8
Fail
1.4
Fail
9.2
AAA
—
7.1
AAA
5.1
AA
6.7
AA
1.3
Fail
7.1
AAA
—
1.4
Fail
1.1
Fail
1.8
Fail
5.1
AA
1.4
Fail
—
1.3
Fail
1.4
Fail
6.7
AA
1.1
Fail
1.3
Fail
—
White BG
2.3Fail
20.9AAA
2.9Fail
4.1AA Large
3.1AA Large
Black BG
9.3AAA
1.0Fail
7.2AAA
5.1AA
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B59C
020202
5657A3
87871F
AAA99D

Deuteranopia

B6B89D
030302
4D43A3
888A26
B0B899

Tritanopia

BE9FA0
040202
1EA4A4
8E373C
D3918F

Achromatopsia

ADADAD
020202
7C7C7C
747474
959595

Shades & Tints Shades & Tints

#BFA898

Dark
Light

#040003

Dark
Light

#17A8A1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bfa898;
  --color-2: #040003;
  --color-3: #17a8a1;
  --color-4: #8f7d01;
  --color-5: #d86eac;
}

SCSS

$color-1: #bfa898;
$color-2: #040003;
$color-3: #17a8a1;
$color-4: #8f7d01;
$color-5: #d86eac;

TAILWIND

colors: {
  'brand-1': '#bfa898',
  'brand-2': '#040003',
  'brand-3': '#17a8a1',
  'brand-4': '#8f7d01',
  'brand-5': '#d86eac',
}

RGB Array

[191, 168, 152], [4, 0, 3], [23, 168, 161], [143, 125, 1], [216, 110, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BFA898, #040003, #17A8A1, #8F7D01, #D86EAC is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #bfa898; --color-2: #040003; --color-3: #17a8a1; --color-4: #8f7d01; --color-5: #d86eac. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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