← Back to Editor

#B0AFAA · #40634F · #2A2623 · #BB9729 · #B44E49

dark

A 5-color dark 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

#B0AFAA

Ash · DarkGray · Silver Sand

HEX
#B0AFAA
RGB
rgb(176, 175, 170)
HSL
hsl(50, 4%, 68%)
HSB
hsb(50, 3%, 69%)
CMYK
cmyk(0%, 1%, 3%, 31%)
Oklch
oklch(75.3% 0.007 97.4)

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

#40634F

Celadon · DarkSlateGray · Forest Green

HEX
#40634F
RGB
rgb(64, 99, 79)
HSL
hsl(146, 21%, 32%)
HSB
hsb(146, 35%, 39%)
CMYK
cmyk(35%, 0%, 20%, 61%)
Oklch
oklch(46.7% 0.052 158.5)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#2A2623

Tangerine · DarkSlateGray · Dark Stone

HEX
#2A2623
RGB
rgb(42, 38, 35)
HSL
hsl(26, 9%, 15%)
HSB
hsb(26, 17%, 16%)
CMYK
cmyk(0%, 10%, 17%, 84%)
Oklch
oklch(27.2% 0.008 59.3)

Traditional「Tangerine」· Paint「Dark Stone」· Creative Midnight Shadow

#BB9729

Ochre · DarkGoldenRod · Honey Gold

HEX
#BB9729
RGB
rgb(187, 151, 41)
HSL
hsl(45, 64%, 45%)
HSB
hsb(45, 78%, 73%)
CMYK
cmyk(0%, 19%, 78%, 27%)
Oklch
oklch(69.1% 0.128 89.5)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#B44E49

Crimson · Sienna · Passion Red

HEX
#B44E49
RGB
rgb(180, 78, 73)
HSL
hsl(3, 42%, 50%)
HSB
hsb(3, 59%, 71%)
CMYK
cmyk(0%, 57%, 59%, 29%)
Oklch
oklch(55.4% 0.134 25.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B0AFAA
AAABB1

Analogous

B1ACAA
B0AFAA
AEB1AA

Triadic

B0AFAA
AAB1B0
B0AAB1

Split-Comp.

B0AFAA
AAAEB1
ACAAB1

Tetradic

B0AFAA
AAB1AC
AAABB1
B1AAAE

Contrast Matrix WCAG 2.1 Contrast

B0AFAA
40634F
2A2623
BB9729
B44E49
—
3.1
AA Large
6.8
AA
1.3
Fail
2.3
Fail
3.1
AA Large
—
2.2
Fail
2.4
Fail
1.3
Fail
6.8
AA
2.2
Fail
—
5.4
AA
2.9
Fail
1.3
Fail
2.4
Fail
5.4
AA
—
1.8
Fail
2.3
Fail
1.3
Fail
2.9
Fail
1.8
Fail
—
White BG
2.2Fail
6.7AA
15.0AAA
2.8Fail
5.1AA
Black BG
9.6AAA
3.1AA Large
1.4Fail
7.6AAA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B0B0AB
4F4F54
282824
ABAB44
88874A

Deuteranopia

B0B0AC
4D4B55
292924
AEB04A
8E954B

Tritanopia

B0ACAC
425859
2A2424
B9595D
AF4B4B

Achromatopsia

AFAFAF
565656
272727
959595
6C6C6C

Shades & Tints Shades & Tints

#B0AFAA

Dark
Light

#40634F

Dark
Light

#2A2623

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b0afaa;
  --color-2: #40634f;
  --color-3: #2a2623;
  --color-4: #bb9729;
  --color-5: #b44e49;
}

SCSS

$color-1: #b0afaa;
$color-2: #40634f;
$color-3: #2a2623;
$color-4: #bb9729;
$color-5: #b44e49;

TAILWIND

colors: {
  'brand-1': '#b0afaa',
  'brand-2': '#40634f',
  'brand-3': '#2a2623',
  'brand-4': '#bb9729',
  'brand-5': '#b44e49',
}

RGB Array

[176, 175, 170], [64, 99, 79], [42, 38, 35], [187, 151, 41], [180, 78, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #B0AFAA, #40634F, #2A2623, #BB9729, #B44E49 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b0afaa; --color-2: #40634f; --color-3: #2a2623; --color-4: #bb9729; --color-5: #b44e49. 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 dark-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. 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