← Back to Editor

#F4F7BE · #E5F77D · #DEBA6F · #605157 · #1E000E

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

#F4F7BE

Fresh Green · Bisque · Lemon Cream

HEX
#F4F7BE
RGB
rgb(244, 247, 190)
HSL
hsl(63, 78%, 86%)
HSB
hsb(63, 23%, 97%)
CMYK
cmyk(1%, 0%, 23%, 3%)
Oklch
oklch(96.0% 0.073 110.2)

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

#E5F77D

Fresh Green · Khaki · Sunflower

HEX
#E5F77D
RGB
rgb(229, 247, 125)
HSL
hsl(69, 88%, 73%)
HSB
hsb(69, 49%, 97%)
CMYK
cmyk(7%, 0%, 49%, 3%)
Oklch
oklch(93.8% 0.148 116.3)

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

#DEBA6F

Ginger · BurlyWood · Sunflower

HEX
#DEBA6F
RGB
rgb(222, 186, 111)
HSL
hsl(41, 63%, 65%)
HSB
hsb(41, 50%, 87%)
CMYK
cmyk(0%, 16%, 50%, 13%)
Oklch
oklch(80.4% 0.103 84.5)

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

#605157

Dark Violet · DimGray · Charcoal

HEX
#605157
RGB
rgb(96, 81, 87)
HSL
hsl(336, 8%, 35%)
HSB
hsb(336, 16%, 38%)
CMYK
cmyk(0%, 16%, 9%, 62%)
Oklch
oklch(45.2% 0.022 351.9)

Traditional「Dark Violet」· Paint「Charcoal」· Creative Midnight Shadow

#1E000E

Dark Violet · Black · Raspberry

HEX
#1E000E
RGB
rgb(30, 0, 14)
HSL
hsl(332, 100%, 6%)
HSB
hsb(332, 100%, 12%)
CMYK
cmyk(0%, 100%, 53%, 88%)
Oklch
oklch(15.4% 0.063 353.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4F7BE
C2BFF7

Analogous

F7DEBF
F4F7BE
D9F7BF

Triadic

F4F7BE
BFF4F7
F7BFF4

Split-Comp.

F4F7BE
BFD9F7
DEBFF7

Tetradic

F4F7BE
BFF7DE
C2BFF7
F7BFD9

Contrast Matrix WCAG 2.1 Contrast

F4F7BE
E5F77D
DEBA6F
605157
1E000E
—
1.1
Fail
1.7
Fail
6.7
AA
17.8
AAA
1.1
Fail
—
1.6
Fail
6.4
AA
16.9
AAA
1.7
Fail
1.6
Fail
—
4.0
AA Large
10.7
AAA
6.7
AA
6.4
AA
4.0
AA Large
—
2.6
Fail
17.8
AAA
16.9
AAA
10.7
AAA
2.6
Fail
—
White BG
1.1Fail
1.2Fail
1.8Fail
7.5AAA
19.8AAA
Black BG
18.9AAA
17.9AAA
11.4AAA
2.8Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F5CC
EDED9B
CECE81
5A5956
11110B

Deuteranopia

F5F5CF
ECEAA2
D1D386
5A5B55
13150A

Tritanopia

F4D7D9
E6B2B7
DC8F93
5F5454
1D0807

Achromatopsia

F0F0F0
E4E4E4
BCBCBC
565656
0B0B0B

Shades & Tints Shades & Tints

#F4F7BE

Dark
Light

#E5F77D

Dark
Light

#DEBA6F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4f7be;
  --color-2: #e5f77d;
  --color-3: #deba6f;
  --color-4: #605157;
  --color-5: #1e000e;
}

SCSS

$color-1: #f4f7be;
$color-2: #e5f77d;
$color-3: #deba6f;
$color-4: #605157;
$color-5: #1e000e;

TAILWIND

colors: {
  'brand-1': '#f4f7be',
  'brand-2': '#e5f77d',
  'brand-3': '#deba6f',
  'brand-4': '#605157',
  'brand-5': '#1e000e',
}

RGB Array

[244, 247, 190], [229, 247, 125], [222, 186, 111], [96, 81, 87], [30, 0, 14]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4F7BE, #E5F77D, #DEBA6F, #605157, #1E000E 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: #f4f7be; --color-2: #e5f77d; --color-3: #deba6f; --color-4: #605157; --color-5: #1e000e. 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