← Back to Editor

#B23135 · #68574D · #B3B59F · #D0D7DD · #9FA7CE

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 LibraryData Visualization

Color Details Color Details

#B23135

Crimson · Brown · Passion Red

HEX
#B23135
RGB
rgb(178, 49, 53)
HSL
hsl(358, 57%, 45%)
HSB
hsb(358, 72%, 70%)
CMYK
cmyk(0%, 72%, 70%, 30%)
Oklch
oklch(51.2% 0.165 23.7)

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

#68574D

Tangerine · DimGray · Amber Brown

HEX
#68574D
RGB
rgb(104, 87, 77)
HSL
hsl(22, 15%, 35%)
HSB
hsb(22, 26%, 41%)
CMYK
cmyk(0%, 16%, 26%, 59%)
Oklch
oklch(47.1% 0.027 52.3)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#B3B59F

Fresh Green · DarkGray · Sunflower

HEX
#B3B59F
RGB
rgb(179, 181, 159)
HSL
hsl(65, 13%, 67%)
HSB
hsb(65, 12%, 71%)
CMYK
cmyk(1%, 0%, 12%, 29%)
Oklch
oklch(76.5% 0.031 111.3)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#D0D7DD

Sky Blue · LightGray · Sky Blue

HEX
#D0D7DD
RGB
rgb(208, 215, 221)
HSL
hsl(208, 16%, 84%)
HSB
hsb(208, 6%, 87%)
CMYK
cmyk(6%, 3%, 0%, 13%)
Oklch
oklch(87.6% 0.011 243.7)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#9FA7CE

Azure · LightSteelBlue · Cobalt Blue

HEX
#9FA7CE
RGB
rgb(159, 167, 206)
HSL
hsl(230, 32%, 72%)
HSB
hsb(230, 23%, 81%)
CMYK
cmyk(23%, 19%, 0%, 19%)
Oklch
oklch(73.6% 0.057 275.8)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B23135
31B4B0

Analogous

B43177
B23135
B46E31

Triadic

B23135
36B431
3136B4

Split-Comp.

B23135
31B46E
3177B4

Tetradic

B23135
77B431
31B4B0
6E31B4

Contrast Matrix WCAG 2.1 Contrast

B23135
68574D
B3B59F
D0D7DD
9FA7CE
—
1.1
Fail
3.0
Fail
4.3
AA Large
2.6
Fail
1.1
Fail
—
3.3
AA Large
4.7
AA
2.9
Fail
3.0
Fail
3.3
AA Large
—
1.4
Fail
1.1
Fail
4.3
AA Large
4.7
AA
1.4
Fail
—
1.6
Fail
2.6
Fail
2.9
Fail
1.1
Fail
1.6
Fail
—
White BG
6.2AA
6.9AA
2.1Fail
1.5Fail
2.4Fail
Black BG
3.4AA Large
3.1AA Large
10.0AAA
14.4AAA
8.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7A7934
61604F
B4B4A4
D3D3DC
A2A3C5

Deuteranopia

828B34
626350
B4B4A6
D3D2DB
A2A1C2

Tritanopia

AC3333
675152
B3A9A9
D0DADA
9FBDBB

Achromatopsia

585858
5B5B5B
B2B2B2
D6D6D6
A9A9A9

Shades & Tints Shades & Tints

#B23135

Dark
Light

#68574D

Dark
Light

#B3B59F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b23135;
  --color-2: #68574d;
  --color-3: #b3b59f;
  --color-4: #d0d7dd;
  --color-5: #9fa7ce;
}

SCSS

$color-1: #b23135;
$color-2: #68574d;
$color-3: #b3b59f;
$color-4: #d0d7dd;
$color-5: #9fa7ce;

TAILWIND

colors: {
  'brand-1': '#b23135',
  'brand-2': '#68574d',
  'brand-3': '#b3b59f',
  'brand-4': '#d0d7dd',
  'brand-5': '#9fa7ce',
}

RGB Array

[178, 49, 53], [104, 87, 77], [179, 181, 159], [208, 215, 221], [159, 167, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B23135, #68574D, #B3B59F, #D0D7DD, #9FA7CE is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b23135; --color-2: #68574d; --color-3: #b3b59f; --color-4: #d0d7dd; --color-5: #9fa7ce. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. Restrained colors convey professionalism and trust. 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