← Back to Editor

#FFA951 · #5AB3F6 · #BED352 · #D4E8F7

A 4-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 App

Color Details Color Details

#FFA951

Ginger · SandyBrown · Warm Sun

HEX
#FFA951
RGB
rgb(255, 169, 81)
HSL
hsl(30, 100%, 66%)
HSB
hsb(30, 68%, 100%)
CMYK
cmyk(0%, 34%, 68%, 0%)
Oklch
oklch(80.4% 0.144 63.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#5AB3F6

Sky Blue · CornflowerBlue · Cobalt Blue

HEX
#5AB3F6
RGB
rgb(90, 179, 246)
HSL
hsl(206, 90%, 66%)
HSB
hsb(206, 63%, 96%)
CMYK
cmyk(63%, 27%, 0%, 4%)
Oklch
oklch(74.0% 0.130 243.6)

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

#BED352

Grass Green · GreenYellow · Olive Green

HEX
#BED352
RGB
rgb(190, 211, 82)
HSL
hsl(70, 59%, 57%)
HSB
hsb(70, 61%, 83%)
CMYK
cmyk(10%, 0%, 61%, 17%)
Oklch
oklch(82.6% 0.155 117.7)

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

#D4E8F7

Sky Blue · Lavender · Sky Blue

HEX
#D4E8F7
RGB
rgb(212, 232, 247)
HSL
hsl(206, 69%, 90%)
HSB
hsb(206, 14%, 97%)
CMYK
cmyk(14%, 6%, 0%, 3%)
Oklch
oklch(92.1% 0.030 240.2)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFA951
52A8FF

Analogous

FF5252
FFA951
FFFF52

Triadic

FFA951
52FFA8
A852FF

Split-Comp.

FFA951
52FFFF
5252FF

Tetradic

FFA951
52FF52
52A8FF
FF52FF

Contrast Matrix WCAG 2.1 Contrast

FFA951
5AB3F6
BED352
D4E8F7
—
1.2
Fail
1.1
Fail
1.5
Fail
1.2
Fail
—
1.4
Fail
1.8
Fail
1.1
Fail
1.4
Fail
—
1.3
Fail
1.5
Fail
1.8
Fail
1.3
Fail
—
White BG
1.9Fail
2.3Fail
1.7Fail
1.3Fail
Black BG
11.0AAA
9.2AAA
12.6AAA
16.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DAD966
8181E6
C7C771
DDDDF3

Deuteranopia

DFE56B
7B75E2
C6C479
DCDAF2

Tritanopia

FB777B
5ED9D6
BF8A8F
D5F1F0

Achromatopsia

B9B9B9
A0A0A0
BEBEBE
E4E4E4

Shades & Tints Shades & Tints

#FFA951

Dark
Light

#5AB3F6

Dark
Light

#BED352

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffa951;
  --color-2: #5ab3f6;
  --color-3: #bed352;
  --color-4: #d4e8f7;
}

SCSS

$color-1: #ffa951;
$color-2: #5ab3f6;
$color-3: #bed352;
$color-4: #d4e8f7;

TAILWIND

colors: {
  'brand-1': '#ffa951',
  'brand-2': '#5ab3f6',
  'brand-3': '#bed352',
  'brand-4': '#d4e8f7',
}

RGB Array

[255, 169, 81], [90, 179, 246], [190, 211, 82], [212, 232, 247]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #FFA951, #5AB3F6, #BED352, #D4E8F7 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ffa951; --color-2: #5ab3f6; --color-3: #bed352; --color-4: #d4e8f7. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 4-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