← Back to Editor

#281B13 · #5B5847 · #859F84 · #9AAA85 · #AFBA8F

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 LibraryData Visualization

Color Details Color Details

#281B13

Tangerine · Black · Cinnamon

HEX
#281B13
RGB
rgb(40, 27, 19)
HSL
hsl(23, 36%, 12%)
HSB
hsb(23, 53%, 16%)
CMYK
cmyk(0%, 33%, 53%, 84%)
Oklch
oklch(23.6% 0.025 52.7)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#5B5847

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#5B5847
RGB
rgb(91, 88, 71)
HSL
hsl(51, 12%, 32%)
HSB
hsb(51, 22%, 36%)
CMYK
cmyk(0%, 3%, 22%, 64%)
Oklch
oklch(45.8% 0.027 99.0)

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

#859F84

Celadon · Gray · Olive Green

HEX
#859F84
RGB
rgb(133, 159, 132)
HSL
hsl(118, 12%, 57%)
HSB
hsb(118, 17%, 62%)
CMYK
cmyk(16%, 0%, 17%, 38%)
Oklch
oklch(67.5% 0.049 144.0)

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

#9AAA85

Grass Green · DarkSeaGreen · Olive Green

HEX
#9AAA85
RGB
rgb(154, 170, 133)
HSL
hsl(86, 18%, 59%)
HSB
hsb(86, 22%, 67%)
CMYK
cmyk(9%, 0%, 22%, 33%)
Oklch
oklch(71.5% 0.055 126.8)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#AFBA8F

Willow Green · DarkGray · Apple Green

HEX
#AFBA8F
RGB
rgb(175, 186, 143)
HSL
hsl(75, 24%, 65%)
HSB
hsb(75, 23%, 73%)
CMYK
cmyk(6%, 0%, 23%, 27%)
Oklch
oklch(76.9% 0.060 119.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

281B13
14212A

Analogous

2A1416
281B13
2A2714

Triadic

281B13
142A1C
1C142A

Split-Comp.

281B13
142A27
14162A

Tetradic

281B13
162A14
14212A
27142A

Contrast Matrix WCAG 2.1 Contrast

281B13
5B5847
859F84
9AAA85
AFBA8F
—
2.3
Fail
5.8
AA
6.7
AA
8.2
AAA
2.3
Fail
—
2.5
Fail
2.9
Fail
3.5
AA Large
5.8
AA
2.5
Fail
—
1.2
Fail
1.4
Fail
6.7
AA
2.9
Fail
1.2
Fail
—
1.2
Fail
8.2
AAA
3.5
AA Large
1.4
Fail
1.2
Fail
—
White BG
16.7AAA
7.2AAA
2.9Fail
2.5Fail
2.1Fail
Black BG
1.3Fail
2.9Fail
7.3AAA
8.5AAA
10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

222215
5A5A4B
90908B
A1A18E
B4B499

Deuteranopia

232415
5A5A4C
8F8D8C
A09F90
B3B29C

Tritanopia

271617
5B4E4F
869091
9B9597
B0A2A3

Achromatopsia

1E1E1E
575757
949494
A1A1A1
B2B2B2

Shades & Tints Shades & Tints

#281B13

Dark
Light

#5B5847

Dark
Light

#859F84

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #281b13;
  --color-2: #5b5847;
  --color-3: #859f84;
  --color-4: #9aaa85;
  --color-5: #afba8f;
}

SCSS

$color-1: #281b13;
$color-2: #5b5847;
$color-3: #859f84;
$color-4: #9aaa85;
$color-5: #afba8f;

TAILWIND

colors: {
  'brand-1': '#281b13',
  'brand-2': '#5b5847',
  'brand-3': '#859f84',
  'brand-4': '#9aaa85',
  'brand-5': '#afba8f',
}

RGB Array

[40, 27, 19], [91, 88, 71], [133, 159, 132], [154, 170, 133], [175, 186, 143]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #281B13, #5B5847, #859F84, #9AAA85, #AFBA8F 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: #281b13; --color-2: #5b5847; --color-3: #859f84; --color-4: #9aaa85; --color-5: #afba8f. 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