#B5025E + #4B5A5E + #994C38 + #E33100 + #291C16 · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B5025E

Rose Purple · MediumVioletRed · Camellia

HEX

#B5025E

RGB

rgb(181, 2, 94)

HSL

hsl(329, 98%, 36%)

HSB

hsb(329, 99%, 71%)

CMYK

cmyk(0%, 99%, 48%, 29%)

Oklch

oklch(50.1% 0.202 0.4)

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

#4B5A5E

Slate Blue · DarkSlateGray · Mint Ice

HEX

#4B5A5E

RGB

rgb(75, 90, 94)

HSL

hsl(193, 11%, 33%)

HSB

hsb(193, 20%, 37%)

CMYK

cmyk(20%, 4%, 0%, 63%)

Oklch

oklch(45.6% 0.020 215.6)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#994C38

Crimson · Sienna · Passion Red

HEX

#994C38

RGB

rgb(153, 76, 56)

HSL

hsl(12, 46%, 41%)

HSB

hsb(12, 63%, 60%)

CMYK

cmyk(0%, 50%, 63%, 40%)

Oklch

oklch(50.8% 0.108 35.6)

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

#E33100

Vermilion · OrangeRed · Passion Red

HEX

#E33100

RGB

rgb(227, 49, 0)

HSL

hsl(13, 100%, 45%)

HSB

hsb(13, 100%, 89%)

CMYK

cmyk(0%, 78%, 100%, 11%)

Oklch

oklch(59.5% 0.218 33.3)

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

#291C16

Tangerine · Black · Cinnamon

HEX

#291C16

RGB

rgb(41, 28, 22)

HSL

hsl(19, 30%, 12%)

HSB

hsb(19, 46%, 16%)

CMYK

cmyk(0%, 32%, 46%, 84%)

Oklch

oklch(24.1% 0.023 45.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B5025E

02B659

Analogous

B302B6

B5025E

B60205

Triadic

B5025E

5FB602

025FB6

Split-Comp.

B5025E

05B602

02B6B3

Tetradic

B5025E

B6B302

02B659

0205B6

Contrast Matrix WCAG 2.1 Contrast

B5025E	4B5A5E	994C38	E33100	291C16
—	1.1 Fail	1.1 Fail	1.5 Fail	2.5 Fail
1.1 Fail	—	1.2 Fail	1.6 Fail	2.3 Fail
1.1 Fail	1.2 Fail	—	1.4 Fail	2.7 Fail
1.5 Fail	1.6 Fail	1.4 Fail	—	3.7 AA Large
2.5 Fail	2.3 Fail	2.7 Fail	3.7 AA Large	—

White BG

6.7AA

7.2AAA

6.1AA

4.5AA Large

16.5AAA

Black BG

3.1AA Large

2.9Fail

3.4AA Large

4.7AA

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

676648

51525D

78773D

96940C

232317

Deuteranopia

727F42

51505D

7C823E

A0AE0F

242518

Tritanopia

AC3632

4C5C5C

954142

DA1517

281919

Achromatopsia

424242

565656

616161

1F1F1F

Shades & Tints Shades & Tints

#B5025E

Dark

Light

#4B5A5E

Dark

Light

#994C38

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b5025e;
  --color-2: #4b5a5e;
  --color-3: #994c38;
  --color-4: #e33100;
  --color-5: #291c16;
}

SCSS

$color-1: #b5025e;
$color-2: #4b5a5e;
$color-3: #994c38;
$color-4: #e33100;
$color-5: #291c16;

TAILWIND

colors: {
  'brand-1': '#b5025e',
  'brand-2': '#4b5a5e',
  'brand-3': '#994c38',
  'brand-4': '#e33100',
  'brand-5': '#291c16',
}

RGB Array

[181, 2, 94], [75, 90, 94], [153, 76, 56], [227, 49, 0], [41, 28, 22]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #B5025E, #4B5A5E, #994C38, #E33100, #291C16 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: #b5025e; --color-2: #4b5a5e; --color-3: #994c38; --color-4: #e33100; --color-5: #291c16. 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 summer-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