#343937 + #B80D66 + #D90F78 + #FE2696 + #828789 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#343937

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#343937

RGB

rgb(52, 57, 55)

HSL

hsl(156, 5%, 21%)

HSB

hsb(156, 9%, 22%)

CMYK

cmyk(9%, 0%, 4%, 78%)

Oklch

oklch(33.9% 0.008 170.0)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#B80D66

Rose Purple · MediumVioletRed · Camellia

HEX

#B80D66

RGB

rgb(184, 13, 102)

HSL

hsl(329, 87%, 39%)

HSB

hsb(329, 93%, 72%)

CMYK

cmyk(0%, 93%, 45%, 28%)

Oklch

oklch(51.2% 0.203 358.1)

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

#D90F78

Rose Purple · MediumVioletRed · Camellia

HEX

#D90F78

RGB

rgb(217, 15, 120)

HSL

hsl(329, 87%, 45%)

HSB

hsb(329, 93%, 85%)

CMYK

cmyk(0%, 93%, 45%, 15%)

Oklch

oklch(57.8% 0.230 358.5)

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

#FE2696

Rose Purple · DeepPink · Rose Pink

HEX

#FE2696

RGB

rgb(254, 38, 150)

HSL

hsl(329, 99%, 57%)

HSB

hsb(329, 85%, 100%)

CMYK

cmyk(0%, 85%, 41%, 0%)

Oklch

oklch(66.1% 0.253 356.5)

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

#828789

Ash · Gray · Warm Gray

HEX

#828789

RGB

rgb(130, 135, 137)

HSL

hsl(197, 3%, 52%)

HSB

hsb(197, 5%, 54%)

CMYK

cmyk(5%, 1%, 0%, 46%)

Oklch

oklch(62.0% 0.007 223.5)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

343937

383335

Analogous

333833

343937

333838

Triadic

343937

363338

383633

Split-Comp.

343937

383338

383333

Tetradic

343937

333338

383335

383833

Contrast Matrix WCAG 2.1 Contrast

343937	B80D66	D90F78	FE2696	828789
—	1.8 Fail	2.4 Fail	3.3 AA Large	3.2 AA Large
1.8 Fail	—	1.3 Fail	1.8 Fail	1.8 Fail
2.4 Fail	1.3 Fail	—	1.4 Fail	1.3 Fail
3.3 AA Large	1.8 Fail	1.4 Fail	—	1.0 Fail
3.2 AA Large	1.8 Fail	1.3 Fail	1.0 Fail	—

White BG

11.8AAA

6.4AA

4.9AA

3.5AA Large

3.6AA Large

Black BG

1.8Fail

3.3AA Large

4.3AA Large

5.9AA

5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

363637

6E6C50

82805F

A09F7B

848489

Deuteranopia

363638

78854B

8D9C59

ADBD74

848488

Tritanopia

343838

AF3F3C

CF4B46

F36661

828888

Achromatopsia

373737

4A4A4A

575757

737373

868686

Shades & Tints Shades & Tints

#343937

Dark

Light

#B80D66

Dark

Light

#D90F78

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #343937;
  --color-2: #b80d66;
  --color-3: #d90f78;
  --color-4: #fe2696;
  --color-5: #828789;
}

SCSS

$color-1: #343937;
$color-2: #b80d66;
$color-3: #d90f78;
$color-4: #fe2696;
$color-5: #828789;

TAILWIND

colors: {
  'brand-1': '#343937',
  'brand-2': '#b80d66',
  'brand-3': '#d90f78',
  'brand-4': '#fe2696',
  'brand-5': '#828789',
}

RGB Array

[52, 57, 55], [184, 13, 102], [217, 15, 120], [254, 38, 150], [130, 135, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #343937, #B80D66, #D90F78, #FE2696, #828789 is ideal for: corporate websites, product showcases, portfolios. 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: #343937; --color-2: #b80d66; --color-3: #d90f78; --color-4: #fe2696; --color-5: #828789. 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. 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 warm-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