← Back to Editor

#1F0000 · #BD3333 · #BD5533 · #BD9A33 · #BDBD33

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#1F0000

Vermilion · Black · Deep Berry

HEX
#1F0000
RGB
rgb(31, 0, 0)
HSL
hsl(0, 100%, 6%)
HSB
hsb(0, 100%, 12%)
CMYK
cmyk(0%, 100%, 100%, 88%)
Oklch
oklch(15.0% 0.062 29.2)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#BD3333

Crimson · FireBrick · Passion Red

HEX
#BD3333
RGB
rgb(189, 51, 51)
HSL
hsl(0, 58%, 47%)
HSB
hsb(0, 73%, 74%)
CMYK
cmyk(0%, 73%, 73%, 26%)
Oklch
oklch(53.3% 0.175 25.4)

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

#BD5533

Tangerine · Sienna · Amber Brown

HEX
#BD5533
RGB
rgb(189, 85, 51)
HSL
hsl(15, 58%, 47%)
HSB
hsb(15, 73%, 74%)
CMYK
cmyk(0%, 55%, 73%, 26%)
Oklch
oklch(57.5% 0.143 38.4)

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

#BD9A33

Ochre · GoldenRod · Honey Gold

HEX
#BD9A33
RGB
rgb(189, 154, 51)
HSL
hsl(45, 58%, 47%)
HSB
hsb(45, 73%, 74%)
CMYK
cmyk(0%, 19%, 73%, 26%)
Oklch
oklch(70.0% 0.124 89.5)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#BDBD33

Autumn Sage · GoldenRod · Honey Gold

HEX
#BDBD33
RGB
rgb(189, 189, 51)
HSL
hsl(60, 58%, 47%)
HSB
hsb(60, 73%, 74%)
CMYK
cmyk(0%, 0%, 73%, 26%)
Oklch
oklch(77.5% 0.152 109.5)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1F0000
001F1F

Analogous

1F000F
1F0000
1F0F00

Triadic

1F0000
001F00
00001F

Split-Comp.

1F0000
001F0F
000F1F

Tetradic

1F0000
0F1F00
001F1F
0F001F

Contrast Matrix WCAG 2.1 Contrast

1F0000
BD3333
BD5533
BD9A33
BDBD33
—
3.5
AA Large
4.3
AA Large
7.4
AAA
9.9
AAA
3.5
AA Large
—
1.2
Fail
2.1
Fail
2.8
Fail
4.3
AA Large
1.2
Fail
—
1.7
Fail
2.3
Fail
7.4
AAA
2.1
Fail
1.7
Fail
—
1.3
Fail
9.9
AAA
2.8
Fail
2.3
Fail
1.3
Fail
—
White BG
19.8AAA
5.7AA
4.7AA
2.7Fail
2.0Fail
Black BG
1.1Fail
3.7AA Large
4.5AA
7.8AAA
10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

121100
818033
908F3B
AEAE4C
BDBD54

Deuteranopia

131600
899433
969E3D
B0B252
BDBD5C

Tritanopia

1D0000
B63333
B84243
BB6064
BD6F75

Achromatopsia

090909
5C5C5C
707070
999999
ADADAD

Shades & Tints Shades & Tints

#1F0000

Dark
Light

#BD3333

Dark
Light

#BD5533

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1f0000;
  --color-2: #bd3333;
  --color-3: #bd5533;
  --color-4: #bd9a33;
  --color-5: #bdbd33;
}

SCSS

$color-1: #1f0000;
$color-2: #bd3333;
$color-3: #bd5533;
$color-4: #bd9a33;
$color-5: #bdbd33;

TAILWIND

colors: {
  'brand-1': '#1f0000',
  'brand-2': '#bd3333',
  'brand-3': '#bd5533',
  'brand-4': '#bd9a33',
  'brand-5': '#bdbd33',
}

RGB Array

[31, 0, 0], [189, 51, 51], [189, 85, 51], [189, 154, 51], [189, 189, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1F0000, #BD3333, #BD5533, #BD9A33, #BDBD33 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #1f0000; --color-2: #bd3333; --color-3: #bd5533; --color-4: #bd9a33; --color-5: #bdbd33. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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