← Back to Editor

#BBA896 · #CDD9CA · #716B77 · #E3E094 · #26252A

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

#BBA896

Apricot · DarkGray · Warm Sun

HEX
#BBA896
RGB
rgb(187, 168, 150)
HSL
hsl(29, 21%, 66%)
HSB
hsb(29, 20%, 73%)
CMYK
cmyk(0%, 10%, 20%, 27%)
Oklch
oklch(74.3% 0.034 65.7)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#CDD9CA

Celadon · LightGray · Mint Green

HEX
#CDD9CA
RGB
rgb(205, 217, 202)
HSL
hsl(108, 16%, 82%)
HSB
hsb(108, 7%, 85%)
CMYK
cmyk(6%, 0%, 7%, 15%)
Oklch
oklch(87.2% 0.024 139.4)

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

#716B77

Ink Gray · DimGray · Warm Gray

HEX
#716B77
RGB
rgb(113, 107, 119)
HSL
hsl(270, 5%, 44%)
HSB
hsb(270, 10%, 47%)
CMYK
cmyk(5%, 10%, 0%, 53%)
Oklch
oklch(53.7% 0.020 308.1)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#E3E094

Fresh Green · Khaki · Sunflower

HEX
#E3E094
RGB
rgb(227, 224, 148)
HSL
hsl(58, 59%, 74%)
HSB
hsb(58, 35%, 89%)
CMYK
cmyk(0%, 1%, 35%, 11%)
Oklch
oklch(89.2% 0.097 106.3)

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

#26252A

Ink Black · DarkSlateGray · Dark Stone

HEX
#26252A
RGB
rgb(38, 37, 42)
HSL
hsl(252, 6%, 15%)
HSB
hsb(252, 12%, 16%)
CMYK
cmyk(10%, 12%, 0%, 84%)
Oklch
oklch(26.8% 0.009 294.9)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBA896
96A9BB

Analogous

BB9697
BBA896
BBBA96

Triadic

BBA896
96BBA8
A896BB

Split-Comp.

BBA896
96BBBA
9697BB

Tetradic

BBA896
97BB96
96A9BB
BA96BB

Contrast Matrix WCAG 2.1 Contrast

BBA896
CDD9CA
716B77
E3E094
26252A
—
1.6
Fail
2.2
Fail
1.7
Fail
6.6
AA
1.6
Fail
—
3.5
AA Large
1.1
Fail
10.4
AAA
2.2
Fail
3.5
AA Large
—
3.8
AA Large
2.9
Fail
1.7
Fail
1.1
Fail
3.8
AA Large
—
11.1
AAA
6.6
AA
10.4
AAA
2.9
Fail
11.1
AAA
—
White BG
2.3Fail
1.5Fail
5.2AA
1.4Fail
15.2AAA
Black BG
9.2AAA
14.4AAA
4.1AA Large
15.4AAA
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B39A
D2D2CE
6E6E74
E2E2A6
262629

Deuteranopia

B4B59B
D2D1CE
6F6F73
E2E2AB
262629

Tritanopia

BA9E9F
CED0D1
717271
E3B5B8
262828

Achromatopsia

ACACAC
D4D4D4
6E6E6E
D8D8D8
262626

Shades & Tints Shades & Tints

#BBA896

Dark
Light

#CDD9CA

Dark
Light

#716B77

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bba896;
  --color-2: #cdd9ca;
  --color-3: #716b77;
  --color-4: #e3e094;
  --color-5: #26252a;
}

SCSS

$color-1: #bba896;
$color-2: #cdd9ca;
$color-3: #716b77;
$color-4: #e3e094;
$color-5: #26252a;

TAILWIND

colors: {
  'brand-1': '#bba896',
  'brand-2': '#cdd9ca',
  'brand-3': '#716b77',
  'brand-4': '#e3e094',
  'brand-5': '#26252a',
}

RGB Array

[187, 168, 150], [205, 217, 202], [113, 107, 119], [227, 224, 148], [38, 37, 42]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BBA896, #CDD9CA, #716B77, #E3E094, #26252A 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: #bba896; --color-2: #cdd9ca; --color-3: #716b77; --color-4: #e3e094; --color-5: #26252a. 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