← Back to Editor

#CC6938 · #F6A41B · #F4DB6A · #FFFFF1 · #F5E7D8

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#CC6938

Tangerine · Chocolate · Warm Sun

HEX
#CC6938
RGB
rgb(204, 105, 56)
HSL
hsl(20, 59%, 51%)
HSB
hsb(20, 73%, 80%)
CMYK
cmyk(0%, 49%, 73%, 20%)
Oklch
oklch(62.8% 0.140 45.2)

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

#F6A41B

Ginger · GoldenRod · Warm Sun

HEX
#F6A41B
RGB
rgb(246, 164, 27)
HSL
hsl(38, 92%, 54%)
HSB
hsb(38, 89%, 96%)
CMYK
cmyk(0%, 33%, 89%, 4%)
Oklch
oklch(78.1% 0.162 72.1)

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

#F4DB6A

Ginger · Khaki · Sunflower

HEX
#F4DB6A
RGB
rgb(244, 219, 106)
HSL
hsl(49, 86%, 69%)
HSB
hsb(49, 57%, 96%)
CMYK
cmyk(0%, 10%, 57%, 4%)
Oklch
oklch(89.0% 0.135 97.0)

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

#FFFFF1

Fresh Green · Snow · Lemon Cream

HEX
#FFFFF1
RGB
rgb(255, 255, 241)
HSL
hsl(60, 100%, 97%)
HSB
hsb(60, 5%, 100%)
CMYK
cmyk(0%, 0%, 5%, 0%)
Oklch
oklch(99.6% 0.018 106.7)

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

#F5E7D8

Goose Yellow · Beige · Peach Orange

HEX
#F5E7D8
RGB
rgb(245, 231, 216)
HSL
hsl(31, 59%, 90%)
HSB
hsb(31, 12%, 96%)
CMYK
cmyk(0%, 6%, 12%, 4%)
Oklch
oklch(93.5% 0.025 69.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC6938
389BCC

Analogous

CC3851
CC6938
CCB338

Triadic

CC6938
38CC69
6938CC

Split-Comp.

CC6938
38CCB3
3851CC

Tetradic

CC6938
51CC38
389BCC
B338CC

Contrast Matrix WCAG 2.1 Contrast

CC6938
F6A41B
F4DB6A
FFFFF1
F5E7D8
—
1.8
Fail
2.7
Fail
3.7
AA Large
3.1
AA Large
1.8
Fail
—
1.5
Fail
2.0
Fail
1.7
Fail
2.7
Fail
1.5
Fail
—
1.4
Fail
1.1
Fail
3.7
AA Large
2.0
Fail
1.4
Fail
—
1.2
Fail
3.1
AA Large
1.7
Fail
1.1
Fail
1.2
Fail
—
White BG
3.7AA Large
2.0Fail
1.4Fail
1.0Fail
1.2Fail
Black BG
5.6AA
10.2AAA
15.2AAA
20.8AAA
17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A1A044
D2D23C
E9E985
FFFFF4
EFEFDC

Deuteranopia

A7AE47
D7DD44
EBED8C
FFFFF5
F0F1DD

Tritanopia

C74D4F
F2565C
F39BA0
FFF7F8
F4DEDF

Achromatopsia

818181
ADADAD
D6D6D6
FDFDFD
E9E9E9

Shades & Tints Shades & Tints

#CC6938

Dark
Light

#F6A41B

Dark
Light

#F4DB6A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc6938;
  --color-2: #f6a41b;
  --color-3: #f4db6a;
  --color-4: #fffff1;
  --color-5: #f5e7d8;
}

SCSS

$color-1: #cc6938;
$color-2: #f6a41b;
$color-3: #f4db6a;
$color-4: #fffff1;
$color-5: #f5e7d8;

TAILWIND

colors: {
  'brand-1': '#cc6938',
  'brand-2': '#f6a41b',
  'brand-3': '#f4db6a',
  'brand-4': '#fffff1',
  'brand-5': '#f5e7d8',
}

RGB Array

[204, 105, 56], [246, 164, 27], [244, 219, 106], [255, 255, 241], [245, 231, 216]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #CC6938, #F6A41B, #F4DB6A, #FFFFF1, #F5E7D8 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #cc6938; --color-2: #f6a41b; --color-3: #f4db6a; --color-4: #fffff1; --color-5: #f5e7d8. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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