#BD2A33 + #D6AA26 + #93A31C + #408156 + #30374F · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#BD2A33

Vermilion · FireBrick · Passion Red

HEX

#BD2A33

RGB

rgb(189, 42, 51)

HSL

hsl(356, 64%, 45%)

HSB

hsb(356, 78%, 74%)

CMYK

cmyk(0%, 78%, 73%, 26%)

Oklch

oklch(52.5% 0.183 23.4)

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

#D6AA26

Ochre · GoldenRod · Honey Gold

HEX

#D6AA26

RGB

rgb(214, 170, 38)

HSL

hsl(45, 70%, 49%)

HSB

hsb(45, 82%, 84%)

CMYK

cmyk(0%, 21%, 82%, 16%)

Oklch

oklch(75.8% 0.145 88.4)

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

#93A31C

Autumn Sage · Olive · Honey Gold

HEX

#93A31C

RGB

rgb(147, 163, 28)

HSL

hsl(67, 71%, 37%)

HSB

hsb(67, 83%, 64%)

CMYK

cmyk(10%, 0%, 83%, 36%)

Oklch

oklch(68.0% 0.149 116.7)

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

#408156

Celadon · SeaGreen · Forest Green

HEX

#408156

RGB

rgb(64, 129, 86)

HSL

hsl(140, 34%, 38%)

HSB

hsb(140, 50%, 51%)

CMYK

cmyk(50%, 0%, 33%, 49%)

Oklch

oklch(54.8% 0.095 153.1)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#30374F

Indigo · DarkSlateGray · Prussian Blue

HEX

#30374F

RGB

rgb(48, 55, 79)

HSL

hsl(226, 24%, 25%)

HSB

hsb(226, 39%, 31%)

CMYK

cmyk(39%, 30%, 0%, 69%)

Oklch

oklch(34.1% 0.043 271.4)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BD2A33

29BCB2

Analogous

BC297D

BD2A33

BC6929

Triadic

BD2A33

33BC29

2933BC

Split-Comp.

BD2A33

29BC69

297DBC

Tetradic

BD2A33

7DBC29

29BCB2

6929BC

Contrast Matrix WCAG 2.1 Contrast

BD2A33	D6AA26	93A31C	408156	30374F
—	2.7 Fail	2.1 Fail	1.3 Fail	2.0 Fail
2.7 Fail	—	1.3 Fail	2.1 Fail	5.4 AA
2.1 Fail	1.3 Fail	—	1.7 Fail	4.2 AA Large
1.3 Fail	2.1 Fail	1.7 Fail	—	2.5 Fail
2.0 Fail	5.4 AA	4.2 AA Large	2.5 Fail	—

White BG

5.9AA

2.2Fail

2.8Fail

4.7AA

11.8AAA

Black BG

3.5AA Large

9.6AAA

7.5AAA

4.5AA Large

1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7D7C31

C3C346

9A9A3D

5C5D60

333349

Deuteranopia

869130

C6C94E

999845

585463

333248

Tritanopia

B62F2F

D45F65

94565C

43696A

304544

Achromatopsia

575757

A8A8A8

8F8F8F

696969

383838

Shades & Tints Shades & Tints

#BD2A33

Dark

Light

#D6AA26

Dark

Light

#93A31C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bd2a33;
  --color-2: #d6aa26;
  --color-3: #93a31c;
  --color-4: #408156;
  --color-5: #30374f;
}

SCSS

$color-1: #bd2a33;
$color-2: #d6aa26;
$color-3: #93a31c;
$color-4: #408156;
$color-5: #30374f;

TAILWIND

colors: {
  'brand-1': '#bd2a33',
  'brand-2': '#d6aa26',
  'brand-3': '#93a31c',
  'brand-4': '#408156',
  'brand-5': '#30374f',
}

RGB Array

[189, 42, 51], [214, 170, 38], [147, 163, 28], [64, 129, 86], [48, 55, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #BD2A33, #D6AA26, #93A31C, #408156, #30374F is ideal for: tech websites, dark mode UIs, game UIs. 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: #bd2a33; --color-2: #d6aa26; --color-3: #93a31c; --color-4: #408156; --color-5: #30374f. 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. 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 cool-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