← Back to Editor

#F5F7BE · #EB863E · #D44827 · #BC090F · #48422C

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

#F5F7BE

Fresh Green · Bisque · Lemon Cream

HEX
#F5F7BE
RGB
rgb(245, 247, 190)
HSL
hsl(62, 78%, 86%)
HSB
hsb(62, 23%, 97%)
CMYK
cmyk(1%, 0%, 23%, 3%)
Oklch
oklch(96.1% 0.073 109.4)

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

#EB863E

Tangerine · Coral · Warm Sun

HEX
#EB863E
RGB
rgb(235, 134, 62)
HSL
hsl(25, 81%, 58%)
HSB
hsb(25, 74%, 92%)
CMYK
cmyk(0%, 43%, 74%, 8%)
Oklch
oklch(71.7% 0.150 53.0)

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

#D44827

Vermilion · Chocolate · Passion Red

HEX
#D44827
RGB
rgb(212, 72, 39)
HSL
hsl(11, 69%, 49%)
HSB
hsb(11, 82%, 83%)
CMYK
cmyk(0%, 66%, 82%, 17%)
Oklch
oklch(59.3% 0.182 34.4)

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

#BC090F

Vermilion · FireBrick · Wine Red

HEX
#BC090F
RGB
rgb(188, 9, 15)
HSL
hsl(358, 91%, 39%)
HSB
hsb(358, 95%, 74%)
CMYK
cmyk(0%, 95%, 92%, 26%)
Oklch
oklch(50.2% 0.202 28.1)

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

#48422C

Ochre · DarkOliveGreen · Amber Gold

HEX
#48422C
RGB
rgb(72, 66, 44)
HSL
hsl(47, 24%, 23%)
HSB
hsb(47, 39%, 28%)
CMYK
cmyk(0%, 8%, 39%, 72%)
Oklch
oklch(37.9% 0.036 94.7)

Traditional「Ochre」· Paint「Amber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5F7BE
C1BFF7

Analogous

F7DDBF
F5F7BE
D9F7BF

Triadic

F5F7BE
BFF5F7
F7BFF5

Split-Comp.

F5F7BE
BFD9F7
DDBFF7

Tetradic

F5F7BE
BFF7DD
C1BFF7
F7BFD9

Contrast Matrix WCAG 2.1 Contrast

F5F7BE
EB863E
D44827
BC090F
48422C
—
2.4
Fail
4.0
AA Large
5.9
AA
9.1
AAA
2.4
Fail
—
1.7
Fail
2.5
Fail
3.8
AA Large
4.0
AA Large
1.7
Fail
—
1.5
Fail
2.3
Fail
5.9
AA
2.5
Fail
1.5
Fail
—
1.5
Fail
9.1
AAA
3.8
AA Large
2.3
Fail
1.5
Fail
—
White BG
1.1Fail
2.6Fail
4.4AA Large
6.6AA
10.0AAA
Black BG
18.9AAA
8.0AAA
4.8AA
3.2AA Large
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F6F6CC
BFBE4F
97962F
6E6D0E
454531

Deuteranopia

F6F6CF
C5CD54
A0AA31
79860D
464633

Tritanopia

F5D7D9
E65D60
CD3537
B30C0C
483636

Achromatopsia

F0F0F0
9C9C9C
6E6E6E
3F3F3F
414141

Shades & Tints Shades & Tints

#F5F7BE

Dark
Light

#EB863E

Dark
Light

#D44827

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5f7be;
  --color-2: #eb863e;
  --color-3: #d44827;
  --color-4: #bc090f;
  --color-5: #48422c;
}

SCSS

$color-1: #f5f7be;
$color-2: #eb863e;
$color-3: #d44827;
$color-4: #bc090f;
$color-5: #48422c;

TAILWIND

colors: {
  'brand-1': '#f5f7be',
  'brand-2': '#eb863e',
  'brand-3': '#d44827',
  'brand-4': '#bc090f',
  'brand-5': '#48422c',
}

RGB Array

[245, 247, 190], [235, 134, 62], [212, 72, 39], [188, 9, 15], [72, 66, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5F7BE, #EB863E, #D44827, #BC090F, #48422C 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: #f5f7be; --color-2: #eb863e; --color-3: #d44827; --color-4: #bc090f; --color-5: #48422c. 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