← Back to Editor

#D8BF86 · #CF9F77 · #8F8F75 · #618579 · #36554F

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

#D8BF86

Ginger · BurlyWood · Sunflower

HEX
#D8BF86
RGB
rgb(216, 191, 134)
HSL
hsl(42, 51%, 69%)
HSB
hsb(42, 38%, 85%)
CMYK
cmyk(0%, 12%, 38%, 15%)
Oklch
oklch(81.3% 0.079 86.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#CF9F77

Apricot · DarkSalmon · Warm Sun

HEX
#CF9F77
RGB
rgb(207, 159, 119)
HSL
hsl(27, 48%, 64%)
HSB
hsb(27, 43%, 81%)
CMYK
cmyk(0%, 23%, 43%, 19%)
Oklch
oklch(73.8% 0.079 61.0)

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

#8F8F75

Autumn Sage · Gray · Sunflower

HEX
#8F8F75
RGB
rgb(143, 143, 117)
HSL
hsl(60, 10%, 51%)
HSB
hsb(60, 18%, 56%)
CMYK
cmyk(0%, 0%, 18%, 44%)
Oklch
oklch(64.3% 0.037 107.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#618579

Mineral Blue · SlateGray · Mint Ice

HEX
#618579
RGB
rgb(97, 133, 121)
HSL
hsl(160, 16%, 45%)
HSB
hsb(160, 27%, 52%)
CMYK
cmyk(27%, 0%, 9%, 48%)
Oklch
oklch(58.6% 0.045 172.1)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#36554F

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#36554F
RGB
rgb(54, 85, 79)
HSL
hsl(168, 22%, 27%)
HSB
hsb(168, 36%, 33%)
CMYK
cmyk(36%, 0%, 7%, 67%)
Oklch
oklch(42.3% 0.038 180.9)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8BF86
88A0D8

Analogous

D89888
D8BF86
C8D888

Triadic

D8BF86
88D8C0
C088D8

Split-Comp.

D8BF86
88C8D8
9888D8

Tetradic

D8BF86
88D898
88A0D8
D888C8

Contrast Matrix WCAG 2.1 Contrast

D8BF86
CF9F77
8F8F75
618579
36554F
—
1.3
Fail
1.8
Fail
2.3
Fail
4.6
AA
1.3
Fail
—
1.4
Fail
1.7
Fail
3.5
AA Large
1.8
Fail
1.4
Fail
—
1.2
Fail
2.5
Fail
2.3
Fail
1.7
Fail
1.2
Fail
—
2.0
Fail
4.6
AA
3.5
AA Large
2.5
Fail
2.0
Fail
—
White BG
1.8Fail
2.4Fail
3.3AA Large
4.1AA Large
8.2AAA
Black BG
11.7AAA
8.9AAA
6.4AA
5.1AA
2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCD94
BABA81
8F8F7B
71717C
434450

Deuteranopia

CFD197
BDC183
8F8F7D
6F6C7D
423F51

Tritanopia

D79FA1
CD888A
8F8081
637E7F
385252

Achromatopsia

C0C0C0
A9A9A9
8C8C8C
797979
4B4B4B

Shades & Tints Shades & Tints

#D8BF86

Dark
Light

#CF9F77

Dark
Light

#8F8F75

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8bf86;
  --color-2: #cf9f77;
  --color-3: #8f8f75;
  --color-4: #618579;
  --color-5: #36554f;
}

SCSS

$color-1: #d8bf86;
$color-2: #cf9f77;
$color-3: #8f8f75;
$color-4: #618579;
$color-5: #36554f;

TAILWIND

colors: {
  'brand-1': '#d8bf86',
  'brand-2': '#cf9f77',
  'brand-3': '#8f8f75',
  'brand-4': '#618579',
  'brand-5': '#36554f',
}

RGB Array

[216, 191, 134], [207, 159, 119], [143, 143, 117], [97, 133, 121], [54, 85, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #D8BF86, #CF9F77, #8F8F75, #618579, #36554F 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: #d8bf86; --color-2: #cf9f77; --color-3: #8f8f75; --color-4: #618579; --color-5: #36554f. 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