← Back to Editor

#FCD3B4 · #CFC962 · #9EB477 · #D47B48 · #583722

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

#FCD3B4

Apricot · Wheat · Peach Orange

HEX
#FCD3B4
RGB
rgb(252, 211, 180)
HSL
hsl(26, 92%, 85%)
HSB
hsb(26, 29%, 99%)
CMYK
cmyk(0%, 16%, 29%, 1%)
Oklch
oklch(89.4% 0.062 59.0)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#CFC962

Autumn Sage · BurlyWood · Sunflower

HEX
#CFC962
RGB
rgb(207, 201, 98)
HSL
hsl(57, 53%, 60%)
HSB
hsb(57, 53%, 81%)
CMYK
cmyk(0%, 3%, 53%, 19%)
Oklch
oklch(82.0% 0.126 105.8)

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

#9EB477

Grass Green · DarkSeaGreen · Olive Green

HEX
#9EB477
RGB
rgb(158, 180, 119)
HSL
hsl(82, 29%, 59%)
HSB
hsb(82, 34%, 71%)
CMYK
cmyk(12%, 0%, 34%, 29%)
Oklch
oklch(73.8% 0.087 124.6)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#D47B48

Tangerine · Coral · Warm Sun

HEX
#D47B48
RGB
rgb(212, 123, 72)
HSL
hsl(22, 62%, 56%)
HSB
hsb(22, 66%, 83%)
CMYK
cmyk(0%, 42%, 66%, 17%)
Oklch
oklch(67.0% 0.129 49.1)

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

#583722

Tangerine · DarkOliveGreen · Cinnamon

HEX
#583722
RGB
rgb(88, 55, 34)
HSL
hsl(23, 44%, 24%)
HSB
hsb(23, 61%, 35%)
CMYK
cmyk(0%, 37%, 61%, 65%)
Oklch
oklch(37.1% 0.058 52.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCD3B4
B6DDFC

Analogous

FCB6BA
FCD3B4
FCF7B6

Triadic

FCD3B4
B6FCD4
D4B6FC

Split-Comp.

FCD3B4
B6FCF7
B6BAFC

Tetradic

FCD3B4
BAFCB6
B6DDFC
F7B6FC

Contrast Matrix WCAG 2.1 Contrast

FCD3B4
CFC962
9EB477
D47B48
583722
—
1.2
Fail
1.6
Fail
2.2
Fail
7.6
AAA
1.2
Fail
—
1.3
Fail
1.8
Fail
6.1
AA
1.6
Fail
1.3
Fail
—
1.4
Fail
4.7
AA
2.2
Fail
1.8
Fail
1.4
Fail
—
3.4
AA Large
7.6
AAA
6.1
AA
4.7
AA
3.4
AA Large
—
White BG
1.4Fail
1.7Fail
2.3Fail
3.1AA Large
10.6AAA
Black BG
15.1AAA
12.2AAA
9.2AAA
6.7AA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEABC
CCCC7B
A8A886
ADAD54
4A4927

Deuteranopia

EDF0BD
CDCD81
A6A589
B3B957
4C4E28

Tritanopia

FAC1C3
CF8F93
9F9194
D05E60
562B2C

Achromatopsia

DCDCDC
BFBFBF
A6A6A6
909090
3E3E3E

Shades & Tints Shades & Tints

#FCD3B4

Dark
Light

#CFC962

Dark
Light

#9EB477

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fcd3b4;
  --color-2: #cfc962;
  --color-3: #9eb477;
  --color-4: #d47b48;
  --color-5: #583722;
}

SCSS

$color-1: #fcd3b4;
$color-2: #cfc962;
$color-3: #9eb477;
$color-4: #d47b48;
$color-5: #583722;

TAILWIND

colors: {
  'brand-1': '#fcd3b4',
  'brand-2': '#cfc962',
  'brand-3': '#9eb477',
  'brand-4': '#d47b48',
  'brand-5': '#583722',
}

RGB Array

[252, 211, 180], [207, 201, 98], [158, 180, 119], [212, 123, 72], [88, 55, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FCD3B4, #CFC962, #9EB477, #D47B48, #583722 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: #fcd3b4; --color-2: #cfc962; --color-3: #9eb477; --color-4: #d47b48; --color-5: #583722. 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