← Back to Editor

#24211E · #FFB973 · #F7E5BA · #F7F4D7 · #FFFDED

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

#24211E

Ochre · Black · Dark Stone

HEX
#24211E
RGB
rgb(36, 33, 30)
HSL
hsl(30, 9%, 13%)
HSB
hsb(30, 17%, 14%)
CMYK
cmyk(0%, 8%, 17%, 86%)
Oklch
oklch(25.0% 0.007 67.5)

Traditional「Ochre」· Paint「Dark Stone」· Creative Midnight Shadow

#FFB973

Goose Yellow · LightSalmon · Warm Sun

HEX
#FFB973
RGB
rgb(255, 185, 115)
HSL
hsl(30, 100%, 73%)
HSB
hsb(30, 55%, 100%)
CMYK
cmyk(0%, 27%, 55%, 0%)
Oklch
oklch(83.7% 0.119 65.0)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#F7E5BA

Goose Yellow · Wheat · Lemon Cream

HEX
#F7E5BA
RGB
rgb(247, 229, 186)
HSL
hsl(42, 79%, 85%)
HSB
hsb(42, 25%, 97%)
CMYK
cmyk(0%, 7%, 25%, 3%)
Oklch
oklch(92.6% 0.059 88.0)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#F7F4D7

Fresh Green · Beige · Lemon Cream

HEX
#F7F4D7
RGB
rgb(247, 244, 215)
HSL
hsl(54, 67%, 91%)
HSB
hsb(54, 13%, 97%)
CMYK
cmyk(0%, 1%, 13%, 3%)
Oklch
oklch(96.2% 0.038 102.2)

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

#FFFDED

Fresh Green · SeaShell · Lemon Cream

HEX
#FFFDED
RGB
rgb(255, 253, 237)
HSL
hsl(53, 100%, 96%)
HSB
hsb(53, 7%, 100%)
CMYK
cmyk(0%, 1%, 7%, 0%)
Oklch
oklch(99.1% 0.021 101.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

24211E
1E2124

Analogous

241E1E
24211E
24241E

Triadic

24211E
1E2421
211E24

Split-Comp.

24211E
1E2424
1E1E24

Tetradic

24211E
1E241E
1E2124
241E24

Contrast Matrix WCAG 2.1 Contrast

24211E
FFB973
F7E5BA
F7F4D7
FFFDED
—
9.5
AAA
12.9
AAA
14.4
AAA
15.7
AAA
9.5
AAA
—
1.4
Fail
1.5
Fail
1.7
Fail
12.9
AAA
1.4
Fail
—
1.1
Fail
1.2
Fail
14.4
AAA
1.5
Fail
1.1
Fail
—
1.1
Fail
15.7
AAA
1.7
Fail
1.2
Fail
1.1
Fail
—
White BG
16.0AAA
1.7Fail
1.2Fail
1.1Fail
1.0Fail
Black BG
1.3Fail
12.4AAA
16.9AAA
18.9AAA
20.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

23231F
E1E084
EFEFC4
F6F6DE
FEFEF1

Deuteranopia

23231F
E5EA88
F0F2C7
F6F6E0
FEFEF2

Tritanopia

241F1F
FC9194
F6CDCE
F7E4E5
FFF4F5

Achromatopsia

222222
C6C6C6
E5E5E5
F2F2F2
FCFCFC

Shades & Tints Shades & Tints

#24211E

Dark
Light

#FFB973

Dark
Light

#F7E5BA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #24211e;
  --color-2: #ffb973;
  --color-3: #f7e5ba;
  --color-4: #f7f4d7;
  --color-5: #fffded;
}

SCSS

$color-1: #24211e;
$color-2: #ffb973;
$color-3: #f7e5ba;
$color-4: #f7f4d7;
$color-5: #fffded;

TAILWIND

colors: {
  'brand-1': '#24211e',
  'brand-2': '#ffb973',
  'brand-3': '#f7e5ba',
  'brand-4': '#f7f4d7',
  'brand-5': '#fffded',
}

RGB Array

[36, 33, 30], [255, 185, 115], [247, 229, 186], [247, 244, 215], [255, 253, 237]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #24211E, #FFB973, #F7E5BA, #F7F4D7, #FFFDED 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: #24211e; --color-2: #ffb973; --color-3: #f7e5ba; --color-4: #f7f4d7; --color-5: #fffded. 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 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