← Back to Editor

#FCFFFF · #FBEB33 · #13DBD1 · #F9877D · #8A6EAB

warm

A 5-color warm 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

#FCFFFF

Sky Blue · White · Glacier Blue

HEX
#FCFFFF
RGB
rgb(252, 255, 255)
HSL
hsl(180, 100%, 99%)
HSB
hsb(180, 1%, 100%)
CMYK
cmyk(1%, 0%, 0%, 0%)
Oklch
oklch(99.8% 0.003 197.1)

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

#FBEB33

Autumn Sage · Yellow · Sunflower

HEX
#FBEB33
RGB
rgb(251, 235, 51)
HSL
hsl(55, 96%, 59%)
HSB
hsb(55, 80%, 98%)
CMYK
cmyk(0%, 6%, 80%, 2%)
Oklch
oklch(92.5% 0.184 104.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#13DBD1

Mineral Blue · DarkTurquoise · Mint Ice

HEX
#13DBD1
RGB
rgb(19, 219, 209)
HSL
hsl(177, 84%, 47%)
HSB
hsb(177, 91%, 86%)
CMYK
cmyk(91%, 0%, 5%, 14%)
Oklch
oklch(80.5% 0.138 188.9)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#F9877D

Peach Pink · LightCoral · Coral Red

HEX
#F9877D
RGB
rgb(249, 135, 125)
HSL
hsl(5, 91%, 73%)
HSB
hsb(5, 50%, 98%)
CMYK
cmyk(0%, 46%, 50%, 2%)
Oklch
oklch(74.6% 0.140 26.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#8A6EAB

Deep Indigo · LightSlateGray · Violet

HEX
#8A6EAB
RGB
rgb(138, 110, 171)
HSL
hsl(268, 27%, 55%)
HSB
hsb(268, 36%, 67%)
CMYK
cmyk(19%, 36%, 0%, 33%)
Oklch
oklch(58.9% 0.096 304.7)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCFFFF
FFFAFA

Analogous

FAFFFC
FCFFFF
FAFCFF

Triadic

FCFFFF
FFFAFF
FFFFFA

Split-Comp.

FCFFFF
FFFAFC
FFFCFA

Tetradic

FCFFFF
FCFAFF
FFFAFA
FCFFFA

Contrast Matrix WCAG 2.1 Contrast

FCFFFF
FBEB33
13DBD1
F9877D
8A6EAB
—
1.2
Fail
1.7
Fail
2.4
Fail
4.3
AA Large
1.2
Fail
—
1.4
Fail
1.9
Fail
3.5
AA Large
1.7
Fail
1.4
Fail
—
1.4
Fail
2.5
Fail
2.4
Fail
1.9
Fail
1.4
Fail
—
1.8
Fail
4.3
AA Large
3.5
AA Large
2.5
Fail
1.8
Fail
—
White BG
1.0Fail
1.2Fail
1.7Fail
2.4Fail
4.3AA Large
Black BG
20.9AAA
17.0AAA
12.1AAA
8.8AAA
4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FDFDFF
F4F460
6A6BD3
C8C77F
7E7E9C

Deuteranopia

FDFDFF
F5F66A
5E4FD4
CED780
808299

Tritanopia

FCFFFF
FA838A
1DD5D6
F38182
89918E

Achromatopsia

FEFEFE
DBDBDB
9E9E9E
A8A8A8
7D7D7D

Shades & Tints Shades & Tints

#FCFFFF

Dark
Light

#FBEB33

Dark
Light

#13DBD1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fcffff;
  --color-2: #fbeb33;
  --color-3: #13dbd1;
  --color-4: #f9877d;
  --color-5: #8a6eab;
}

SCSS

$color-1: #fcffff;
$color-2: #fbeb33;
$color-3: #13dbd1;
$color-4: #f9877d;
$color-5: #8a6eab;

TAILWIND

colors: {
  'brand-1': '#fcffff',
  'brand-2': '#fbeb33',
  'brand-3': '#13dbd1',
  'brand-4': '#f9877d',
  'brand-5': '#8a6eab',
}

RGB Array

[252, 255, 255], [251, 235, 51], [19, 219, 209], [249, 135, 125], [138, 110, 171]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FCFFFF, #FBEB33, #13DBD1, #F9877D, #8A6EAB is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #fcffff; --color-2: #fbeb33; --color-3: #13dbd1; --color-4: #f9877d; --color-5: #8a6eab. 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. 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 warm-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