← Back to Editor

#DB5852 · #D87852 · #F3B456 · #B0B598 · #9D8A52

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

#DB5852

Vermilion · Tomato · Passion Red

HEX
#DB5852
RGB
rgb(219, 88, 82)
HSL
hsl(3, 66%, 59%)
HSB
hsb(3, 63%, 86%)
CMYK
cmyk(0%, 60%, 63%, 14%)
Oklch
oklch(62.9% 0.166 25.6)

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

#D87852

Tangerine · Coral · Warm Sun

HEX
#D87852
RGB
rgb(216, 120, 82)
HSL
hsl(17, 63%, 58%)
HSB
hsb(17, 62%, 85%)
CMYK
cmyk(0%, 44%, 62%, 15%)
Oklch
oklch(67.2% 0.131 41.9)

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

#F3B456

Ginger · SandyBrown · Warm Sun

HEX
#F3B456
RGB
rgb(243, 180, 86)
HSL
hsl(36, 87%, 65%)
HSB
hsb(36, 65%, 95%)
CMYK
cmyk(0%, 26%, 65%, 5%)
Oklch
oklch(81.1% 0.132 74.8)

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

#B0B598

Willow Green · DarkGray · Apple Green

HEX
#B0B598
RGB
rgb(176, 181, 152)
HSL
hsl(70, 16%, 65%)
HSB
hsb(70, 16%, 71%)
CMYK
cmyk(3%, 0%, 16%, 29%)
Oklch
oklch(76.1% 0.040 115.3)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#9D8A52

Ochre · Gray · Honey Gold

HEX
#9D8A52
RGB
rgb(157, 138, 82)
HSL
hsl(45, 31%, 47%)
HSB
hsb(45, 48%, 62%)
CMYK
cmyk(0%, 12%, 48%, 38%)
Oklch
oklch(63.8% 0.078 91.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DB5852
51D5DB

Analogous

DB5190
DB5852
DB9D51

Triadic

DB5852
51DB58
5851DB

Split-Comp.

DB5852
51DB9D
5190DB

Tetradic

DB5852
90DB51
51D5DB
9D51DB

Contrast Matrix WCAG 2.1 Contrast

DB5852
D87852
F3B456
B0B598
9D8A52
—
1.2
Fail
2.1
Fail
1.8
Fail
1.1
Fail
1.2
Fail
—
1.7
Fail
1.5
Fail
1.1
Fail
2.1
Fail
1.7
Fail
—
1.2
Fail
1.9
Fail
1.8
Fail
1.5
Fail
1.2
Fail
—
1.6
Fail
1.1
Fail
1.1
Fail
1.9
Fail
1.6
Fail
—
White BG
3.8AA Large
3.1AA Large
1.8Fail
2.1Fail
3.4AA Large
Black BG
5.5AA
6.7AA
11.5AAA
9.9AAA
6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A153
AEAE5B
D8D76D
B2B29F
959560

Deuteranopia

AAB454
B4BB5D
DBE072
B2B2A1
969763

Tritanopia

D45555
D36264
F07F83
B0A5A6
9C6A6D

Achromatopsia

7E7E7E
909090
BCBCBC
B0B0B0
898989

Shades & Tints Shades & Tints

#DB5852

Dark
Light

#D87852

Dark
Light

#F3B456

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #db5852;
  --color-2: #d87852;
  --color-3: #f3b456;
  --color-4: #b0b598;
  --color-5: #9d8a52;
}

SCSS

$color-1: #db5852;
$color-2: #d87852;
$color-3: #f3b456;
$color-4: #b0b598;
$color-5: #9d8a52;

TAILWIND

colors: {
  'brand-1': '#db5852',
  'brand-2': '#d87852',
  'brand-3': '#f3b456',
  'brand-4': '#b0b598',
  'brand-5': '#9d8a52',
}

RGB Array

[219, 88, 82], [216, 120, 82], [243, 180, 86], [176, 181, 152], [157, 138, 82]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DB5852, #D87852, #F3B456, #B0B598, #9D8A52 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: #db5852; --color-2: #d87852; --color-3: #f3b456; --color-4: #b0b598; --color-5: #9d8a52. 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