← Back to Editor

#BE946A · #917A6A · #BBB4A2 · #B58C88 · #303231

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

#BE946A

Ginger · DarkSalmon · Warm Sun

HEX
#BE946A
RGB
rgb(190, 148, 106)
HSL
hsl(30, 39%, 58%)
HSB
hsb(30, 44%, 75%)
CMYK
cmyk(0%, 22%, 44%, 25%)
Oklch
oklch(69.6% 0.076 66.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#917A6A

Tangerine · Gray · Amber Brown

HEX
#917A6A
RGB
rgb(145, 122, 106)
HSL
hsl(25, 16%, 49%)
HSB
hsb(25, 27%, 57%)
CMYK
cmyk(0%, 16%, 27%, 43%)
Oklch
oklch(59.7% 0.037 56.7)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#BBB4A2

Ginger · DarkGray · Sunflower

HEX
#BBB4A2
RGB
rgb(187, 180, 162)
HSL
hsl(43, 16%, 68%)
HSB
hsb(43, 13%, 73%)
CMYK
cmyk(0%, 4%, 13%, 27%)
Oklch
oklch(77.1% 0.026 89.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#B58C88

Peach Pink · DarkGray · Coral Red

HEX
#B58C88
RGB
rgb(181, 140, 136)
HSL
hsl(5, 23%, 62%)
HSB
hsb(5, 25%, 71%)
CMYK
cmyk(0%, 23%, 25%, 29%)
Oklch
oklch(67.8% 0.051 24.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#303231

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#303231
RGB
rgb(48, 50, 49)
HSL
hsl(150, 2%, 19%)
HSB
hsb(150, 4%, 20%)
CMYK
cmyk(4%, 0%, 2%, 80%)
Oklch
oklch(31.5% 0.003 164.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BE946A
6A94BE

Analogous

BE6A6A
BE946A
BEBE6A

Triadic

BE946A
6ABE94
946ABE

Split-Comp.

BE946A
6ABEBE
6A6ABE

Tetradic

BE946A
6ABE6A
6A94BE
BE6ABE

Contrast Matrix WCAG 2.1 Contrast

BE946A
917A6A
BBB4A2
B58C88
303231
—
1.5
Fail
1.3
Fail
1.1
Fail
4.7
AA
1.5
Fail
—
2.0
Fail
1.4
Fail
3.2
AA Large
1.3
Fail
2.0
Fail
—
1.4
Fail
6.2
AA
1.1
Fail
1.4
Fail
1.4
Fail
—
4.3
AA Large
4.7
AA
3.2
AA Large
6.2
AA
4.3
AA Large
—
White BG
2.8Fail
4.0AA Large
2.1Fail
3.0Fail
12.9AAA
Black BG
7.6AAA
5.2AA
10.2AAA
7.1AAA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACAB74
87876E
B8B8A6
A3A389
313131

Deuteranopia

AEB177
888A6F
B8B9A7
A6A989
313131

Tritanopia

BC7C7E
907172
BBAAAB
B38A8A
303131

Achromatopsia

9C9C9C
7F7F7F
B4B4B4
989898
313131

Shades & Tints Shades & Tints

#BE946A

Dark
Light

#917A6A

Dark
Light

#BBB4A2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #be946a;
  --color-2: #917a6a;
  --color-3: #bbb4a2;
  --color-4: #b58c88;
  --color-5: #303231;
}

SCSS

$color-1: #be946a;
$color-2: #917a6a;
$color-3: #bbb4a2;
$color-4: #b58c88;
$color-5: #303231;

TAILWIND

colors: {
  'brand-1': '#be946a',
  'brand-2': '#917a6a',
  'brand-3': '#bbb4a2',
  'brand-4': '#b58c88',
  'brand-5': '#303231',
}

RGB Array

[190, 148, 106], [145, 122, 106], [187, 180, 162], [181, 140, 136], [48, 50, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BE946A, #917A6A, #BBB4A2, #B58C88, #303231 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: #be946a; --color-2: #917a6a; --color-3: #bbb4a2; --color-4: #b58c88; --color-5: #303231. 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