← Back to Editor

#B03746 · #D1C24D · #503C31 · #FFFFFF · #854320

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

#B03746

Crimson · Brown · Passion Red

HEX
#B03746
RGB
rgb(176, 55, 70)
HSL
hsl(353, 52%, 45%)
HSB
hsb(353, 69%, 69%)
CMYK
cmyk(0%, 69%, 60%, 31%)
Oklch
oklch(51.8% 0.156 17.5)

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

#D1C24D

Autumn Sage · SandyBrown · Sunflower

HEX
#D1C24D
RGB
rgb(209, 194, 77)
HSL
hsl(53, 59%, 56%)
HSB
hsb(53, 63%, 82%)
CMYK
cmyk(0%, 7%, 63%, 18%)
Oklch
oklch(80.5% 0.137 102.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#503C31

Tangerine · DarkOliveGreen · Cinnamon

HEX
#503C31
RGB
rgb(80, 60, 49)
HSL
hsl(21, 24%, 25%)
HSB
hsb(21, 39%, 31%)
CMYK
cmyk(0%, 25%, 39%, 69%)
Oklch
oklch(37.5% 0.034 50.1)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#854320

Tangerine · Sienna · Amber Brown

HEX
#854320
RGB
rgb(133, 67, 32)
HSL
hsl(21, 61%, 32%)
HSB
hsb(21, 76%, 52%)
CMYK
cmyk(0%, 50%, 76%, 48%)
Oklch
oklch(45.9% 0.102 46.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B03746
37AEA0

Analogous

AE3781
B03746
AE6537

Triadic

B03746
45AE37
3745AE

Split-Comp.

B03746
37AE65
3781AE

Tetradic

B03746
81AE37
37AEA0
6537AE

Contrast Matrix WCAG 2.1 Contrast

B03746
D1C24D
503C31
FFFFFF
854320
—
3.3
AA Large
1.7
Fail
6.0
AA
1.2
Fail
3.3
AA Large
—
5.7
AA
1.8
Fail
4.1
AA Large
1.7
Fail
5.7
AA
—
10.3
AAA
1.4
Fail
6.0
AA
1.8
Fail
10.3
AAA
—
7.4
AAA
1.2
Fail
4.1
AA Large
1.4
Fail
7.4
AAA
—
White BG
6.0AA
1.8Fail
10.3AAA
1.0Fail
7.4AAA
Black BG
3.5AA Large
11.5AAA
2.0Fail
21.0AAA
2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7C7B42
CBCA69
474734
FFFFFF
686828

Deuteranopia

838C42
CBCC70
494A34
FFFFFF
6C712B

Tritanopia

AA403F
D08085
4F3636
FFFFFF
822F31

Achromatopsia

5D5D5D
B9B9B9
414141
FFFFFF
535353

Shades & Tints Shades & Tints

#B03746

Dark
Light

#D1C24D

Dark
Light

#503C31

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b03746;
  --color-2: #d1c24d;
  --color-3: #503c31;
  --color-4: #ffffff;
  --color-5: #854320;
}

SCSS

$color-1: #b03746;
$color-2: #d1c24d;
$color-3: #503c31;
$color-4: #ffffff;
$color-5: #854320;

TAILWIND

colors: {
  'brand-1': '#b03746',
  'brand-2': '#d1c24d',
  'brand-3': '#503c31',
  'brand-4': '#ffffff',
  'brand-5': '#854320',
}

RGB Array

[176, 55, 70], [209, 194, 77], [80, 60, 49], [255, 255, 255], [133, 67, 32]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B03746, #D1C24D, #503C31, #FFFFFF, #854320 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: #b03746; --color-2: #d1c24d; --color-3: #503c31; --color-4: #ffffff; --color-5: #854320. 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