← Back to Editor

#DEB18A · #BB967C · #976952 · #322B25 · #24232B

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#DEB18A

Apricot · BurlyWood · Warm Sun

HEX
#DEB18A
RGB
rgb(222, 177, 138)
HSL
hsl(28, 56%, 71%)
HSB
hsb(28, 38%, 87%)
CMYK
cmyk(0%, 20%, 38%, 13%)
Oklch
oklch(79.2% 0.074 62.4)

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

#BB967C

Apricot · Tan · Warm Sun

HEX
#BB967C
RGB
rgb(187, 150, 124)
HSL
hsl(25, 32%, 61%)
HSB
hsb(25, 34%, 73%)
CMYK
cmyk(0%, 20%, 34%, 27%)
Oklch
oklch(70.1% 0.058 56.7)

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

#976952

Tangerine · Sienna · Amber Brown

HEX
#976952
RGB
rgb(151, 105, 82)
HSL
hsl(20, 30%, 46%)
HSB
hsb(20, 46%, 59%)
CMYK
cmyk(0%, 30%, 46%, 41%)
Oklch
oklch(56.3% 0.068 47.5)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#322B25

Tangerine · DarkSlateGray · Cinnamon

HEX
#322B25
RGB
rgb(50, 43, 37)
HSL
hsl(28, 15%, 17%)
HSB
hsb(28, 26%, 20%)
CMYK
cmyk(0%, 14%, 26%, 80%)
Oklch
oklch(29.5% 0.015 62.8)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#24232B

Deep Indigo · DarkSlateGray · Deep Sea Blue

HEX
#24232B
RGB
rgb(36, 35, 43)
HSL
hsl(248, 10%, 15%)
HSB
hsb(248, 19%, 17%)
CMYK
cmyk(16%, 19%, 0%, 83%)
Oklch
oklch(26.1% 0.015 291.1)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DEB18A
8CB8DE

Analogous

DE8C8E
DEB18A
DEDC8C

Triadic

DEB18A
8CDEB2
B28CDE

Split-Comp.

DEB18A
8CDEDC
8C8EDE

Tetradic

DEB18A
8EDE8C
8CB8DE
DC8CDE

Contrast Matrix WCAG 2.1 Contrast

DEB18A
BB967C
976952
322B25
24232B
—
1.4
Fail
2.4
Fail
7.1
AAA
8.0
AAA
1.4
Fail
—
1.7
Fail
5.2
AA
5.8
AA
2.4
Fail
1.7
Fail
—
3.0
Fail
3.3
AA Large
7.1
AAA
5.2
AA
3.0
Fail
—
1.1
Fail
8.0
AAA
5.8
AA
3.3
AA Large
1.1
Fail
—
White BG
2.0Fail
2.7Fail
4.7AA
13.9AAA
15.6AAA
Black BG
10.8AAA
7.8AAA
4.5AA Large
1.5Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCA93
ABAB82
838358
2F2F26
242429

Deuteranopia

CDD096
ADB084
868959
2F3027
242429

Tritanopia

DC9B9D
B98788
955C5D
322828
242827

Achromatopsia

BABABA
9E9E9E
747474
2C2C2C
242424

Shades & Tints Shades & Tints

#DEB18A

Dark
Light

#BB967C

Dark
Light

#976952

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #deb18a;
  --color-2: #bb967c;
  --color-3: #976952;
  --color-4: #322b25;
  --color-5: #24232b;
}

SCSS

$color-1: #deb18a;
$color-2: #bb967c;
$color-3: #976952;
$color-4: #322b25;
$color-5: #24232b;

TAILWIND

colors: {
  'brand-1': '#deb18a',
  'brand-2': '#bb967c',
  'brand-3': '#976952',
  'brand-4': '#322b25',
  'brand-5': '#24232b',
}

RGB Array

[222, 177, 138], [187, 150, 124], [151, 105, 82], [50, 43, 37], [36, 35, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #DEB18A, #BB967C, #976952, #322B25, #24232B is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #deb18a; --color-2: #bb967c; --color-3: #976952; --color-4: #322b25; --color-5: #24232b. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. 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