← Back to Editor

#B1A098 · #C9CBB6 · #A18E64 · #784252 · #52273A

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

#B1A098

Apricot · DarkGray · Warm Sun

HEX
#B1A098
RGB
rgb(177, 160, 152)
HSL
hsl(19, 14%, 65%)
HSB
hsb(19, 14%, 69%)
CMYK
cmyk(0%, 10%, 14%, 31%)
Oklch
oklch(71.8% 0.023 46.9)

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

#C9CBB6

Fresh Green · Silver · Sunflower

HEX
#C9CBB6
RGB
rgb(201, 203, 182)
HSL
hsl(66, 17%, 75%)
HSB
hsb(66, 10%, 80%)
CMYK
cmyk(1%, 0%, 10%, 20%)
Oklch
oklch(83.5% 0.029 111.4)

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

#A18E64

Ginger · Gray · Sunflower

HEX
#A18E64
RGB
rgb(161, 142, 100)
HSL
hsl(41, 24%, 51%)
HSB
hsb(41, 38%, 63%)
CMYK
cmyk(0%, 12%, 38%, 37%)
Oklch
oklch(65.3% 0.062 86.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#784252

Dark Violet · DimGray · Camellia

HEX
#784252
RGB
rgb(120, 66, 82)
HSL
hsl(342, 29%, 36%)
HSB
hsb(342, 45%, 47%)
CMYK
cmyk(0%, 45%, 32%, 53%)
Oklch
oklch(45.0% 0.077 1.6)

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

#52273A

Dark Violet · DarkSlateGray · Raspberry

HEX
#52273A
RGB
rgb(82, 39, 58)
HSL
hsl(333, 36%, 24%)
HSB
hsb(333, 52%, 32%)
CMYK
cmyk(0%, 52%, 29%, 68%)
Oklch
oklch(33.8% 0.069 353.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1A098
99AAB2

Analogous

B2999E
B1A098
B2AE99

Triadic

B1A098
99B2A1
A199B2

Split-Comp.

B1A098
99B2AE
999EB2

Tetradic

B1A098
9EB299
99AAB2
AE99B2

Contrast Matrix WCAG 2.1 Contrast

B1A098
C9CBB6
A18E64
784252
52273A
—
1.5
Fail
1.3
Fail
3.1
AA Large
4.9
AA
1.5
Fail
—
1.9
Fail
4.7
AA
7.4
AAA
1.3
Fail
1.9
Fail
—
2.4
Fail
3.8
AA Large
3.1
AA Large
4.7
AA
2.4
Fail
—
1.6
Fail
4.9
AA
7.4
AAA
3.8
AA Large
1.6
Fail
—
White BG
2.5Fail
1.7Fail
3.2AA Large
7.8AAA
12.3AAA
Black BG
8.4AAA
12.7AAA
6.6AA
2.7Fail
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAA99A
CACABB
99996E
61604E
3F3F35

Deuteranopia

ABAC9A
CACABC
9A9B71
64684D
424534

Tritanopia

B09B9C
C9BFC0
A07678
754B4A
503231

Achromatopsia

A4A4A4
C8C8C8
8F8F8F
545454
363636

Shades & Tints Shades & Tints

#B1A098

Dark
Light

#C9CBB6

Dark
Light

#A18E64

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1a098;
  --color-2: #c9cbb6;
  --color-3: #a18e64;
  --color-4: #784252;
  --color-5: #52273a;
}

SCSS

$color-1: #b1a098;
$color-2: #c9cbb6;
$color-3: #a18e64;
$color-4: #784252;
$color-5: #52273a;

TAILWIND

colors: {
  'brand-1': '#b1a098',
  'brand-2': '#c9cbb6',
  'brand-3': '#a18e64',
  'brand-4': '#784252',
  'brand-5': '#52273a',
}

RGB Array

[177, 160, 152], [201, 203, 182], [161, 142, 100], [120, 66, 82], [82, 39, 58]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B1A098, #C9CBB6, #A18E64, #784252, #52273A 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: #b1a098; --color-2: #c9cbb6; --color-3: #a18e64; --color-4: #784252; --color-5: #52273a. 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