← Back to Editor

#BB9A67 · #C07146 · #F11C4A · #821E40 · #3B1234

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

#BB9A67

Ginger · DarkSalmon · Warm Sun

HEX
#BB9A67
RGB
rgb(187, 154, 103)
HSL
hsl(36, 38%, 57%)
HSB
hsb(36, 45%, 73%)
CMYK
cmyk(0%, 18%, 45%, 27%)
Oklch
oklch(70.4% 0.078 77.8)

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

#C07146

Tangerine · Chocolate · Warm Sun

HEX
#C07146
RGB
rgb(192, 113, 70)
HSL
hsl(21, 49%, 51%)
HSB
hsb(21, 64%, 75%)
CMYK
cmyk(0%, 41%, 64%, 25%)
Oklch
oklch(62.7% 0.116 48.2)

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

#F11C4A

Vermilion · Crimson · Passion Red

HEX
#F11C4A
RGB
rgb(241, 28, 74)
HSL
hsl(347, 88%, 53%)
HSB
hsb(347, 88%, 95%)
CMYK
cmyk(0%, 88%, 69%, 5%)
Oklch
oklch(61.5% 0.236 18.4)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#821E40

Dark Violet · Brown · Camellia

HEX
#821E40
RGB
rgb(130, 30, 64)
HSL
hsl(340, 62%, 31%)
HSB
hsb(340, 77%, 51%)
CMYK
cmyk(0%, 77%, 51%, 49%)
Oklch
oklch(41.0% 0.136 5.3)

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

#3B1234

Rose Purple · DarkSlateGray · Dark Purple

HEX
#3B1234
RGB
rgb(59, 18, 52)
HSL
hsl(310, 53%, 15%)
HSB
hsb(310, 69%, 23%)
CMYK
cmyk(0%, 69%, 12%, 77%)
Oklch
oklch(26.3% 0.081 334.9)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BB9A67
6889BB

Analogous

BB7068
BB9A67
B3BB68

Triadic

BB9A67
68BB9A
9A68BB

Split-Comp.

BB9A67
68B3BB
7068BB

Tetradic

BB9A67
68BB70
6889BB
BB68B3

Contrast Matrix WCAG 2.1 Contrast

BB9A67
C07146
F11C4A
821E40
3B1234
—
1.4
Fail
1.6
Fail
3.6
AA Large
6.0
AA
1.4
Fail
—
1.1
Fail
2.6
Fail
4.3
AA Large
1.6
Fail
1.1
Fail
—
2.3
Fail
3.8
AA Large
3.6
AA Large
2.6
Fail
2.3
Fail
—
1.7
Fail
6.0
AA
4.3
AA Large
3.8
AA Large
1.7
Fail
—
White BG
2.6Fail
3.7AA Large
4.2AA Large
9.5AAA
15.9AAA
Black BG
7.9AAA
5.7AA
5.0AA
2.2Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ADAC73
9E9D50
95933F
575638
29292C

Deuteranopia

AFB176
A2A853
A1B13C
5D6436
2C2F2A

Tritanopia

B97D7F
BC595A
E63634
7D3130
392524

Achromatopsia

9E9E9E
848484
616161
404040
222222

Shades & Tints Shades & Tints

#BB9A67

Dark
Light

#C07146

Dark
Light

#F11C4A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bb9a67;
  --color-2: #c07146;
  --color-3: #f11c4a;
  --color-4: #821e40;
  --color-5: #3b1234;
}

SCSS

$color-1: #bb9a67;
$color-2: #c07146;
$color-3: #f11c4a;
$color-4: #821e40;
$color-5: #3b1234;

TAILWIND

colors: {
  'brand-1': '#bb9a67',
  'brand-2': '#c07146',
  'brand-3': '#f11c4a',
  'brand-4': '#821e40',
  'brand-5': '#3b1234',
}

RGB Array

[187, 154, 103], [192, 113, 70], [241, 28, 74], [130, 30, 64], [59, 18, 52]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BB9A67, #C07146, #F11C4A, #821E40, #3B1234 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: #bb9a67; --color-2: #c07146; --color-3: #f11c4a; --color-4: #821e40; --color-5: #3b1234. 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