← Back to Editor

#B33A48 · #BF750D · #B7A43B · #B6B490 · #5D4E4C

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 Library

Color Details Color Details

#B33A48

Crimson · Brown · Passion Red

HEX
#B33A48
RGB
rgb(179, 58, 72)
HSL
hsl(353, 51%, 46%)
HSB
hsb(353, 68%, 70%)
CMYK
cmyk(0%, 68%, 60%, 30%)
Oklch
oklch(52.7% 0.156 17.7)

TraditionalCrimson」· PaintPassion Red」· Creative Blush Sunrise

#BF750D

Ochre · DarkGoldenRod · Amber Brown

HEX
#BF750D
RGB
rgb(191, 117, 13)
HSL
hsl(35, 87%, 40%)
HSB
hsb(35, 93%, 75%)
CMYK
cmyk(0%, 39%, 93%, 25%)
Oklch
oklch(62.8% 0.137 66.1)

TraditionalOchre」· PaintAmber Brown」· Creative Blush Sunrise

#B7A43B

Autumn Sage · GoldenRod · Honey Gold

HEX
#B7A43B
RGB
rgb(183, 164, 59)
HSL
hsl(51, 51%, 47%)
HSB
hsb(51, 68%, 72%)
CMYK
cmyk(0%, 10%, 68%, 28%)
Oklch
oklch(71.6% 0.125 98.9)

TraditionalAutumn Sage」· PaintHoney Gold」· Creative Blush Sunrise

#B6B490

Fresh Green · Tan · Sunflower

HEX
#B6B490
RGB
rgb(182, 180, 144)
HSL
hsl(57, 21%, 64%)
HSB
hsb(57, 21%, 71%)
CMYK
cmyk(0%, 1%, 21%, 29%)
Oklch
oklch(76.2% 0.049 104.9)

TraditionalFresh Green」· PaintSunflower」· Creative Lemon Fizz

#5D4E4C

Crimson · DimGray · Wine Red

HEX
#5D4E4C
RGB
rgb(93, 78, 76)
HSL
hsl(7, 10%, 33%)
HSB
hsb(7, 18%, 36%)
CMYK
cmyk(0%, 16%, 18%, 64%)
Oklch
oklch(43.8% 0.020 26.9)

TraditionalCrimson」· PaintWine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B33A48
39B1A3

Analogous

B13983
B33A48
B16739

Triadic

B33A48
47B139
3947B1

Split-Comp.

B33A48
39B167
3983B1

Tetradic

B33A48
83B139
39B1A3
6739B1

Contrast Matrix WCAG 2.1 Contrast

B33A48
BF750D
B7A43B
B6B490
5D4E4C
1.6
Fail
2.3
Fail
2.7
Fail
1.4
Fail
1.6
Fail
1.5
Fail
1.7
Fail
2.2
Fail
2.3
Fail
1.5
Fail
1.2
Fail
3.2
AA Large
2.7
Fail
1.7
Fail
1.2
Fail
3.7
AA Large
1.4
Fail
2.2
Fail
3.2
AA Large
3.7
AA Large
White BG
5.8AA
3.6AA Large
2.5Fail
2.1Fail
7.9AAA
Black BG
3.6AA Large
5.8AA
8.4AAA
9.9AAA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7F7E45
9F9E26
AFAF54
B5B599
57564C

Deuteranopia

868F44
A3A92C
B0B15B
B5B59B
57594D

Tritanopia

AD4241
BB3A3E
B6686D
B6A0A1
5C4D4D

Achromatopsia

606060
7F7F7F
9E9E9E
B0B0B0
525252

Shades & Tints Shades & Tints

#B33A48

Dark
Light

#BF750D

Dark
Light

#B7A43B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b33a48;
  --color-2: #bf750d;
  --color-3: #b7a43b;
  --color-4: #b6b490;
  --color-5: #5d4e4c;
}

SCSS

$color-1: #b33a48;
$color-2: #bf750d;
$color-3: #b7a43b;
$color-4: #b6b490;
$color-5: #5d4e4c;

TAILWIND

colors: {
  'brand-1': '#b33a48',
  'brand-2': '#bf750d',
  'brand-3': '#b7a43b',
  'brand-4': '#b6b490',
  'brand-5': '#5d4e4c',
}

RGB Array

[179, 58, 72], [191, 117, 13], [183, 164, 59], [182, 180, 144], [93, 78, 76]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B33A48, #BF750D, #B7A43B, #B6B490, #5D4E4C is ideal for: corporate websites, product showcases, portfolios. 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: #b33a48; --color-2: #bf750d; --color-3: #b7a43b; --color-4: #b6b490; --color-5: #5d4e4c. 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. 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