← Back to Editor

#70818B · #A1A896 · #AFAA97 · #B3A292 · #BC9D9B

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

#70818B

Slate Blue · SlateGray · Navy Blue

HEX
#70818B
RGB
rgb(112, 129, 139)
HSL
hsl(202, 11%, 49%)
HSB
hsb(202, 19%, 55%)
CMYK
cmyk(19%, 7%, 0%, 45%)
Oklch
oklch(59.3% 0.025 233.7)

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

#A1A896

Willow Green · DarkGray · Silver Sand

HEX
#A1A896
RGB
rgb(161, 168, 150)
HSL
hsl(83, 9%, 62%)
HSB
hsb(83, 11%, 66%)
CMYK
cmyk(4%, 0%, 11%, 34%)
Oklch
oklch(72.1% 0.027 124.4)

Traditional「Willow Green」· Paint「Silver Sand」· Creative Urban Concrete

#AFAA97

Ginger · DarkGray · Sunflower

HEX
#AFAA97
RGB
rgb(175, 170, 151)
HSL
hsl(47, 13%, 64%)
HSB
hsb(47, 14%, 69%)
CMYK
cmyk(0%, 3%, 14%, 31%)
Oklch
oklch(73.7% 0.027 94.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#B3A292

Apricot · DarkGray · Warm Sun

HEX
#B3A292
RGB
rgb(179, 162, 146)
HSL
hsl(29, 18%, 64%)
HSB
hsb(29, 18%, 70%)
CMYK
cmyk(0%, 9%, 18%, 30%)
Oklch
oklch(72.2% 0.030 65.6)

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

#BC9D9B

Peach Pink · DarkGray · Coral Red

HEX
#BC9D9B
RGB
rgb(188, 157, 155)
HSL
hsl(4, 20%, 67%)
HSB
hsb(4, 18%, 74%)
CMYK
cmyk(0%, 16%, 18%, 26%)
Oklch
oklch(72.3% 0.037 22.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

70818B
8B796F

Analogous

6F8B87
70818B
6F738B

Triadic

70818B
8B6F81
818B6F

Split-Comp.

70818B
8B6F73
8B876F

Tetradic

70818B
876F8B
8B796F
738B6F

Contrast Matrix WCAG 2.1 Contrast

70818B
A1A896
AFAA97
B3A292
BC9D9B
—
1.6
Fail
1.7
Fail
1.6
Fail
1.6
Fail
1.6
Fail
—
1.1
Fail
1.0
Fail
1.0
Fail
1.7
Fail
1.1
Fail
—
1.1
Fail
1.1
Fail
1.6
Fail
1.0
Fail
1.1
Fail
—
1.0
Fail
1.6
Fail
1.0
Fail
1.1
Fail
1.0
Fail
—
White BG
4.0AA Large
2.5Fail
2.3Fail
2.5Fail
2.5Fail
Black BG
5.2AA
8.6AAA
9.0AAA
8.5AAA
8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

777889
A4A49A
ADAD9C
ACAB96
AFAE9B

Deuteranopia

767588
A4A39B
ADAE9D
ADAE97
B0B39C

Tritanopia

718786
A19E9F
AF9FA0
B2999A
BA9C9C

Achromatopsia

7D7D7D
A4A4A4
A9A9A9
A5A5A5
A6A6A6

Shades & Tints Shades & Tints

#70818B

Dark
Light

#A1A896

Dark
Light

#AFAA97

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #70818b;
  --color-2: #a1a896;
  --color-3: #afaa97;
  --color-4: #b3a292;
  --color-5: #bc9d9b;
}

SCSS

$color-1: #70818b;
$color-2: #a1a896;
$color-3: #afaa97;
$color-4: #b3a292;
$color-5: #bc9d9b;

TAILWIND

colors: {
  'brand-1': '#70818b',
  'brand-2': '#a1a896',
  'brand-3': '#afaa97',
  'brand-4': '#b3a292',
  'brand-5': '#bc9d9b',
}

RGB Array

[112, 129, 139], [161, 168, 150], [175, 170, 151], [179, 162, 146], [188, 157, 155]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #70818B, #A1A896, #AFAA97, #B3A292, #BC9D9B 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: #70818b; --color-2: #a1a896; --color-3: #afaa97; --color-4: #b3a292; --color-5: #bc9d9b. 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