← Back to Editor

#281A20 · #314657 · #5F8284 · #94B0AA · #BBB99F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#281A20

Dark Violet · Black · Raspberry

HEX
#281A20
RGB
rgb(40, 26, 32)
HSL
hsl(334, 21%, 13%)
HSB
hsb(334, 35%, 16%)
CMYK
cmyk(0%, 35%, 20%, 84%)
Oklch
oklch(23.8% 0.024 351.7)

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

#314657

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#314657
RGB
rgb(49, 70, 87)
HSL
hsl(207, 28%, 27%)
HSB
hsb(207, 44%, 34%)
CMYK
cmyk(44%, 20%, 0%, 66%)
Oklch
oklch(38.4% 0.039 243.4)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#5F8284

Slate Blue · SlateGray · Mint Ice

HEX
#5F8284
RGB
rgb(95, 130, 132)
HSL
hsl(183, 16%, 45%)
HSB
hsb(183, 28%, 52%)
CMYK
cmyk(28%, 2%, 0%, 48%)
Oklch
oklch(58.1% 0.039 200.5)

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

#94B0AA

Jade · DarkGray · Lake Green

HEX
#94B0AA
RGB
rgb(148, 176, 170)
HSL
hsl(167, 15%, 64%)
HSB
hsb(167, 16%, 69%)
CMYK
cmyk(16%, 0%, 3%, 31%)
Oklch
oklch(73.4% 0.032 181.0)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#BBB99F

Fresh Green · DarkGray · Sunflower

HEX
#BBB99F
RGB
rgb(187, 185, 159)
HSL
hsl(56, 17%, 68%)
HSB
hsb(56, 15%, 73%)
CMYK
cmyk(0%, 1%, 15%, 27%)
Oklch
oklch(78.0% 0.036 103.6)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

281A20
1A2822

Analogous

281A27
281A20
281B1A

Triadic

281A20
20281A
1A2028

Split-Comp.

281A20
1A281B
1A2728

Tetradic

281A20
27281A
1A2822
1B1A28

Contrast Matrix WCAG 2.1 Contrast

281A20
314657
5F8284
94B0AA
BBB99F
—
1.7
Fail
4.0
AA Large
7.2
AAA
8.4
AAA
1.7
Fail
—
2.3
Fail
4.2
AA Large
4.9
AA
4.0
AA Large
2.3
Fail
—
1.8
Fail
2.1
Fail
7.2
AAA
4.2
AA Large
1.8
Fail
—
1.2
Fail
8.4
AAA
4.9
AA
2.1
Fail
1.2
Fail
—
White BG
16.7AAA
9.8AAA
4.2AA Large
2.3Fail
2.0Fail
Black BG
1.3Fail
2.1Fail
5.0AA
9.0AAA
10.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

22221F
3A3A53
6E6E84
A0A0AB
BABAA5

Deuteranopia

23241E
393752
6C6A83
9F9CAC
BABAA7

Tritanopia

271D1D
32504F
618383
95ADAD
BBAAAB

Achromatopsia

1F1F1F
424242
787878
A7A7A7
B7B7B7

Shades & Tints Shades & Tints

#281A20

Dark
Light

#314657

Dark
Light

#5F8284

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #281a20;
  --color-2: #314657;
  --color-3: #5f8284;
  --color-4: #94b0aa;
  --color-5: #bbb99f;
}

SCSS

$color-1: #281a20;
$color-2: #314657;
$color-3: #5f8284;
$color-4: #94b0aa;
$color-5: #bbb99f;

TAILWIND

colors: {
  'brand-1': '#281a20',
  'brand-2': '#314657',
  'brand-3': '#5f8284',
  'brand-4': '#94b0aa',
  'brand-5': '#bbb99f',
}

RGB Array

[40, 26, 32], [49, 70, 87], [95, 130, 132], [148, 176, 170], [187, 185, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #281A20, #314657, #5F8284, #94B0AA, #BBB99F 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: #281a20; --color-2: #314657; --color-3: #5f8284; --color-4: #94b0aa; --color-5: #bbb99f. 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. 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