#B22A4E + #853F54 + #5F5158 + #457660 + #25A360 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B22A4E

Dark Violet · Brown · Camellia

HEX

#B22A4E

RGB

rgb(178, 42, 78)

HSL

hsl(344, 62%, 43%)

HSB

hsb(344, 76%, 70%)

CMYK

cmyk(0%, 76%, 56%, 30%)

Oklch

oklch(51.1% 0.172 10.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#853F54

Dark Violet · Sienna · Camellia

HEX

#853F54

RGB

rgb(133, 63, 84)

HSL

hsl(342, 36%, 38%)

HSB

hsb(342, 53%, 52%)

CMYK

cmyk(0%, 53%, 37%, 48%)

Oklch

oklch(46.4% 0.099 2.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#5F5158

Dark Violet · DimGray · Charcoal

HEX

#5F5158

RGB

rgb(95, 81, 88)

HSL

hsl(330, 8%, 35%)

HSB

hsb(330, 15%, 37%)

CMYK

cmyk(0%, 15%, 7%, 63%)

Oklch

oklch(45.1% 0.021 346.3)

Traditional「Dark Violet」· Paint「Charcoal」· Creative Midnight Shadow

#457660

Mineral Blue · SeaGreen · Forest Green

HEX

#457660

RGB

rgb(69, 118, 96)

HSL

hsl(153, 26%, 37%)

HSB

hsb(153, 42%, 46%)

CMYK

cmyk(42%, 0%, 19%, 54%)

Oklch

oklch(52.4% 0.064 163.8)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

#25A360

Pine Green · SeaGreen · Forest Green

HEX

#25A360

RGB

rgb(37, 163, 96)

HSL

hsl(148, 63%, 39%)

HSB

hsb(148, 77%, 64%)

CMYK

cmyk(77%, 0%, 41%, 36%)

Oklch

oklch(63.3% 0.146 154.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B22A4E

2AB28D

Analogous

B22A92

B22A4E

B2492A

Triadic

B22A4E

4EB22A

2A4EB2

Split-Comp.

B22A4E

2AB249

2A92B2

Tetradic

B22A4E

92B22A

2AB28D

492AB2

Contrast Matrix WCAG 2.1 Contrast

B22A4E	853F54	5F5158	457660	25A360
—	1.2 Fail	1.2 Fail	1.2 Fail	1.9 Fail
1.2 Fail	—	1.0 Fail	1.4 Fail	2.3 Fail
1.2 Fail	1.0 Fail	—	1.4 Fail	2.3 Fail
1.2 Fail	1.4 Fail	1.4 Fail	—	1.6 Fail
1.9 Fail	2.3 Fail	2.3 Fail	1.6 Fail	—

White BG

6.3AA

7.4AAA

7.5AAA

5.2AA

3.2AA Large

Black BG

3.3AA Large

2.8Fail

4.0AA Large

6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

777645

67664F

595956

5A5B65

5C5D70

Deuteranopia

7F8943

6B704E

5A5B56

575467

544B74

Tritanopia

AB3E3D

824B4A

5E5555

476A6A

2B7D80

Achromatopsia

575757

565656

656565

767676

Shades & Tints Shades & Tints

#B22A4E

Dark

Light

#853F54

Dark

Light

#5F5158

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b22a4e;
  --color-2: #853f54;
  --color-3: #5f5158;
  --color-4: #457660;
  --color-5: #25a360;
}

SCSS

$color-1: #b22a4e;
$color-2: #853f54;
$color-3: #5f5158;
$color-4: #457660;
$color-5: #25a360;

TAILWIND

colors: {
  'brand-1': '#b22a4e',
  'brand-2': '#853f54',
  'brand-3': '#5f5158',
  'brand-4': '#457660',
  'brand-5': '#25a360',
}

RGB Array

[178, 42, 78], [133, 63, 84], [95, 81, 88], [69, 118, 96], [37, 163, 96]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B22A4E, #853F54, #5F5158, #457660, #25A360 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: #b22a4e; --color-2: #853f54; --color-3: #5f5158; --color-4: #457660; --color-5: #25a360. 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 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