← Back to Editor

#B1CAA2 · #A7B584 · #786D40 · #593F24 · #3A2315

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

#B1CAA2

Celadon · DarkGray · Apple Green

HEX
#B1CAA2
RGB
rgb(177, 202, 162)
HSL
hsl(98, 27%, 71%)
HSB
hsb(98, 20%, 79%)
CMYK
cmyk(12%, 0%, 20%, 21%)
Oklch
oklch(81.0% 0.061 133.8)

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

#A7B584

Willow Green · DarkSeaGreen · Apple Green

HEX
#A7B584
RGB
rgb(167, 181, 132)
HSL
hsl(77, 25%, 61%)
HSB
hsb(77, 27%, 71%)
CMYK
cmyk(8%, 0%, 27%, 29%)
Oklch
oklch(75.0% 0.069 121.0)

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

#786D40

Ochre · DarkOliveGreen · Honey Gold

HEX
#786D40
RGB
rgb(120, 109, 64)
HSL
hsl(48, 30%, 36%)
HSB
hsb(48, 47%, 47%)
CMYK
cmyk(0%, 9%, 47%, 53%)
Oklch
oklch(53.4% 0.065 96.0)

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

#593F24

Ochre · DarkOliveGreen · Cinnamon

HEX
#593F24
RGB
rgb(89, 63, 36)
HSL
hsl(31, 42%, 25%)
HSB
hsb(31, 60%, 35%)
CMYK
cmyk(0%, 29%, 60%, 65%)
Oklch
oklch(39.0% 0.055 66.1)

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

#3A2315

Tangerine · Black · Cinnamon

HEX
#3A2315
RGB
rgb(58, 35, 21)
HSL
hsl(23, 47%, 15%)
HSB
hsb(23, 64%, 23%)
CMYK
cmyk(0%, 40%, 64%, 77%)
Oklch
oklch(28.2% 0.043 51.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1CAA2
BAA1C9

Analogous

C4C9A1
B1CAA2
A1C9A6

Triadic

B1CAA2
A1B0C9
C9A1B0

Split-Comp.

B1CAA2
A6A1C9
C9A1C4

Tetradic

B1CAA2
A1C4C9
BAA1C9
C9A6A1

Contrast Matrix WCAG 2.1 Contrast

B1CAA2
A7B584
786D40
593F24
3A2315
—
1.2
Fail
2.9
Fail
5.5
AA
8.3
AAA
1.2
Fail
—
2.4
Fail
4.4
AA Large
6.7
AA
2.9
Fail
2.4
Fail
—
1.9
Fail
2.8
Fail
5.5
AA
4.4
AA Large
1.9
Fail
—
1.5
Fail
8.3
AAA
6.7
AA
2.8
Fail
1.5
Fail
—
White BG
1.8Fail
2.2Fail
5.2AA
9.7AAA
14.7AAA
Black BG
11.8AAA
9.6AAA
4.1AA Large
2.2Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBCAC
ADAD90
73734B
4E4E2B
303018

Deuteranopia

BAB9AE
ACAB93
74754E
4F512C
313319

Tritanopia

B2B3B5
A8999B
775355
583031
391B1C

Achromatopsia

BEBEBE
ABABAB
6B6B6B
444444
282828

Shades & Tints Shades & Tints

#B1CAA2

Dark
Light

#A7B584

Dark
Light

#786D40

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1caa2;
  --color-2: #a7b584;
  --color-3: #786d40;
  --color-4: #593f24;
  --color-5: #3a2315;
}

SCSS

$color-1: #b1caa2;
$color-2: #a7b584;
$color-3: #786d40;
$color-4: #593f24;
$color-5: #3a2315;

TAILWIND

colors: {
  'brand-1': '#b1caa2',
  'brand-2': '#a7b584',
  'brand-3': '#786d40',
  'brand-4': '#593f24',
  'brand-5': '#3a2315',
}

RGB Array

[177, 202, 162], [167, 181, 132], [120, 109, 64], [89, 63, 36], [58, 35, 21]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B1CAA2, #A7B584, #786D40, #593F24, #3A2315 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #b1caa2; --color-2: #a7b584; --color-3: #786d40; --color-4: #593f24; --color-5: #3a2315. 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. 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