← Back to Editor

#FFCC6B · #D45436 · #763E51 · #6B2E32 · #B86B58

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

#FFCC6B

Goose Yellow · SandyBrown · Warm Sun

HEX
#FFCC6B
RGB
rgb(255, 204, 107)
HSL
hsl(39, 100%, 71%)
HSB
hsb(39, 58%, 100%)
CMYK
cmyk(0%, 20%, 58%, 0%)
Oklch
oklch(87.1% 0.128 81.8)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#D45436

Vermilion · Chocolate · Passion Red

HEX
#D45436
RGB
rgb(212, 84, 54)
HSL
hsl(11, 65%, 52%)
HSB
hsb(11, 75%, 83%)
CMYK
cmyk(0%, 60%, 75%, 17%)
Oklch
oklch(60.9% 0.168 34.5)

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

#763E51

Dark Violet · DimGray · Camellia

HEX
#763E51
RGB
rgb(118, 62, 81)
HSL
hsl(340, 31%, 35%)
HSB
hsb(340, 47%, 46%)
CMYK
cmyk(0%, 47%, 31%, 54%)
Oklch
oklch(43.9% 0.081 359.3)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#6B2E32

Crimson · Brown · Wine Red

HEX
#6B2E32
RGB
rgb(107, 46, 50)
HSL
hsl(356, 40%, 30%)
HSB
hsb(356, 57%, 42%)
CMYK
cmyk(0%, 57%, 53%, 58%)
Oklch
oklch(38.7% 0.087 18.1)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#B86B58

Crimson · Sienna · Passion Red

HEX
#B86B58
RGB
rgb(184, 107, 88)
HSL
hsl(12, 40%, 53%)
HSB
hsb(12, 52%, 72%)
CMYK
cmyk(0%, 42%, 52%, 28%)
Oklch
oklch(60.9% 0.103 34.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFCC6B
6B9FFF

Analogous

FF816B
FFCC6B
E9FF6B

Triadic

FFCC6B
6BFFCB
CB6BFF

Split-Comp.

FFCC6B
6BE9FF
816BFF

Tetradic

FFCC6B
6BFF81
6B9FFF
FF6BE9

Contrast Matrix WCAG 2.1 Contrast

FFCC6B
D45436
763E51
6B2E32
B86B58
—
2.8
Fail
5.5
AA
6.8
AA
2.7
Fail
2.8
Fail
—
2.0
Fail
2.5
Fail
1.0
Fail
5.5
AA
2.0
Fail
—
1.3
Fail
2.0
Fail
6.8
AA
2.5
Fail
1.3
Fail
—
2.6
Fail
2.7
Fail
1.0
Fail
2.0
Fail
2.6
Fail
—
White BG
1.5Fail
4.1AA Large
8.1AAA
10.2AAA
4.0AA Large
Black BG
14.1AAA
5.1AA
2.6Fail
2.1Fail
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E882
9D9B3D
5E5D4C
515031
97965D

Deuteranopia

ECF088
A4AE3F
61654B
545931
9BA15E

Tritanopia

FC9599
CE4344
734948
683030
B46061

Achromatopsia

D0D0D0
777777
515151
414141
808080

Shades & Tints Shades & Tints

#FFCC6B

Dark
Light

#D45436

Dark
Light

#763E51

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffcc6b;
  --color-2: #d45436;
  --color-3: #763e51;
  --color-4: #6b2e32;
  --color-5: #b86b58;
}

SCSS

$color-1: #ffcc6b;
$color-2: #d45436;
$color-3: #763e51;
$color-4: #6b2e32;
$color-5: #b86b58;

TAILWIND

colors: {
  'brand-1': '#ffcc6b',
  'brand-2': '#d45436',
  'brand-3': '#763e51',
  'brand-4': '#6b2e32',
  'brand-5': '#b86b58',
}

RGB Array

[255, 204, 107], [212, 84, 54], [118, 62, 81], [107, 46, 50], [184, 107, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FFCC6B, #D45436, #763E51, #6B2E32, #B86B58 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: #ffcc6b; --color-2: #d45436; --color-3: #763e51; --color-4: #6b2e32; --color-5: #b86b58. 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