← Back to Editor

#33C631 · #5BA1FC · #BD243D · #FCF405 · #FD5F03

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 PostIllustration

Color Details Color Details

#33C631

Pine Green · LimeGreen · Olive Green

HEX
#33C631
RGB
rgb(51, 198, 49)
HSL
hsl(119, 60%, 48%)
HSB
hsb(119, 75%, 78%)
CMYK
cmyk(74%, 0%, 75%, 22%)
Oklch
oklch(72.4% 0.221 142.7)

Traditional「Pine Green」· Paint「Olive Green」· Creative Blush Sunrise

#5BA1FC

Azure · CornflowerBlue · Cobalt Blue

HEX
#5BA1FC
RGB
rgb(91, 161, 252)
HSL
hsl(214, 96%, 67%)
HSB
hsb(214, 64%, 99%)
CMYK
cmyk(64%, 36%, 0%, 1%)
Oklch
oklch(70.4% 0.152 255.8)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#BD243D

Vermilion · FireBrick · Passion Red

HEX
#BD243D
RGB
rgb(189, 36, 61)
HSL
hsl(350, 68%, 44%)
HSB
hsb(350, 81%, 74%)
CMYK
cmyk(0%, 81%, 68%, 26%)
Oklch
oklch(52.2% 0.187 18.6)

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

#FCF405

Autumn Sage · Yellow · Honey Gold

HEX
#FCF405
RGB
rgb(252, 244, 5)
HSL
hsl(58, 98%, 50%)
HSB
hsb(58, 98%, 99%)
CMYK
cmyk(0%, 3%, 98%, 1%)
Oklch
oklch(94.3% 0.202 107.3)

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

#FD5F03

Tangerine · OrangeRed · Amber Brown

HEX
#FD5F03
RGB
rgb(253, 95, 3)
HSL
hsl(22, 98%, 50%)
HSB
hsb(22, 99%, 99%)
CMYK
cmyk(0%, 62%, 99%, 1%)
Oklch
oklch(68.4% 0.208 41.5)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

33C631
C131C4

Analogous

7DC431
33C631
31C478

Triadic

33C631
3133C4
C43133

Split-Comp.

33C631
7831C4
C4317D

Tetradic

33C631
317DC4
C131C4
C47831

Contrast Matrix WCAG 2.1 Contrast

33C631
5BA1FC
BD243D
FCF405
FD5F03
—
1.2
Fail
2.7
Fail
2.0
Fail
1.4
Fail
1.2
Fail
—
2.3
Fail
2.3
Fail
1.2
Fail
2.7
Fail
2.3
Fail
—
5.2
AA
2.0
Fail
2.0
Fail
2.3
Fail
5.2
AA
—
2.7
Fail
1.4
Fail
1.2
Fail
2.0
Fail
2.7
Fail
—
White BG
2.3Fail
2.6Fail
6.0AA
1.2Fail
3.1AA Large
Black BG
9.3AAA
7.9AAA
3.5AA Large
18.1AAA
6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

737455
797AE6
7B7937
F9F83F
B9B719

Deuteranopia

6A5F5E
7570E1
848F35
F9FA4D
C2CE1F

Tritanopia

3A7278
5FD5D1
B53231
FC6C77
F52B2F

Achromatopsia

898989
969696
555555
DBDBDB
848484

Shades & Tints Shades & Tints

#33C631

Dark
Light

#5BA1FC

Dark
Light

#BD243D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #33c631;
  --color-2: #5ba1fc;
  --color-3: #bd243d;
  --color-4: #fcf405;
  --color-5: #fd5f03;
}

SCSS

$color-1: #33c631;
$color-2: #5ba1fc;
$color-3: #bd243d;
$color-4: #fcf405;
$color-5: #fd5f03;

TAILWIND

colors: {
  'brand-1': '#33c631',
  'brand-2': '#5ba1fc',
  'brand-3': '#bd243d',
  'brand-4': '#fcf405',
  'brand-5': '#fd5f03',
}

RGB Array

[51, 198, 49], [91, 161, 252], [189, 36, 61], [252, 244, 5], [253, 95, 3]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #33C631, #5BA1FC, #BD243D, #FCF405, #FD5F03 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #33c631; --color-2: #5ba1fc; --color-3: #bd243d; --color-4: #fcf405; --color-5: #fd5f03. 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. 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