← Back to Editor

#FFF7CA · #48573A · #620011 · #C9963A · #040507

warm

A 5-color warm palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#FFF7CA

Fresh Green · Bisque · Lemon Cream

HEX
#FFF7CA
RGB
rgb(255, 247, 202)
HSL
hsl(51, 100%, 90%)
HSB
hsb(51, 21%, 100%)
CMYK
cmyk(0%, 3%, 21%, 0%)
Oklch
oklch(97.1% 0.059 99.0)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#48573A

Celadon · DarkOliveGreen · Forest Green

HEX
#48573A
RGB
rgb(72, 87, 58)
HSL
hsl(91, 20%, 28%)
HSB
hsb(91, 33%, 34%)
CMYK
cmyk(17%, 0%, 33%, 66%)
Oklch
oklch(43.5% 0.049 130.5)

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

#620011

Vermilion · Maroon · Deep Berry

HEX
#620011
RGB
rgb(98, 0, 17)
HSL
hsl(350, 100%, 19%)
HSB
hsb(350, 100%, 38%)
CMYK
cmyk(0%, 100%, 83%, 62%)
Oklch
oklch(31.3% 0.126 21.6)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#C9963A

Ginger · GoldenRod · Warm Sun

HEX
#C9963A
RGB
rgb(201, 150, 58)
HSL
hsl(39, 57%, 51%)
HSB
hsb(39, 71%, 79%)
CMYK
cmyk(0%, 25%, 71%, 21%)
Oklch
oklch(70.5% 0.123 78.8)

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

#040507

Indigo · Black · Deep Sea Blue

HEX
#040507
RGB
rgb(4, 5, 7)
HSL
hsl(220, 27%, 2%)
HSB
hsb(220, 43%, 3%)
CMYK
cmyk(43%, 29%, 0%, 97%)
Oklch
oklch(11.4% 0.007 261.0)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF7CA
CCD4FF

Analogous

FFDECC
FFF7CA
EDFFCC

Triadic

FFF7CA
CCFFF7
F7CCFF

Split-Comp.

FFF7CA
CCEDFF
DECCFF

Tetradic

FFF7CA
CCFFDE
CCD4FF
FFCCED

Contrast Matrix WCAG 2.1 Contrast

FFF7CA
48573A
620011
C9963A
040507
—
7.2
AAA
12.7
AAA
2.5
Fail
18.8
AAA
7.2
AAA
—
1.8
Fail
2.9
Fail
2.6
Fail
12.7
AAA
1.8
Fail
—
5.2
AA
1.5
Fail
2.5
Fail
2.9
Fail
5.2
AA
—
7.7
AAA
18.8
AAA
2.6
Fail
1.5
Fail
7.7
AAA
—
White BG
1.1Fail
7.8AAA
13.7AAA
2.7Fail
20.4AAA
Black BG
19.4AAA
2.7Fail
1.5Fail
7.9AAA
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

FCFBD5
4E4F41
38370D
B3B250
040407

Deuteranopia

FCFDD7
4E4D43
3D450C
B6BA56
040406

Tritanopia

FFDDDF
494748
5D0A09
C66266
040606

Achromatopsia

F4F4F4
4F4F4F
1F1F1F
9B9B9B
050505

Shades & Tints Shades & Tints

#FFF7CA

Dark
Light

#48573A

Dark
Light

#620011

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff7ca;
  --color-2: #48573a;
  --color-3: #620011;
  --color-4: #c9963a;
  --color-5: #040507;
}

SCSS

$color-1: #fff7ca;
$color-2: #48573a;
$color-3: #620011;
$color-4: #c9963a;
$color-5: #040507;

TAILWIND

colors: {
  'brand-1': '#fff7ca',
  'brand-2': '#48573a',
  'brand-3': '#620011',
  'brand-4': '#c9963a',
  'brand-5': '#040507',
}

RGB Array

[255, 247, 202], [72, 87, 58], [98, 0, 17], [201, 150, 58], [4, 5, 7]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FFF7CA, #48573A, #620011, #C9963A, #040507 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #fff7ca; --color-2: #48573a; --color-3: #620011; --color-4: #c9963a; --color-5: #040507. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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