← Back to Editor

#B0B3A8 · #AFB376 · #DE6262 · #FF006F · #E8553F

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 Library

Color Details Color Details

#B0B3A8

Ash · DarkGray · Silver Sand

HEX
#B0B3A8
RGB
rgb(176, 179, 168)
HSL
hsl(76, 7%, 68%)
HSB
hsb(76, 6%, 70%)
CMYK
cmyk(2%, 0%, 6%, 30%)
Oklch
oklch(76.1% 0.016 119.2)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#AFB376

Autumn Sage · Tan · Sunflower

HEX
#AFB376
RGB
rgb(175, 179, 118)
HSL
hsl(64, 29%, 58%)
HSB
hsb(64, 34%, 70%)
CMYK
cmyk(2%, 0%, 34%, 30%)
Oklch
oklch(74.9% 0.082 111.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#DE6262

Peach Pink · Tomato · Coral Red

HEX
#DE6262
RGB
rgb(222, 98, 98)
HSL
hsl(0, 65%, 63%)
HSB
hsb(0, 56%, 87%)
CMYK
cmyk(0%, 56%, 56%, 13%)
Oklch
oklch(65.0% 0.156 22.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FF006F

Dark Violet · DeepPink · Camellia

HEX
#FF006F
RGB
rgb(255, 0, 111)
HSL
hsl(334, 100%, 50%)
HSB
hsb(334, 100%, 100%)
CMYK
cmyk(0%, 100%, 56%, 0%)
Oklch
oklch(64.1% 0.257 7.8)

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

#E8553F

Vermilion · Tomato · Passion Red

HEX
#E8553F
RGB
rgb(232, 85, 63)
HSL
hsl(8, 79%, 58%)
HSB
hsb(8, 73%, 91%)
CMYK
cmyk(0%, 63%, 73%, 9%)
Oklch
oklch(64.3% 0.186 31.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B0B3A8
ABA8B3

Analogous

B3B0A8
B0B3A8
AAB3A8

Triadic

B0B3A8
A8B0B3
B3A8B0

Split-Comp.

B0B3A8
A8AAB3
B0A8B3

Tetradic

B0B3A8
A8B3B0
ABA8B3
B3A8AA

Contrast Matrix WCAG 2.1 Contrast

B0B3A8
AFB376
DE6262
FF006F
E8553F
—
1.0
Fail
1.6
Fail
1.8
Fail
1.7
Fail
1.0
Fail
—
1.6
Fail
1.7
Fail
1.6
Fail
1.6
Fail
1.6
Fail
—
1.1
Fail
1.0
Fail
1.8
Fail
1.7
Fail
1.1
Fail
—
1.1
Fail
1.7
Fail
1.6
Fail
1.0
Fail
1.1
Fail
—
White BG
2.1Fail
2.2Fail
3.5AA Large
3.8AA Large
3.6AA Large
Black BG
9.9AAA
9.5AAA
6.0AA
5.5AA
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B1AB
B1B185
A8A762
918E54
A8A744

Deuteranopia

B1B1AB
B1B088
B0B962
9FB34E
B1BC46

Tritanopia

B0ADAD
AF9093
D86262
F23F3A
E14949

Achromatopsia

B1B1B1
ABABAB
878787
595959
7E7E7E

Shades & Tints Shades & Tints

#B0B3A8

Dark
Light

#AFB376

Dark
Light

#DE6262

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b0b3a8;
  --color-2: #afb376;
  --color-3: #de6262;
  --color-4: #ff006f;
  --color-5: #e8553f;
}

SCSS

$color-1: #b0b3a8;
$color-2: #afb376;
$color-3: #de6262;
$color-4: #ff006f;
$color-5: #e8553f;

TAILWIND

colors: {
  'brand-1': '#b0b3a8',
  'brand-2': '#afb376',
  'brand-3': '#de6262',
  'brand-4': '#ff006f',
  'brand-5': '#e8553f',
}

RGB Array

[176, 179, 168], [175, 179, 118], [222, 98, 98], [255, 0, 111], [232, 85, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B0B3A8, #AFB376, #DE6262, #FF006F, #E8553F is ideal for: corporate websites, product showcases, portfolios. 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: #b0b3a8; --color-2: #afb376; --color-3: #de6262; --color-4: #ff006f; --color-5: #e8553f. 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. 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