← Back to Editor

#020618 · #FB0B3F · #FFFC7F · #F6EDF2 · #B4E6E5

pastel

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustrationData Visualization

Color Details Color Details

#020618

Indigo · Black · Deep Sea Blue

HEX
#020618
RGB
rgb(2, 6, 24)
HSL
hsl(229, 85%, 5%)
HSB
hsb(229, 92%, 9%)
CMYK
cmyk(92%, 75%, 0%, 91%)
Oklch
oklch(13.0% 0.043 265.1)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#FB0B3F

Vermilion · Crimson · Passion Red

HEX
#FB0B3F
RGB
rgb(251, 11, 63)
HSL
hsl(347, 97%, 51%)
HSB
hsb(347, 96%, 98%)
CMYK
cmyk(0%, 96%, 75%, 2%)
Oklch
oklch(62.7% 0.249 21.1)

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

#FFFC7F

Fresh Green · Khaki · Sunflower

HEX
#FFFC7F
RGB
rgb(255, 252, 127)
HSL
hsl(59, 100%, 75%)
HSB
hsb(59, 50%, 100%)
CMYK
cmyk(0%, 1%, 50%, 0%)
Oklch
oklch(96.9% 0.147 107.6)

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

#F6EDF2

Mauve · SeaShell · Cherry Blossom

HEX
#F6EDF2
RGB
rgb(246, 237, 242)
HSL
hsl(327, 33%, 95%)
HSB
hsb(327, 4%, 96%)
CMYK
cmyk(0%, 4%, 2%, 4%)
Oklch
oklch(95.5% 0.012 342.6)

Traditional「Mauve」· Paint「Cherry Blossom」· Creative Rose Petal

#B4E6E5

Jade · LightBlue · Glacier Blue

HEX
#B4E6E5
RGB
rgb(180, 230, 229)
HSL
hsl(179, 50%, 80%)
HSB
hsb(179, 22%, 90%)
CMYK
cmyk(22%, 0%, 0%, 10%)
Oklch
oklch(89.0% 0.051 194.7)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

020618
181402

Analogous

021118
020618
090218

Triadic

020618
180206
061802

Split-Comp.

020618
180902
111802

Tetradic

020618
180211
181402
021809

Contrast Matrix WCAG 2.1 Contrast

020618
FB0B3F
FFFC7F
F6EDF2
B4E6E5
—
5.0
AA
18.7
AAA
17.6
AAA
14.8
AAA
5.0
AA
—
3.7
AA Large
3.5
AA Large
2.9
Fail
18.7
AAA
3.7
AA Large
—
1.1
Fail
1.3
Fail
17.6
AAA
3.5
AA Large
1.1
Fail
—
1.2
Fail
14.8
AAA
2.9
Fail
1.3
Fail
1.2
Fail
—
White BG
20.2AAA
4.0AA Large
1.1Fail
1.1Fail
1.4Fail
Black BG
1.0Fail
5.2AA
19.5AAA
18.3AAA
15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

040414
939132
FEFE9D
F2F2F1
CACAE5

Deuteranopia

040313
A1B32F
FEFEA5
F3F3F0
C7C3E5

Tritanopia

02100F
EF2826
FFB5BA
F6F0F0
B7E5E5

Achromatopsia

070707
595959
EFEFEF
F0F0F0
D7D7D7

Shades & Tints Shades & Tints

#020618

Dark
Light

#FB0B3F

Dark
Light

#FFFC7F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #020618;
  --color-2: #fb0b3f;
  --color-3: #fffc7f;
  --color-4: #f6edf2;
  --color-5: #b4e6e5;
}

SCSS

$color-1: #020618;
$color-2: #fb0b3f;
$color-3: #fffc7f;
$color-4: #f6edf2;
$color-5: #b4e6e5;

TAILWIND

colors: {
  'brand-1': '#020618',
  'brand-2': '#fb0b3f',
  'brand-3': '#fffc7f',
  'brand-4': '#f6edf2',
  'brand-5': '#b4e6e5',
}

RGB Array

[2, 6, 24], [251, 11, 63], [255, 252, 127], [246, 237, 242], [180, 230, 229]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #020618, #FB0B3F, #FFFC7F, #F6EDF2, #B4E6E5 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: #020618; --color-2: #fb0b3f; --color-3: #fffc7f; --color-4: #f6edf2; --color-5: #b4e6e5. 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 pastel-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