← Back to Editor

#D1B671 · #B34F27 · #18130D · #4B5B4E · #C8773F

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 LibraryData Visualization

Color Details Color Details

#D1B671

Ginger · BurlyWood · Sunflower

HEX
#D1B671
RGB
rgb(209, 182, 113)
HSL
hsl(43, 51%, 63%)
HSB
hsb(43, 46%, 82%)
CMYK
cmyk(0%, 13%, 46%, 18%)
Oklch
oklch(78.4% 0.093 88.8)

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

#B34F27

Tangerine · Sienna · Amber Brown

HEX
#B34F27
RGB
rgb(179, 79, 39)
HSL
hsl(17, 64%, 43%)
HSB
hsb(17, 78%, 70%)
CMYK
cmyk(0%, 56%, 78%, 30%)
Oklch
oklch(55.0% 0.141 40.9)

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

#18130D

Ochre · Black · Cinnamon

HEX
#18130D
RGB
rgb(24, 19, 13)
HSL
hsl(33, 30%, 7%)
HSB
hsb(33, 46%, 9%)
CMYK
cmyk(0%, 21%, 46%, 91%)
Oklch
oklch(19.1% 0.014 71.9)

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

#4B5B4E

Celadon · DarkSlateGray · Forest Green

HEX
#4B5B4E
RGB
rgb(75, 91, 78)
HSL
hsl(131, 10%, 33%)
HSB
hsb(131, 18%, 36%)
CMYK
cmyk(18%, 0%, 14%, 64%)
Oklch
oklch(45.3% 0.029 150.6)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#C8773F

Tangerine · Chocolate · Warm Sun

HEX
#C8773F
RGB
rgb(200, 119, 63)
HSL
hsl(25, 55%, 52%)
HSB
hsb(25, 69%, 78%)
CMYK
cmyk(0%, 41%, 69%, 22%)
Oklch
oklch(64.7% 0.124 53.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1B671
718CD1

Analogous

D18571
D1B671
BCD171

Triadic

D1B671
71D1B6
B671D1

Split-Comp.

D1B671
71BCD1
8571D1

Tetradic

D1B671
71D185
718CD1
D171BC

Contrast Matrix WCAG 2.1 Contrast

D1B671
B34F27
18130D
4B5B4E
C8773F
—
2.6
Fail
9.4
AAA
3.7
AA Large
1.7
Fail
2.6
Fail
—
3.6
AA Large
1.4
Fail
1.5
Fail
9.4
AAA
3.6
AA Large
—
2.6
Fail
5.4
AA
3.7
AA Large
1.4
Fail
2.6
Fail
—
2.1
Fail
1.7
Fail
1.5
Fail
5.4
AA
2.1
Fail
—
White BG
2.0Fail
5.2AA
18.5AAA
7.2AAA
3.4AA Large
Black BG
10.6AAA
4.1AA Large
1.1Fail
2.9Fail
6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C582
888731
16160E
525251
A5A44D

Deuteranopia

C7C986
8E9533
16160F
515052
AAB050

Tritanopia

D08F92
AE383A
181010
4C5454
C4575A

Achromatopsia

B6B6B6
686868
141414
555555
898989

Shades & Tints Shades & Tints

#D1B671

Dark
Light

#B34F27

Dark
Light

#18130D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1b671;
  --color-2: #b34f27;
  --color-3: #18130d;
  --color-4: #4b5b4e;
  --color-5: #c8773f;
}

SCSS

$color-1: #d1b671;
$color-2: #b34f27;
$color-3: #18130d;
$color-4: #4b5b4e;
$color-5: #c8773f;

TAILWIND

colors: {
  'brand-1': '#d1b671',
  'brand-2': '#b34f27',
  'brand-3': '#18130d',
  'brand-4': '#4b5b4e',
  'brand-5': '#c8773f',
}

RGB Array

[209, 182, 113], [179, 79, 39], [24, 19, 13], [75, 91, 78], [200, 119, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #D1B671, #B34F27, #18130D, #4B5B4E, #C8773F is ideal for: tech websites, dark mode UIs, game UIs, 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: #d1b671; --color-2: #b34f27; --color-3: #18130d; --color-4: #4b5b4e; --color-5: #c8773f. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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