← Back to Editor

#BA4A5D · #C76D7B · #C9986D · #D9B8A0 · #BBA381

warm

A 5-color warm palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#BA4A5D

Crimson · Sienna · Passion Red

HEX
#BA4A5D
RGB
rgb(186, 74, 93)
HSL
hsl(350, 45%, 51%)
HSB
hsb(350, 60%, 73%)
CMYK
cmyk(0%, 60%, 50%, 27%)
Oklch
oklch(56.3% 0.145 12.7)

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

#C76D7B

Crimson · LightCoral · Passion Red

HEX
#C76D7B
RGB
rgb(199, 109, 123)
HSL
hsl(351, 45%, 60%)
HSB
hsb(351, 45%, 78%)
CMYK
cmyk(0%, 45%, 38%, 22%)
Oklch
oklch(64.0% 0.114 10.9)

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

#C9986D

Apricot · DarkSalmon · Warm Sun

HEX
#C9986D
RGB
rgb(201, 152, 109)
HSL
hsl(28, 46%, 61%)
HSB
hsb(28, 46%, 79%)
CMYK
cmyk(0%, 24%, 46%, 21%)
Oklch
oklch(71.6% 0.083 62.2)

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

#D9B8A0

Apricot · Tan · Warm Sun

HEX
#D9B8A0
RGB
rgb(217, 184, 160)
HSL
hsl(25, 43%, 74%)
HSB
hsb(25, 26%, 85%)
CMYK
cmyk(0%, 15%, 26%, 15%)
Oklch
oklch(80.5% 0.050 58.0)

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

#BBA381

Ginger · Tan · Warm Sun

HEX
#BBA381
RGB
rgb(187, 163, 129)
HSL
hsl(35, 30%, 62%)
HSB
hsb(35, 31%, 73%)
CMYK
cmyk(0%, 13%, 31%, 27%)
Oklch
oklch(72.8% 0.055 76.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BA4A5D
4ABAA8

Analogous

BA4A95
BA4A5D
BA6F4A

Triadic

BA4A5D
5DBA4A
4A5DBA

Split-Comp.

BA4A5D
4ABA6F
4A95BA

Tetradic

BA4A5D
95BA4A
4ABAA8
6F4ABA

Contrast Matrix WCAG 2.1 Contrast

BA4A5D
C76D7B
C9986D
D9B8A0
BBA381
—
1.4
Fail
1.9
Fail
2.7
Fail
2.1
Fail
1.4
Fail
—
1.4
Fail
1.9
Fail
1.5
Fail
1.9
Fail
1.4
Fail
—
1.4
Fail
1.1
Fail
2.7
Fail
1.9
Fail
1.4
Fail
—
1.3
Fail
2.1
Fail
1.5
Fail
1.1
Fail
1.3
Fail
—
White BG
5.0AA
3.6AA Large
2.6Fail
1.9Fail
2.4Fail
Black BG
4.2AA Large
5.9AA
8.2AAA
11.3AAA
8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8858
A09F78
B4B377
CBCAA6
B1B089

Deuteranopia

909857
A5AC77
B7BA7A
CDCFA7
B2B48B

Tritanopia

B45554
C27574
C78081
D7AAAB
BA9091

Achromatopsia

6E6E6E
8A8A8A
A2A2A2
BFBFBF
A6A6A6

Shades & Tints Shades & Tints

#BA4A5D

Dark
Light

#C76D7B

Dark
Light

#C9986D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ba4a5d;
  --color-2: #c76d7b;
  --color-3: #c9986d;
  --color-4: #d9b8a0;
  --color-5: #bba381;
}

SCSS

$color-1: #ba4a5d;
$color-2: #c76d7b;
$color-3: #c9986d;
$color-4: #d9b8a0;
$color-5: #bba381;

TAILWIND

colors: {
  'brand-1': '#ba4a5d',
  'brand-2': '#c76d7b',
  'brand-3': '#c9986d',
  'brand-4': '#d9b8a0',
  'brand-5': '#bba381',
}

RGB Array

[186, 74, 93], [199, 109, 123], [201, 152, 109], [217, 184, 160], [187, 163, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #BA4A5D, #C76D7B, #C9986D, #D9B8A0, #BBA381 is ideal for: corporate websites, product showcases, portfolios. 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: #ba4a5d; --color-2: #c76d7b; --color-3: #c9986d; --color-4: #d9b8a0; --color-5: #bba381. 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 warm-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