← Back to Editor

#F5EEF6 · #CFC368 · #F20709 · #363910 · #4D4514

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F5EEF6

Lilac · SeaShell · Lavender

HEX
#F5EEF6
RGB
rgb(245, 238, 246)
HSL
hsl(293, 31%, 95%)
HSB
hsb(293, 3%, 96%)
CMYK
cmyk(0%, 3%, 0%, 4%)
Oklch
oklch(95.7% 0.013 321.9)

Traditional「Lilac」· Paint「Lavender」· Creative Lavender Dream

#CFC368

Fresh Green · BurlyWood · Sunflower

HEX
#CFC368
RGB
rgb(207, 195, 104)
HSL
hsl(53, 52%, 61%)
HSB
hsb(53, 50%, 81%)
CMYK
cmyk(0%, 6%, 50%, 19%)
Oklch
oklch(80.8% 0.114 101.9)

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

#F20709

Vermilion · Red · Passion Red

HEX
#F20709
RGB
rgb(242, 7, 9)
HSL
hsl(359, 94%, 49%)
HSB
hsb(359, 97%, 95%)
CMYK
cmyk(0%, 97%, 96%, 5%)
Oklch
oklch(60.5% 0.246 28.9)

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

#363910

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#363910
RGB
rgb(54, 57, 16)
HSL
hsl(64, 56%, 14%)
HSB
hsb(64, 72%, 22%)
CMYK
cmyk(5%, 0%, 72%, 78%)
Oklch
oklch(33.2% 0.060 113.2)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

#4D4514

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#4D4514
RGB
rgb(77, 69, 20)
HSL
hsl(52, 59%, 19%)
HSB
hsb(52, 74%, 30%)
CMYK
cmyk(0%, 10%, 74%, 70%)
Oklch
oklch(38.8% 0.068 99.9)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5EEF6
EFF6EE

Analogous

F1EEF6
F5EEF6
F6EEF3

Triadic

F5EEF6
F6F5EE
EEF6F5

Split-Comp.

F5EEF6
F3F6EE
EEF6F1

Tetradic

F5EEF6
F6F1EE
EFF6EE
EEF3F6

Contrast Matrix WCAG 2.1 Contrast

F5EEF6
CFC368
F20709
363910
4D4514
—
1.6
Fail
3.8
AA Large
10.5
AAA
8.5
AAA
1.6
Fail
—
2.4
Fail
6.7
AA
5.4
AA
3.8
AA Large
2.4
Fail
—
2.7
Fail
2.2
Fail
10.5
AAA
6.7
AA
2.7
Fail
—
1.2
Fail
8.5
AAA
5.4
AA
2.2
Fail
1.2
Fail
—
White BG
1.1Fail
1.8Fail
4.4AA Large
12.0AAA
9.6AAA
Black BG
18.4AAA
11.7AAA
4.8AA
1.7Fail
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F2F4
CACA7E
8C8A09
37371A
4A4920

Deuteranopia

F2F3F4
CBCB83
9AAB08
37371C
4A4B23

Tritanopia

F5F3F2
CE8F93
E60808
362223
4D292B

Achromatopsia

F1F1F1
BCBCBC
4D4D4D
333333
424242

Shades & Tints Shades & Tints

#F5EEF6

Dark
Light

#CFC368

Dark
Light

#F20709

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5eef6;
  --color-2: #cfc368;
  --color-3: #f20709;
  --color-4: #363910;
  --color-5: #4d4514;
}

SCSS

$color-1: #f5eef6;
$color-2: #cfc368;
$color-3: #f20709;
$color-4: #363910;
$color-5: #4d4514;

TAILWIND

colors: {
  'brand-1': '#f5eef6',
  'brand-2': '#cfc368',
  'brand-3': '#f20709',
  'brand-4': '#363910',
  'brand-5': '#4d4514',
}

RGB Array

[245, 238, 246], [207, 195, 104], [242, 7, 9], [54, 57, 16], [77, 69, 20]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5EEF6, #CFC368, #F20709, #363910, #4D4514 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f5eef6; --color-2: #cfc368; --color-3: #f20709; --color-4: #363910; --color-5: #4d4514. 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 tech, SaaS, healthcare, eco industries. 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