← Back to Editor

#58668D · #B2B7DD · #F1E7DB · #BEA392 · #816852

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

#58668D

Indigo · SlateGray · Navy Blue

HEX
#58668D
RGB
rgb(88, 102, 141)
HSL
hsl(224, 23%, 45%)
HSB
hsb(224, 38%, 55%)
CMYK
cmyk(38%, 28%, 0%, 45%)
Oklch
oklch(51.5% 0.064 268.9)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#B2B7DD

Azure · LightSteelBlue · Cobalt Blue

HEX
#B2B7DD
RGB
rgb(178, 183, 221)
HSL
hsl(233, 39%, 78%)
HSB
hsb(233, 19%, 87%)
CMYK
cmyk(19%, 17%, 0%, 13%)
Oklch
oklch(78.8% 0.054 279.2)

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

#F1E7DB

Goose Yellow · Beige · Peach Orange

HEX
#F1E7DB
RGB
rgb(241, 231, 219)
HSL
hsl(33, 44%, 90%)
HSB
hsb(33, 9%, 95%)
CMYK
cmyk(0%, 4%, 9%, 5%)
Oklch
oklch(93.3% 0.019 72.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#BEA392

Apricot · Tan · Warm Sun

HEX
#BEA392
RGB
rgb(190, 163, 146)
HSL
hsl(23, 25%, 66%)
HSB
hsb(23, 23%, 75%)
CMYK
cmyk(0%, 14%, 23%, 25%)
Oklch
oklch(73.5% 0.040 54.1)

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

#816852

Tangerine · DimGray · Amber Brown

HEX
#816852
RGB
rgb(129, 104, 82)
HSL
hsl(28, 22%, 41%)
HSB
hsb(28, 36%, 51%)
CMYK
cmyk(0%, 19%, 36%, 49%)
Oklch
oklch(53.6% 0.046 63.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

58668D
8D7F58

Analogous

58818D
58668D
65588D

Triadic

58668D
8D5866
668D58

Split-Comp.

58668D
8D6558
818D58

Tetradic

58668D
8D5881
8D7F58
588D65

Contrast Matrix WCAG 2.1 Contrast

58668D
B2B7DD
F1E7DB
BEA392
816852
—
2.9
Fail
4.6
AA
2.4
Fail
1.1
Fail
2.9
Fail
—
1.6
Fail
1.2
Fail
2.7
Fail
4.6
AA
1.6
Fail
—
1.9
Fail
4.3
AA Large
2.4
Fail
1.2
Fail
1.9
Fail
—
2.2
Fail
1.1
Fail
2.7
Fail
4.3
AA Large
2.2
Fail
—
White BG
5.7AA
2.0Fail
1.2Fail
2.4Fail
5.2AA
Black BG
3.7AA Large
10.7AAA
17.2AAA
8.8AAA
4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5E84
B4B4D4
EDEDDE
B2B296
767657

Deuteranopia

5D5C81
B4B4D2
EDEEDF
B4B697
787A59

Tritanopia

597C7A
B2CDCB
F1E0E1
BD999A
805C5C

Achromatopsia

666666
BABABA
E9E9E9
A9A9A9
6D6D6D

Shades & Tints Shades & Tints

#58668D

Dark
Light

#B2B7DD

Dark
Light

#F1E7DB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #58668d;
  --color-2: #b2b7dd;
  --color-3: #f1e7db;
  --color-4: #bea392;
  --color-5: #816852;
}

SCSS

$color-1: #58668d;
$color-2: #b2b7dd;
$color-3: #f1e7db;
$color-4: #bea392;
$color-5: #816852;

TAILWIND

colors: {
  'brand-1': '#58668d',
  'brand-2': '#b2b7dd',
  'brand-3': '#f1e7db',
  'brand-4': '#bea392',
  'brand-5': '#816852',
}

RGB Array

[88, 102, 141], [178, 183, 221], [241, 231, 219], [190, 163, 146], [129, 104, 82]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #58668D, #B2B7DD, #F1E7DB, #BEA392, #816852 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #58668d; --color-2: #b2b7dd; --color-3: #f1e7db; --color-4: #bea392; --color-5: #816852. 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. 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