← Back to Editor

#B5545D · #446664 · #656D6F · #BB796D · #D6A378

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B5545D

Crimson · Sienna · Passion Red

HEX
#B5545D
RGB
rgb(181, 84, 93)
HSL
hsl(354, 40%, 52%)
HSB
hsb(354, 54%, 71%)
CMYK
cmyk(0%, 54%, 49%, 29%)
Oklch
oklch(56.9% 0.126 16.2)

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

#446664

Mineral Blue · DimGray · Mint Ice

HEX
#446664
RGB
rgb(68, 102, 100)
HSL
hsl(176, 20%, 33%)
HSB
hsb(176, 33%, 40%)
CMYK
cmyk(33%, 0%, 2%, 60%)
Oklch
oklch(48.4% 0.039 191.3)

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

#656D6F

Ink Gray · DimGray · Warm Gray

HEX
#656D6F
RGB
rgb(101, 109, 111)
HSL
hsl(192, 5%, 42%)
HSB
hsb(192, 9%, 44%)
CMYK
cmyk(9%, 2%, 0%, 56%)
Oklch
oklch(52.9% 0.010 214.4)

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

#BB796D

Crimson · DarkSalmon · Passion Red

HEX
#BB796D
RGB
rgb(187, 121, 109)
HSL
hsl(9, 36%, 58%)
HSB
hsb(9, 42%, 73%)
CMYK
cmyk(0%, 35%, 42%, 27%)
Oklch
oklch(64.2% 0.085 30.8)

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

#D6A378

Apricot · DarkSalmon · Warm Sun

HEX
#D6A378
RGB
rgb(214, 163, 120)
HSL
hsl(27, 53%, 65%)
HSB
hsb(27, 44%, 84%)
CMYK
cmyk(0%, 24%, 44%, 16%)
Oklch
oklch(75.3% 0.084 61.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B5545D
54B6AC

Analogous

B6548E
B5545D
B67B54

Triadic

B5545D
5DB654
545DB6

Split-Comp.

B5545D
54B67B
548EB6

Tetradic

B5545D
8EB654
54B6AC
7B54B6

Contrast Matrix WCAG 2.1 Contrast

B5545D
446664
656D6F
BB796D
D6A378
—
1.3
Fail
1.1
Fail
1.4
Fail
2.1
Fail
1.3
Fail
—
1.2
Fail
1.8
Fail
2.8
Fail
1.1
Fail
1.2
Fail
—
1.5
Fail
2.4
Fail
1.4
Fail
1.8
Fail
1.5
Fail
—
1.5
Fail
2.1
Fail
2.8
Fail
2.4
Fail
1.5
Fail
—
White BG
4.8AA
6.3AA
5.3AA
3.5AA Large
2.2Fail
Black BG
4.4AA Large
3.3AA Large
4.0AA Large
6.1AA
9.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8A5B
535364
68696F
9E9E70
C0BF82

Deuteranopia

91985A
514E65
68676E
A2A771
C3C785

Tritanopia

B05959
466565
656E6E
B87273
D38B8C

Achromatopsia

727272
5C5C5C
6B6B6B
8B8B8B
ADADAD

Shades & Tints Shades & Tints

#B5545D

Dark
Light

#446664

Dark
Light

#656D6F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b5545d;
  --color-2: #446664;
  --color-3: #656d6f;
  --color-4: #bb796d;
  --color-5: #d6a378;
}

SCSS

$color-1: #b5545d;
$color-2: #446664;
$color-3: #656d6f;
$color-4: #bb796d;
$color-5: #d6a378;

TAILWIND

colors: {
  'brand-1': '#b5545d',
  'brand-2': '#446664',
  'brand-3': '#656d6f',
  'brand-4': '#bb796d',
  'brand-5': '#d6a378',
}

RGB Array

[181, 84, 93], [68, 102, 100], [101, 109, 111], [187, 121, 109], [214, 163, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B5545D, #446664, #656D6F, #BB796D, #D6A378 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: #b5545d; --color-2: #446664; --color-3: #656d6f; --color-4: #bb796d; --color-5: #d6a378. 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 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