← Back to Editor

#D1BD58 · #E0992D · #A66A2E · #CF4829 · #A5D1CD

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 Library

Color Details Color Details

#D1BD58

Autumn Sage · SandyBrown · Sunflower

HEX
#D1BD58
RGB
rgb(209, 189, 88)
HSL
hsl(50, 57%, 58%)
HSB
hsb(50, 58%, 82%)
CMYK
cmyk(0%, 10%, 58%, 18%)
Oklch
oklch(79.5% 0.123 98.2)

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

#E0992D

Ginger · GoldenRod · Warm Sun

HEX
#E0992D
RGB
rgb(224, 153, 45)
HSL
hsl(36, 74%, 53%)
HSB
hsb(36, 80%, 88%)
CMYK
cmyk(0%, 32%, 80%, 12%)
Oklch
oklch(73.6% 0.143 72.3)

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

#A66A2E

Ochre · Sienna · Amber Brown

HEX
#A66A2E
RGB
rgb(166, 106, 46)
HSL
hsl(30, 57%, 42%)
HSB
hsb(30, 72%, 65%)
CMYK
cmyk(0%, 36%, 72%, 35%)
Oklch
oklch(57.8% 0.107 62.6)

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

#CF4829

Vermilion · Chocolate · Passion Red

HEX
#CF4829
RGB
rgb(207, 72, 41)
HSL
hsl(11, 67%, 49%)
HSB
hsb(11, 80%, 81%)
CMYK
cmyk(0%, 65%, 80%, 19%)
Oklch
oklch(58.5% 0.176 34.3)

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

#A5D1CD

Jade · LightSteelBlue · Lake Green

HEX
#A5D1CD
RGB
rgb(165, 209, 205)
HSL
hsl(175, 32%, 73%)
HSB
hsb(175, 21%, 82%)
CMYK
cmyk(21%, 0%, 2%, 18%)
Oklch
oklch(82.8% 0.046 189.4)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1BD58
576BD1

Analogous

D18057
D1BD58
A8D157

Triadic

D1BD58
57D1BD
BD57D1

Split-Comp.

D1BD58
57A8D1
8057D1

Tetradic

D1BD58
57D180
576BD1
D157A8

Contrast Matrix WCAG 2.1 Contrast

D1BD58
E0992D
A66A2E
CF4829
A5D1CD
—
1.3
Fail
2.4
Fail
2.4
Fail
1.1
Fail
1.3
Fail
—
1.9
Fail
1.9
Fail
1.4
Fail
2.4
Fail
1.9
Fail
—
1.0
Fail
2.7
Fail
2.4
Fail
1.9
Fail
1.0
Fail
—
2.7
Fail
1.1
Fail
1.4
Fail
2.7
Fail
2.7
Fail
—
White BG
1.9Fail
2.4Fail
4.4AA Large
4.6AA
1.7Fail
Black BG
11.1AAA
8.8AAA
4.7AA
4.6AA
12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C8C870
C1C147
8C8B3D
959331
B8B8CE

Deuteranopia

CACB76
C5CB4D
909440
9CA632
B6B2CE

Tritanopia

D08488
DC5C60
A3484B
C83638
A7CFCF

Achromatopsia

B7B7B7
A2A2A2
757575
6D6D6D
C3C3C3

Shades & Tints Shades & Tints

#D1BD58

Dark
Light

#E0992D

Dark
Light

#A66A2E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1bd58;
  --color-2: #e0992d;
  --color-3: #a66a2e;
  --color-4: #cf4829;
  --color-5: #a5d1cd;
}

SCSS

$color-1: #d1bd58;
$color-2: #e0992d;
$color-3: #a66a2e;
$color-4: #cf4829;
$color-5: #a5d1cd;

TAILWIND

colors: {
  'brand-1': '#d1bd58',
  'brand-2': '#e0992d',
  'brand-3': '#a66a2e',
  'brand-4': '#cf4829',
  'brand-5': '#a5d1cd',
}

RGB Array

[209, 189, 88], [224, 153, 45], [166, 106, 46], [207, 72, 41], [165, 209, 205]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #D1BD58, #E0992D, #A66A2E, #CF4829, #A5D1CD 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: #d1bd58; --color-2: #e0992d; --color-3: #a66a2e; --color-4: #cf4829; --color-5: #a5d1cd. 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