← Back to Editor

#5D737A · #B16983 · #B97A89 · #AE8E8A · #A7A48E

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

#5D737A

Slate Blue · DimGray · Mint Ice

HEX
#5D737A
RGB
rgb(93, 115, 122)
HSL
hsl(194, 13%, 42%)
HSB
hsb(194, 24%, 48%)
CMYK
cmyk(24%, 6%, 0%, 52%)
Oklch
oklch(54.0% 0.028 219.1)

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

#B16983

Dark Violet · Gray · Rose Pink

HEX
#B16983
RGB
rgb(177, 105, 131)
HSL
hsl(338, 32%, 55%)
HSB
hsb(338, 41%, 69%)
CMYK
cmyk(0%, 41%, 26%, 31%)
Oklch
oklch(60.8% 0.097 357.3)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#B97A89

Crimson · LightCoral · Passion Red

HEX
#B97A89
RGB
rgb(185, 122, 137)
HSL
hsl(346, 31%, 60%)
HSB
hsb(346, 34%, 73%)
CMYK
cmyk(0%, 34%, 26%, 27%)
Oklch
oklch(64.9% 0.081 4.0)

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

#AE8E8A

Peach Pink · DarkGray · Coral Red

HEX
#AE8E8A
RGB
rgb(174, 142, 138)
HSL
hsl(7, 18%, 61%)
HSB
hsb(7, 21%, 68%)
CMYK
cmyk(0%, 18%, 21%, 32%)
Oklch
oklch(67.5% 0.039 26.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#A7A48E

Fresh Green · DarkGray · Sunflower

HEX
#A7A48E
RGB
rgb(167, 164, 142)
HSL
hsl(53, 12%, 61%)
HSB
hsb(53, 15%, 65%)
CMYK
cmyk(0%, 2%, 15%, 35%)
Oklch
oklch(71.5% 0.031 100.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5D737A
79645D

Analogous

5D7972
5D737A
5D6579

Triadic

5D737A
795D73
73795D

Split-Comp.

5D737A
795D65
79725D

Tetradic

5D737A
725D79
79645D
65795D

Contrast Matrix WCAG 2.1 Contrast

5D737A
B16983
B97A89
AE8E8A
A7A48E
—
1.2
Fail
1.5
Fail
1.7
Fail
2.0
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
1.6
Fail
1.5
Fail
1.2
Fail
—
1.1
Fail
1.3
Fail
1.7
Fail
1.3
Fail
1.1
Fail
—
1.2
Fail
2.0
Fail
1.6
Fail
1.3
Fail
1.2
Fail
—
White BG
5.0AA
4.0AA Large
3.4AA Large
3.0Fail
2.5Fail
Black BG
4.2AA Large
5.2AA
6.2AA
7.0AAA
8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

676778
92917D
9E9D85
A0A08B
A6A693

Deuteranopia

656478
969B7B
A1A685
A2A48B
A6A695

Tritanopia

5E7777
AD7877
B68382
AC8C8C
A79898

Achromatopsia

6D6D6D
818181
8F8F8F
979797
A2A2A2

Shades & Tints Shades & Tints

#5D737A

Dark
Light

#B16983

Dark
Light

#B97A89

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5d737a;
  --color-2: #b16983;
  --color-3: #b97a89;
  --color-4: #ae8e8a;
  --color-5: #a7a48e;
}

SCSS

$color-1: #5d737a;
$color-2: #b16983;
$color-3: #b97a89;
$color-4: #ae8e8a;
$color-5: #a7a48e;

TAILWIND

colors: {
  'brand-1': '#5d737a',
  'brand-2': '#b16983',
  'brand-3': '#b97a89',
  'brand-4': '#ae8e8a',
  'brand-5': '#a7a48e',
}

RGB Array

[93, 115, 122], [177, 105, 131], [185, 122, 137], [174, 142, 138], [167, 164, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5D737A, #B16983, #B97A89, #AE8E8A, #A7A48E is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #5d737a; --color-2: #b16983; --color-3: #b97a89; --color-4: #ae8e8a; --color-5: #a7a48e. 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. 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