← Back to Editor

#B1CBA0 · #44463C · #221B1D · #484E4B · #91AB9E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarm

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#B1CBA0

Celadon · DarkGray · Apple Green

HEX
#B1CBA0
RGB
rgb(177, 203, 160)
HSL
hsl(96, 29%, 71%)
HSB
hsb(96, 21%, 80%)
CMYK
cmyk(13%, 0%, 21%, 20%)
Oklch
oklch(81.1% 0.065 133.2)

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

#44463C

Grass Green · DarkSlateGray · Dark Stone

HEX
#44463C
RGB
rgb(68, 70, 60)
HSL
hsl(72, 8%, 25%)
HSB
hsb(72, 14%, 27%)
CMYK
cmyk(3%, 0%, 14%, 73%)
Oklch
oklch(38.9% 0.017 116.4)

Traditional「Grass Green」· Paint「Dark Stone」· Creative Midnight Shadow

#221B1D

Dark Violet · Black · Raspberry

HEX
#221B1D
RGB
rgb(34, 27, 29)
HSL
hsl(343, 11%, 12%)
HSB
hsb(343, 21%, 13%)
CMYK
cmyk(0%, 21%, 15%, 87%)
Oklch
oklch(23.1% 0.012 359.0)

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

#484E4B

Dark Cyan · DarkSlateGray · Charcoal

HEX
#484E4B
RGB
rgb(72, 78, 75)
HSL
hsl(150, 4%, 29%)
HSB
hsb(150, 8%, 31%)
CMYK
cmyk(8%, 0%, 4%, 69%)
Oklch
oklch(41.7% 0.009 164.6)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#91AB9E

Jade · DarkSeaGreen · Apple Green

HEX
#91AB9E
RGB
rgb(145, 171, 158)
HSL
hsl(150, 13%, 62%)
HSB
hsb(150, 15%, 67%)
CMYK
cmyk(15%, 0%, 8%, 33%)
Oklch
oklch(71.8% 0.034 163.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1CBA0
B9A0CA

Analogous

C6CAA0
B1CBA0
A0CAA4

Triadic

B1CBA0
A0B1CA
CAA0B1

Split-Comp.

B1CBA0
A4A0CA
CAA0C6

Tetradic

B1CBA0
A0C6CA
B9A0CA
CAA4A0

Contrast Matrix WCAG 2.1 Contrast

B1CBA0
44463C
221B1D
484E4B
91AB9E
—
5.4
AA
9.6
AAA
4.8
AA
1.4
Fail
5.4
AA
—
1.8
Fail
1.1
Fail
3.9
AA Large
9.6
AAA
1.8
Fail
—
2.0
Fail
6.9
AA
4.8
AA
1.1
Fail
2.0
Fail
—
3.5
AA Large
1.4
Fail
3.9
AA Large
6.9
AA
3.5
AA Large
—
White BG
1.8Fail
9.6AAA
16.9AAA
8.5AAA
2.5Fail
Black BG
11.9AAA
2.2Fail
1.2Fail
2.5Fail
8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBCAA
45453E
1F1F1D
4B4B4C
9C9CA1

Deuteranopia

BBB9AD
45453F
1F201C
4A4A4C
9B99A2

Tritanopia

B2B3B4
444041
221C1C
484C4C
92A4A4

Achromatopsia

BEBEBE
444444
1D1D1D
4C4C4C
A2A2A2

Shades & Tints Shades & Tints

#B1CBA0

Dark
Light

#44463C

Dark
Light

#221B1D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1cba0;
  --color-2: #44463c;
  --color-3: #221b1d;
  --color-4: #484e4b;
  --color-5: #91ab9e;
}

SCSS

$color-1: #b1cba0;
$color-2: #44463c;
$color-3: #221b1d;
$color-4: #484e4b;
$color-5: #91ab9e;

TAILWIND

colors: {
  'brand-1': '#b1cba0',
  'brand-2': '#44463c',
  'brand-3': '#221b1d',
  'brand-4': '#484e4b',
  'brand-5': '#91ab9e',
}

RGB Array

[177, 203, 160], [68, 70, 60], [34, 27, 29], [72, 78, 75], [145, 171, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B1CBA0, #44463C, #221B1D, #484E4B, #91AB9E is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, 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: #b1cba0; --color-2: #44463c; --color-3: #221b1d; --color-4: #484e4b; --color-5: #91ab9e. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 finance, legal, luxury 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