← Back to Editor

#985252 · #BA7D54 · #CD8F52 · #CD9E4B · #CBB23F

A 5-color palette 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

#985252

Crimson · Sienna · Passion Red

HEX
#985252
RGB
rgb(152, 82, 82)
HSL
hsl(0, 30%, 46%)
HSB
hsb(0, 46%, 60%)
CMYK
cmyk(0%, 46%, 46%, 40%)
Oklch
oklch(52.2% 0.093 20.8)

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

#BA7D54

Tangerine · Chocolate · Warm Sun

HEX
#BA7D54
RGB
rgb(186, 125, 84)
HSL
hsl(24, 43%, 53%)
HSB
hsb(24, 55%, 73%)
CMYK
cmyk(0%, 33%, 55%, 27%)
Oklch
oklch(64.3% 0.095 54.1)

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

#CD8F52

Ginger · SandyBrown · Warm Sun

HEX
#CD8F52
RGB
rgb(205, 143, 82)
HSL
hsl(30, 55%, 56%)
HSB
hsb(30, 60%, 80%)
CMYK
cmyk(0%, 30%, 60%, 20%)
Oklch
oklch(69.9% 0.108 64.0)

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

#CD9E4B

Ginger · SandyBrown · Warm Sun

HEX
#CD9E4B
RGB
rgb(205, 158, 75)
HSL
hsl(38, 57%, 55%)
HSB
hsb(38, 63%, 80%)
CMYK
cmyk(0%, 23%, 63%, 20%)
Oklch
oklch(72.7% 0.115 79.4)

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

#CBB23F

Ginger · GoldenRod · Sunflower

HEX
#CBB23F
RGB
rgb(203, 178, 63)
HSL
hsl(49, 57%, 52%)
HSB
hsb(49, 69%, 80%)
CMYK
cmyk(0%, 12%, 69%, 20%)
Oklch
oklch(76.5% 0.134 96.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

985252
529898

Analogous

985275
985252
987552

Triadic

985252
529852
525298

Split-Comp.

985252
529875
527598

Tetradic

985252
759852
529898
755298

Contrast Matrix WCAG 2.1 Contrast

985252
BA7D54
CD8F52
CD9E4B
CBB23F
—
1.7
Fail
2.1
Fail
2.3
Fail
2.7
Fail
1.7
Fail
—
1.2
Fail
1.4
Fail
1.6
Fail
2.1
Fail
1.2
Fail
—
1.1
Fail
1.3
Fail
2.3
Fail
1.4
Fail
1.1
Fail
—
1.2
Fail
2.7
Fail
1.6
Fail
1.3
Fail
1.2
Fail
—
White BG
5.7AA
3.4AA Large
2.7Fail
2.4Fail
2.1Fail
Black BG
3.7AA Large
6.1AA
7.6AAA
8.6AAA
10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7A7952
A09F5E
B2B261
B9B85F
C0C05B

Deuteranopia

7E8352
A3A860
B6BA64
BBBF64
C2C462

Tritanopia

955252
B76667
CA6C6F
CB6F72
CA7176

Achromatopsia

676767
8B8B8B
9B9B9B
A3A3A3
ACACAC

Shades & Tints Shades & Tints

#985252

Dark
Light

#BA7D54

Dark
Light

#CD8F52

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #985252;
  --color-2: #ba7d54;
  --color-3: #cd8f52;
  --color-4: #cd9e4b;
  --color-5: #cbb23f;
}

SCSS

$color-1: #985252;
$color-2: #ba7d54;
$color-3: #cd8f52;
$color-4: #cd9e4b;
$color-5: #cbb23f;

TAILWIND

colors: {
  'brand-1': '#985252',
  'brand-2': '#ba7d54',
  'brand-3': '#cd8f52',
  'brand-4': '#cd9e4b',
  'brand-5': '#cbb23f',
}

RGB Array

[152, 82, 82], [186, 125, 84], [205, 143, 82], [205, 158, 75], [203, 178, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #985252, #BA7D54, #CD8F52, #CD9E4B, #CBB23F 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: #985252; --color-2: #ba7d54; --color-3: #cd8f52; --color-4: #cd9e4b; --color-5: #cbb23f. 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. 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