← Back to Editor

#F8FDE6 · #1FF3F7 · #7B04F4 · #48013D · #090D0E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F8FDE6

Willow Green · LightYellow · Mint Green

HEX
#F8FDE6
RGB
rgb(248, 253, 230)
HSL
hsl(73, 85%, 95%)
HSB
hsb(73, 9%, 99%)
CMYK
cmyk(2%, 0%, 9%, 1%)
Oklch
oklch(98.4% 0.031 116.9)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#1FF3F7

Lake Blue · Cyan · Lake Green

HEX
#1FF3F7
RGB
rgb(31, 243, 247)
HSL
hsl(181, 93%, 55%)
HSB
hsb(181, 87%, 97%)
CMYK
cmyk(87%, 2%, 0%, 3%)
Oklch
oklch(87.6% 0.146 197.0)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

#7B04F4

Royal Purple · DarkViolet · Violet

HEX
#7B04F4
RGB
rgb(123, 4, 244)
HSL
hsl(270, 97%, 49%)
HSB
hsb(270, 98%, 96%)
CMYK
cmyk(50%, 98%, 0%, 4%)
Oklch
oklch(51.5% 0.283 294.1)

Traditional「Royal Purple」· Paint「Violet」· Creative Blush Sunrise

#48013D

Rose Purple · MidnightBlue · Dark Purple

HEX
#48013D
RGB
rgb(72, 1, 61)
HSL
hsl(309, 97%, 14%)
HSB
hsb(309, 99%, 28%)
CMYK
cmyk(0%, 99%, 15%, 72%)
Oklch
oklch(27.5% 0.120 336.2)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#090D0E

Slate Blue · Black · Peacock Green

HEX
#090D0E
RGB
rgb(9, 13, 14)
HSL
hsl(192, 22%, 5%)
HSB
hsb(192, 36%, 5%)
CMYK
cmyk(36%, 7%, 0%, 95%)
Oklch
oklch(15.5% 0.007 214.4)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8FDE6
ECE7FD

Analogous

FDF7E7
F8FDE6
EEFDE7

Triadic

F8FDE6
E7F8FD
FDE7F8

Split-Comp.

F8FDE6
E7EEFD
F7E7FD

Tetradic

F8FDE6
E7FDF7
ECE7FD
FDE7EE

Contrast Matrix WCAG 2.1 Contrast

F8FDE6
1FF3F7
7B04F4
48013D
090D0E
—
1.3
Fail
6.4
AA
15.0
AAA
18.8
AAA
1.3
Fail
—
4.8
AA
11.3
AAA
14.2
AAA
6.4
AA
4.8
AA
—
2.3
Fail
2.9
Fail
15.0
AAA
11.3
AAA
2.3
Fail
—
1.3
Fail
18.8
AAA
14.2
AAA
2.9
Fail
1.3
Fail
—
White BG
1.0Fail
1.4Fail
6.6AA
15.6AAA
19.5AAA
Black BG
20.2AAA
15.2AAA
3.2AA Large
1.3Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

FAFAEC
7B7DF6
4746BA
29292E
0B0B0E

Deuteranopia

FAFAED
6F5FF6
4E57AC
2D332B
0B0A0E

Tritanopia

F8F0F1
2AF5F5
758C82
442321
090E0E

Achromatopsia

F9F9F9
B4B4B4
434343
1D1D1D
0C0C0C

Shades & Tints Shades & Tints

#F8FDE6

Dark
Light

#1FF3F7

Dark
Light

#7B04F4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8fde6;
  --color-2: #1ff3f7;
  --color-3: #7b04f4;
  --color-4: #48013d;
  --color-5: #090d0e;
}

SCSS

$color-1: #f8fde6;
$color-2: #1ff3f7;
$color-3: #7b04f4;
$color-4: #48013d;
$color-5: #090d0e;

TAILWIND

colors: {
  'brand-1': '#f8fde6',
  'brand-2': '#1ff3f7',
  'brand-3': '#7b04f4',
  'brand-4': '#48013d',
  'brand-5': '#090d0e',
}

RGB Array

[248, 253, 230], [31, 243, 247], [123, 4, 244], [72, 1, 61], [9, 13, 14]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8FDE6, #1FF3F7, #7B04F4, #48013D, #090D0E 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: #f8fde6; --color-2: #1ff3f7; --color-3: #7b04f4; --color-4: #48013d; --color-5: #090d0e. 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