← Back to Editor

#F6CB65 · #DA680F · #C81B17 · #941621 · #34153F

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

#F6CB65

Ginger · SandyBrown · Sunflower

HEX
#F6CB65
RGB
rgb(246, 203, 101)
HSL
hsl(42, 89%, 68%)
HSB
hsb(42, 59%, 96%)
CMYK
cmyk(0%, 17%, 59%, 4%)
Oklch
oklch(86.0% 0.130 86.6)

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

#DA680F

Tangerine · Chocolate · Amber Brown

HEX
#DA680F
RGB
rgb(218, 104, 15)
HSL
hsl(26, 87%, 46%)
HSB
hsb(26, 93%, 85%)
CMYK
cmyk(0%, 52%, 93%, 15%)
Oklch
oklch(64.4% 0.166 49.8)

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

#C81B17

Vermilion · FireBrick · Passion Red

HEX
#C81B17
RGB
rgb(200, 27, 23)
HSL
hsl(1, 79%, 44%)
HSB
hsb(1, 89%, 78%)
CMYK
cmyk(0%, 87%, 89%, 22%)
Oklch
oklch(53.3% 0.205 28.5)

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

#941621

Vermilion · Brown · Wine Red

HEX
#941621
RGB
rgb(148, 22, 33)
HSL
hsl(355, 74%, 33%)
HSB
hsb(355, 85%, 58%)
CMYK
cmyk(0%, 85%, 78%, 42%)
Oklch
oklch(43.1% 0.159 23.5)

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

#34153F

Dark Plum · MidnightBlue · Dark Purple

HEX
#34153F
RGB
rgb(52, 21, 63)
HSL
hsl(284, 50%, 16%)
HSB
hsb(284, 67%, 25%)
CMYK
cmyk(17%, 67%, 0%, 75%)
Oklch
oklch(26.3% 0.082 316.3)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F6CB65
6590F6

Analogous

F68265
F6CB65
D9F665

Triadic

F6CB65
65F6CA
CA65F6

Split-Comp.

F6CB65
65D9F6
8265F6

Tetradic

F6CB65
65F682
6590F6
F665D9

Contrast Matrix WCAG 2.1 Contrast

F6CB65
DA680F
C81B17
941621
34153F
—
2.3
Fail
3.8
AA Large
5.7
AA
10.3
AAA
2.3
Fail
—
1.6
Fail
2.5
Fail
4.5
AA
3.8
AA Large
1.6
Fail
—
1.5
Fail
2.7
Fail
5.7
AA
2.5
Fail
1.5
Fail
—
1.8
Fail
10.3
AAA
4.5
AA
2.7
Fail
1.8
Fail
—
White BG
1.5Fail
3.5AA Large
5.8AA
8.8AAA
15.8AAA
Black BG
13.6AAA
6.0AA
3.6AA Large
2.4Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E37E
A9A825
7D7C18
5D5C1E
272635

Deuteranopia

E6E984
AFB82A
879418
656E1E
282B32

Tritanopia

F49195
D43639
BF1919
8E1C1C
322D2B

Achromatopsia

CCCCCC
808080
4E4E4E
3D3D3D
232323

Shades & Tints Shades & Tints

#F6CB65

Dark
Light

#DA680F

Dark
Light

#C81B17

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f6cb65;
  --color-2: #da680f;
  --color-3: #c81b17;
  --color-4: #941621;
  --color-5: #34153f;
}

SCSS

$color-1: #f6cb65;
$color-2: #da680f;
$color-3: #c81b17;
$color-4: #941621;
$color-5: #34153f;

TAILWIND

colors: {
  'brand-1': '#f6cb65',
  'brand-2': '#da680f',
  'brand-3': '#c81b17',
  'brand-4': '#941621',
  'brand-5': '#34153f',
}

RGB Array

[246, 203, 101], [218, 104, 15], [200, 27, 23], [148, 22, 33], [52, 21, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F6CB65, #DA680F, #C81B17, #941621, #34153F is ideal for: social media posters, mobile apps, e-commerce promos, 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: #f6cb65; --color-2: #da680f; --color-3: #c81b17; --color-4: #941621; --color-5: #34153f. 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 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