← Back to Editor

#B5A07D · #BA8A75 · #C76973 · #957378 · #637C7D

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

#B5A07D

Ginger · Tan · Warm Sun

HEX
#B5A07D
RGB
rgb(181, 160, 125)
HSL
hsl(37, 27%, 60%)
HSB
hsb(37, 31%, 71%)
CMYK
cmyk(0%, 12%, 31%, 29%)
Oklch
oklch(71.5% 0.054 80.3)

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

#BA8A75

Tangerine · DarkSalmon · Warm Sun

HEX
#BA8A75
RGB
rgb(186, 138, 117)
HSL
hsl(18, 33%, 59%)
HSB
hsb(18, 37%, 73%)
CMYK
cmyk(0%, 26%, 37%, 27%)
Oklch
oklch(67.5% 0.066 44.7)

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

#C76973

Crimson · LightCoral · Passion Red

HEX
#C76973
RGB
rgb(199, 105, 115)
HSL
hsl(354, 46%, 60%)
HSB
hsb(354, 47%, 78%)
CMYK
cmyk(0%, 47%, 42%, 22%)
Oklch
oklch(63.2% 0.119 14.4)

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

#957378

Crimson · Gray · Passion Red

HEX
#957378
RGB
rgb(149, 115, 120)
HSL
hsl(351, 14%, 52%)
HSB
hsb(351, 23%, 58%)
CMYK
cmyk(0%, 23%, 19%, 42%)
Oklch
oklch(59.0% 0.043 8.6)

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

#637C7D

Slate Blue · SlateGray · Mint Ice

HEX
#637C7D
RGB
rgb(99, 124, 125)
HSL
hsl(182, 12%, 44%)
HSB
hsb(182, 21%, 49%)
CMYK
cmyk(21%, 1%, 0%, 51%)
Oklch
oklch(56.7% 0.029 199.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B5A07D
7D93B5

Analogous

B5847D
B5A07D
AEB57D

Triadic

B5A07D
7DB59F
9F7DB5

Split-Comp.

B5A07D
7DAEB5
847DB5

Tetradic

B5A07D
7DB584
7D93B5
B57DAE

Contrast Matrix WCAG 2.1 Contrast

B5A07D
BA8A75
C76973
957378
637C7D
—
1.2
Fail
1.5
Fail
1.7
Fail
1.8
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
1.5
Fail
1.5
Fail
1.2
Fail
—
1.1
Fail
1.2
Fail
1.7
Fail
1.4
Fail
1.1
Fail
—
1.1
Fail
1.8
Fail
1.5
Fail
1.2
Fail
1.1
Fail
—
White BG
2.5Fail
3.0AA Large
3.7AA Large
4.2AA Large
4.5AA Large
Black BG
8.3AAA
7.0AA
5.7AA
5.0AA
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACAC85
A5A57A
9E9D71
868677
6E6E7D

Deuteranopia

ADAF88
A8AC7B
A4AB70
888B77
6C6B7D

Tritanopia

B48C8E
B87E7F
C26F6E
937676
647D7D

Achromatopsia

A2A2A2
969696
868686
7E7E7E
757575

Shades & Tints Shades & Tints

#B5A07D

Dark
Light

#BA8A75

Dark
Light

#C76973

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b5a07d;
  --color-2: #ba8a75;
  --color-3: #c76973;
  --color-4: #957378;
  --color-5: #637c7d;
}

SCSS

$color-1: #b5a07d;
$color-2: #ba8a75;
$color-3: #c76973;
$color-4: #957378;
$color-5: #637c7d;

TAILWIND

colors: {
  'brand-1': '#b5a07d',
  'brand-2': '#ba8a75',
  'brand-3': '#c76973',
  'brand-4': '#957378',
  'brand-5': '#637c7d',
}

RGB Array

[181, 160, 125], [186, 138, 117], [199, 105, 115], [149, 115, 120], [99, 124, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B5A07D, #BA8A75, #C76973, #957378, #637C7D 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: #b5a07d; --color-2: #ba8a75; --color-3: #c76973; --color-4: #957378; --color-5: #637c7d. 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