← Back to Editor

#B7C8D0 · #B7AEA7 · #B3845A · #918352 · #777276

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

#B7C8D0

Sky Blue · LightSteelBlue · Glacier Blue

HEX
#B7C8D0
RGB
rgb(183, 200, 208)
HSL
hsl(199, 21%, 77%)
HSB
hsb(199, 12%, 82%)
CMYK
cmyk(12%, 4%, 0%, 18%)
Oklch
oklch(82.2% 0.022 227.6)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#B7AEA7

Apricot · DarkGray · Warm Sun

HEX
#B7AEA7
RGB
rgb(183, 174, 167)
HSL
hsl(26, 10%, 69%)
HSB
hsb(26, 9%, 72%)
CMYK
cmyk(0%, 5%, 9%, 28%)
Oklch
oklch(75.6% 0.014 60.5)

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

#B3845A

Tangerine · Gray · Warm Sun

HEX
#B3845A
RGB
rgb(179, 132, 90)
HSL
hsl(28, 37%, 53%)
HSB
hsb(28, 50%, 70%)
CMYK
cmyk(0%, 26%, 50%, 30%)
Oklch
oklch(65.0% 0.081 62.4)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#918352

Ochre · Gray · Honey Gold

HEX
#918352
RGB
rgb(145, 131, 82)
HSL
hsl(47, 28%, 45%)
HSB
hsb(47, 43%, 57%)
CMYK
cmyk(0%, 10%, 43%, 43%)
Oklch
oklch(61.1% 0.069 94.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#777276

Ink Gray · Gray · Warm Gray

HEX
#777276
RGB
rgb(119, 114, 118)
HSL
hsl(312, 2%, 46%)
HSB
hsb(312, 4%, 47%)
CMYK
cmyk(0%, 4%, 1%, 53%)
Oklch
oklch(55.8% 0.009 332.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7C8D0
D1C0B8

Analogous

B8D1CC
B7C8D0
B8BDD1

Triadic

B7C8D0
D1B8C9
C9D1B8

Split-Comp.

B7C8D0
D1B8BD
D1CCB8

Tetradic

B7C8D0
CCB8D1
D1C0B8
BDD1B8

Contrast Matrix WCAG 2.1 Contrast

B7C8D0
B7AEA7
B3845A
918352
777276
—
1.3
Fail
1.9
Fail
2.2
Fail
2.7
Fail
1.3
Fail
—
1.5
Fail
1.7
Fail
2.2
Fail
1.9
Fail
1.5
Fail
—
1.1
Fail
1.4
Fail
2.2
Fail
1.7
Fail
1.1
Fail
—
1.3
Fail
2.7
Fail
2.2
Fail
1.4
Fail
1.3
Fail
—
White BG
1.7Fail
2.2Fail
3.3AA Large
3.8AA Large
4.7AA
Black BG
12.2AAA
9.6AAA
6.4AA
5.6AA
4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBFCE
B3B3A9
9F9E64
8B8B5E
757575

Deuteranopia

BDBCCE
B4B4A9
A1A567
8C8D61
757675

Tritanopia

B8CDCC
B7AAAA
B16C6E
906769
777474

Achromatopsia

C4C4C4
B0B0B0
8D8D8D
828282
747474

Shades & Tints Shades & Tints

#B7C8D0

Dark
Light

#B7AEA7

Dark
Light

#B3845A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7c8d0;
  --color-2: #b7aea7;
  --color-3: #b3845a;
  --color-4: #918352;
  --color-5: #777276;
}

SCSS

$color-1: #b7c8d0;
$color-2: #b7aea7;
$color-3: #b3845a;
$color-4: #918352;
$color-5: #777276;

TAILWIND

colors: {
  'brand-1': '#b7c8d0',
  'brand-2': '#b7aea7',
  'brand-3': '#b3845a',
  'brand-4': '#918352',
  'brand-5': '#777276',
}

RGB Array

[183, 200, 208], [183, 174, 167], [179, 132, 90], [145, 131, 82], [119, 114, 118]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B7C8D0, #B7AEA7, #B3845A, #918352, #777276 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: #b7c8d0; --color-2: #b7aea7; --color-3: #b3845a; --color-4: #918352; --color-5: #777276. 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