← Back to Editor

#D3A651 · #E0C57E · #B1CBC0 · #98B3A7 · #2D6780

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

#D3A651

Ginger · SandyBrown · Warm Sun

HEX
#D3A651
RGB
rgb(211, 166, 81)
HSL
hsl(39, 60%, 57%)
HSB
hsb(39, 62%, 83%)
CMYK
cmyk(0%, 21%, 62%, 17%)
Oklch
oklch(75.0% 0.116 81.3)

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

#E0C57E

Ginger · BurlyWood · Sunflower

HEX
#E0C57E
RGB
rgb(224, 197, 126)
HSL
hsl(43, 61%, 69%)
HSB
hsb(43, 44%, 88%)
CMYK
cmyk(0%, 12%, 44%, 12%)
Oklch
oklch(83.1% 0.095 89.4)

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

#B1CBC0

Jade · Silver · Apple Green

HEX
#B1CBC0
RGB
rgb(177, 203, 192)
HSL
hsl(155, 20%, 75%)
HSB
hsb(155, 13%, 80%)
CMYK
cmyk(13%, 0%, 5%, 20%)
Oklch
oklch(82.0% 0.032 168.2)

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

#98B3A7

Jade · DarkGray · Apple Green

HEX
#98B3A7
RGB
rgb(152, 179, 167)
HSL
hsl(153, 15%, 65%)
HSB
hsb(153, 15%, 70%)
CMYK
cmyk(15%, 0%, 7%, 30%)
Oklch
oklch(74.3% 0.034 166.8)

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

#2D6780

Slate Blue · DarkSlateBlue · Mint Ice

HEX
#2D6780
RGB
rgb(45, 103, 128)
HSL
hsl(198, 48%, 34%)
HSB
hsb(198, 65%, 50%)
CMYK
cmyk(65%, 20%, 0%, 50%)
Oklch
oklch(48.6% 0.072 229.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3A651
507ED3

Analogous

D36350
D3A651
BFD350

Triadic

D3A651
50D3A5
A550D3

Split-Comp.

D3A651
50BFD3
6350D3

Tetradic

D3A651
50D363
507ED3
D350BF

Contrast Matrix WCAG 2.1 Contrast

D3A651
E0C57E
B1CBC0
98B3A7
2D6780
—
1.3
Fail
1.3
Fail
1.0
Fail
2.8
Fail
1.3
Fail
—
1.0
Fail
1.3
Fail
3.7
AA Large
1.3
Fail
1.0
Fail
—
1.3
Fail
3.6
AA Large
1.0
Fail
1.3
Fail
1.3
Fail
—
2.8
Fail
2.8
Fail
3.7
AA Large
3.6
AA Large
2.8
Fail
—
White BG
2.2Fail
1.7Fail
1.7Fail
2.2Fail
6.2AA
Black BG
9.3AAA
12.5AAA
12.2AAA
9.3AAA
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0BF66
D4D48F
BCBCC3
A4A4AA
46477A

Deuteranopia

C2C66B
D6D893
BBB9C3
A2A0AB
433E79

Tritanopia

D17679
DF9DA0
B2C5C5
99ACAD
307574

Achromatopsia

AAAAAA
C5C5C5
C2C2C2
AAAAAA
595959

Shades & Tints Shades & Tints

#D3A651

Dark
Light

#E0C57E

Dark
Light

#B1CBC0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3a651;
  --color-2: #e0c57e;
  --color-3: #b1cbc0;
  --color-4: #98b3a7;
  --color-5: #2d6780;
}

SCSS

$color-1: #d3a651;
$color-2: #e0c57e;
$color-3: #b1cbc0;
$color-4: #98b3a7;
$color-5: #2d6780;

TAILWIND

colors: {
  'brand-1': '#d3a651',
  'brand-2': '#e0c57e',
  'brand-3': '#b1cbc0',
  'brand-4': '#98b3a7',
  'brand-5': '#2d6780',
}

RGB Array

[211, 166, 81], [224, 197, 126], [177, 203, 192], [152, 179, 167], [45, 103, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #D3A651, #E0C57E, #B1CBC0, #98B3A7, #2D6780 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #d3a651; --color-2: #e0c57e; --color-3: #b1cbc0; --color-4: #98b3a7; --color-5: #2d6780. 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. 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