← Back to Editor

#300C1C · #FCA923 · #FCC12B · #FEF4AA · #FCF9DC

A 5-color palette 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

#300C1C

Dark Violet · Black · Raspberry

HEX
#300C1C
RGB
rgb(48, 12, 28)
HSL
hsl(333, 60%, 12%)
HSB
hsb(333, 75%, 19%)
CMYK
cmyk(0%, 75%, 42%, 81%)
Oklch
oklch(22.2% 0.062 355.8)

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

#FCA923

Ginger · GoldenRod · Warm Sun

HEX
#FCA923
RGB
rgb(252, 169, 35)
HSL
hsl(37, 97%, 56%)
HSB
hsb(37, 86%, 99%)
CMYK
cmyk(0%, 33%, 86%, 1%)
Oklch
oklch(79.7% 0.163 72.1)

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

#FCC12B

Ginger · GoldenRod · Sunflower

HEX
#FCC12B
RGB
rgb(252, 193, 43)
HSL
hsl(43, 97%, 58%)
HSB
hsb(43, 83%, 99%)
CMYK
cmyk(0%, 23%, 83%, 1%)
Oklch
oklch(84.2% 0.163 84.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#FEF4AA

Fresh Green · Wheat · Lemon Cream

HEX
#FEF4AA
RGB
rgb(254, 244, 170)
HSL
hsl(53, 98%, 83%)
HSB
hsb(53, 33%, 100%)
CMYK
cmyk(0%, 4%, 33%, 0%)
Oklch
oklch(95.8% 0.094 101.4)

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

#FCF9DC

Fresh Green · LightYellow · Lemon Cream

HEX
#FCF9DC
RGB
rgb(252, 249, 220)
HSL
hsl(54, 84%, 93%)
HSB
hsb(54, 13%, 99%)
CMYK
cmyk(0%, 1%, 13%, 1%)
Oklch
oklch(97.7% 0.038 102.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

300C1C
0C3120

Analogous

310C2F
300C1C
310E0C

Triadic

300C1C
1D310C
0C1D31

Split-Comp.

300C1C
0C310E
0C2F31

Tetradic

300C1C
2F310C
0C3120
0E0C31

Contrast Matrix WCAG 2.1 Contrast

300C1C
FCA923
FCC12B
FEF4AA
FCF9DC
—
9.1
AAA
10.7
AAA
15.7
AAA
16.5
AAA
9.1
AAA
—
1.2
Fail
1.7
Fail
1.8
Fail
10.7
AAA
1.2
Fail
—
1.5
Fail
1.5
Fail
15.7
AAA
1.7
Fail
1.5
Fail
—
1.1
Fail
16.5
AAA
1.8
Fail
1.5
Fail
1.1
Fail
—
White BG
17.6AAA
1.9Fail
1.6Fail
1.1Fail
1.1Fail
Black BG
1.2Fail
10.8AAA
12.8AAA
18.7AAA
19.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

202018
D8D743
E2E24F
FAFABC
FBFBE3

Deuteranopia

232517
DDE34B
E6EA58
FAFBC0
FBFBE5

Tritanopia

2E1514
F85D63
F96C72
FDCACD
FCE9EA

Achromatopsia

191919
B3B3B3
C2C2C2
EFEFEF
F7F7F7

Shades & Tints Shades & Tints

#300C1C

Dark
Light

#FCA923

Dark
Light

#FCC12B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #300c1c;
  --color-2: #fca923;
  --color-3: #fcc12b;
  --color-4: #fef4aa;
  --color-5: #fcf9dc;
}

SCSS

$color-1: #300c1c;
$color-2: #fca923;
$color-3: #fcc12b;
$color-4: #fef4aa;
$color-5: #fcf9dc;

TAILWIND

colors: {
  'brand-1': '#300c1c',
  'brand-2': '#fca923',
  'brand-3': '#fcc12b',
  'brand-4': '#fef4aa',
  'brand-5': '#fcf9dc',
}

RGB Array

[48, 12, 28], [252, 169, 35], [252, 193, 43], [254, 244, 170], [252, 249, 220]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #300C1C, #FCA923, #FCC12B, #FEF4AA, #FCF9DC 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: #300c1c; --color-2: #fca923; --color-3: #fcc12b; --color-4: #fef4aa; --color-5: #fcf9dc. 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 general-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