#B7757F + #51423F + #006854 + #394F42 + #523C24 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B7757F

Crimson · Gray · Passion Red

HEX

#B7757F

RGB

rgb(183, 117, 127)

HSL

hsl(351, 31%, 59%)

HSB

hsb(351, 36%, 72%)

CMYK

cmyk(0%, 36%, 31%, 28%)

Oklch

oklch(63.5% 0.084 9.8)

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

#51423F

Crimson · DarkSlateGray · Wine Red

HEX

#51423F

RGB

rgb(81, 66, 63)

HSL

hsl(10, 12%, 28%)

HSB

hsb(10, 22%, 32%)

CMYK

cmyk(0%, 19%, 22%, 68%)

Oklch

oklch(39.4% 0.021 31.2)

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

#006854

Mineral Blue · Teal · Peacock Green

HEX

#006854

RGB

rgb(0, 104, 84)

HSL

hsl(168, 100%, 20%)

HSB

hsb(168, 100%, 41%)

CMYK

cmyk(100%, 0%, 19%, 59%)

Oklch

oklch(46.1% 0.088 173.4)

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

#394F42

Celadon · DarkSlateGray · Forest Green

HEX

#394F42

RGB

rgb(57, 79, 66)

HSL

hsl(145, 16%, 27%)

HSB

hsb(145, 28%, 31%)

CMYK

cmyk(28%, 0%, 16%, 69%)

Oklch

oklch(40.5% 0.035 158.5)

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

#523C24

Ochre · DarkOliveGreen · Cinnamon

HEX

#523C24

RGB

rgb(82, 60, 36)

HSL

hsl(31, 39%, 23%)

HSB

hsb(31, 56%, 32%)

CMYK

cmyk(0%, 27%, 56%, 68%)

Oklch

oklch(37.4% 0.048 67.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7757F

76B7AD

Analogous

B776A0

B7757F

B78D76

Triadic

B7757F

80B776

7680B7

Split-Comp.

B7757F

76B78D

76A0B7

Tetradic

B7757F

A0B776

76B7AD

8D76B7

Contrast Matrix WCAG 2.1 Contrast

B7757F	51423F	006854	394F42	523C24
—	2.7 Fail	1.9 Fail	2.5 Fail	2.9 Fail
2.7 Fail	—	1.4 Fail	1.1 Fail	1.1 Fail
1.9 Fail	1.4 Fail	—	1.3 Fail	1.5 Fail
2.5 Fail	1.1 Fail	1.3 Fail	—	1.2 Fail
2.9 Fail	1.1 Fail	1.5 Fail	1.2 Fail	—

White BG

3.6AA Large

9.5AAA

6.8AA

8.9AAA

10.3AAA

Black BG

5.9AA

2.2Fail

3.1AA Large

2.4Fail

2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9A7D

4B4A40

2D2E59

434345

48482A

Deuteranopia

9EA37C

4B4D40

271F5A

414046

4A4B2B

Tritanopia

B47B7A

504040

055D5E

3A4848

512E2F

Achromatopsia

8A8A8A

464646

474747

404040

Shades & Tints Shades & Tints

#B7757F

Dark

Light

#51423F

Dark

Light

#006854

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7757f;
  --color-2: #51423f;
  --color-3: #006854;
  --color-4: #394f42;
  --color-5: #523c24;
}

SCSS

$color-1: #b7757f;
$color-2: #51423f;
$color-3: #006854;
$color-4: #394f42;
$color-5: #523c24;

TAILWIND

colors: {
  'brand-1': '#b7757f',
  'brand-2': '#51423f',
  'brand-3': '#006854',
  'brand-4': '#394f42',
  'brand-5': '#523c24',
}

RGB Array

[183, 117, 127], [81, 66, 63], [0, 104, 84], [57, 79, 66], [82, 60, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B7757F, #51423F, #006854, #394F42, #523C24 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: #b7757f; --color-2: #51423f; --color-3: #006854; --color-4: #394f42; --color-5: #523c24. 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