← Back to Editor

#DBDFB5 · #D8B38E · #D58667 · #D15A40 · #CE2D19

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

#DBDFB5

Fresh Green · Wheat · Lemon Cream

HEX
#DBDFB5
RGB
rgb(219, 223, 181)
HSL
hsl(66, 40%, 79%)
HSB
hsb(66, 19%, 87%)
CMYK
cmyk(2%, 0%, 19%, 13%)
Oklch
oklch(89.0% 0.056 111.9)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#D8B38E

Ginger · Tan · Warm Sun

HEX
#D8B38E
RGB
rgb(216, 179, 142)
HSL
hsl(30, 49%, 70%)
HSB
hsb(30, 34%, 85%)
CMYK
cmyk(0%, 17%, 34%, 15%)
Oklch
oklch(79.0% 0.066 66.6)

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

#D58667

Apricot · DarkSalmon · Warm Sun

HEX
#D58667
RGB
rgb(213, 134, 103)
HSL
hsl(17, 57%, 62%)
HSB
hsb(17, 52%, 84%)
CMYK
cmyk(0%, 37%, 52%, 16%)
Oklch
oklch(69.5% 0.107 42.1)

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

#D15A40

Vermilion · Chocolate · Passion Red

HEX
#D15A40
RGB
rgb(209, 90, 64)
HSL
hsl(11, 61%, 54%)
HSB
hsb(11, 69%, 82%)
CMYK
cmyk(0%, 57%, 69%, 18%)
Oklch
oklch(61.4% 0.157 33.9)

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

#CE2D19

Vermilion · FireBrick · Passion Red

HEX
#CE2D19
RGB
rgb(206, 45, 25)
HSL
hsl(7, 78%, 45%)
HSB
hsb(7, 88%, 81%)
CMYK
cmyk(0%, 78%, 88%, 19%)
Oklch
oklch(55.6% 0.199 30.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DBDFB5
B8B4DF

Analogous

DFCEB4
DBDFB5
C5DFB4

Triadic

DBDFB5
B4DBDF
DFB4DB

Split-Comp.

DBDFB5
B4C5DF
CEB4DF

Tetradic

DBDFB5
B4DFCE
B8B4DF
DFB4C5

Contrast Matrix WCAG 2.1 Contrast

DBDFB5
D8B38E
D58667
D15A40
CE2D19
—
1.4
Fail
2.0
Fail
2.9
Fail
3.8
AA Large
1.4
Fail
—
1.4
Fail
2.1
Fail
2.7
Fail
2.0
Fail
1.4
Fail
—
1.4
Fail
1.9
Fail
2.9
Fail
2.1
Fail
1.4
Fail
—
1.3
Fail
3.8
AA Large
2.7
Fail
1.9
Fail
1.3
Fail
—
White BG
1.4Fail
2.0Fail
2.8Fail
4.0AA Large
5.2AA
Black BG
15.2AAA
10.8AAA
7.4AAA
5.2AA
4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDDBF
C8C897
B3B26F
9D9C46
88871E

Deuteranopia

DDDCC2
CACD99
B7BD70
A4AD48
929E1F

Tritanopia

DBC7C9
D69EA0
D17476
CB4B4C
C62223

Achromatopsia

D9D9D9
BABABA
9A9A9A
7B7B7B
5B5B5B

Shades & Tints Shades & Tints

#DBDFB5

Dark
Light

#D8B38E

Dark
Light

#D58667

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dbdfb5;
  --color-2: #d8b38e;
  --color-3: #d58667;
  --color-4: #d15a40;
  --color-5: #ce2d19;
}

SCSS

$color-1: #dbdfb5;
$color-2: #d8b38e;
$color-3: #d58667;
$color-4: #d15a40;
$color-5: #ce2d19;

TAILWIND

colors: {
  'brand-1': '#dbdfb5',
  'brand-2': '#d8b38e',
  'brand-3': '#d58667',
  'brand-4': '#d15a40',
  'brand-5': '#ce2d19',
}

RGB Array

[219, 223, 181], [216, 179, 142], [213, 134, 103], [209, 90, 64], [206, 45, 25]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #DBDFB5, #D8B38E, #D58667, #D15A40, #CE2D19 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: #dbdfb5; --color-2: #d8b38e; --color-3: #d58667; --color-4: #d15a40; --color-5: #ce2d19. 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