← Back to Editor

#B3D6CF · #F6F7FC · #FBB7A2 · #F0394D · #960F13

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

#B3D6CF

Jade · LightSteelBlue · Glacier Blue

HEX
#B3D6CF
RGB
rgb(179, 214, 207)
HSL
hsl(168, 30%, 77%)
HSB
hsb(168, 16%, 84%)
CMYK
cmyk(16%, 0%, 3%, 16%)
Oklch
oklch(84.9% 0.038 181.9)

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

#F6F7FC

Azure · Snow · Sky Blue

HEX
#F6F7FC
RGB
rgb(246, 247, 252)
HSL
hsl(230, 50%, 98%)
HSB
hsb(230, 2%, 99%)
CMYK
cmyk(2%, 2%, 0%, 1%)
Oklch
oklch(97.7% 0.007 277.2)

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

#FBB7A2

Peach Pink · LightPink · Cherry Blossom

HEX
#FBB7A2
RGB
rgb(251, 183, 162)
HSL
hsl(14, 92%, 81%)
HSB
hsb(14, 35%, 98%)
CMYK
cmyk(0%, 27%, 35%, 2%)
Oklch
oklch(83.7% 0.085 37.9)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#F0394D

Vermilion · Tomato · Passion Red

HEX
#F0394D
RGB
rgb(240, 57, 77)
HSL
hsl(353, 86%, 58%)
HSB
hsb(353, 76%, 94%)
CMYK
cmyk(0%, 76%, 68%, 6%)
Oklch
oklch(63.0% 0.217 20.7)

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

#960F13

Vermilion · DarkRed · Wine Red

HEX
#960F13
RGB
rgb(150, 15, 19)
HSL
hsl(358, 82%, 32%)
HSB
hsb(358, 90%, 59%)
CMYK
cmyk(0%, 90%, 87%, 41%)
Oklch
oklch(43.0% 0.166 27.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3D6CF
D6B3BA

Analogous

B3D6BD
B3D6CF
B3CBD6

Triadic

B3D6CF
CFB3D6
D6CFB3

Split-Comp.

B3D6CF
D6B3CB
D6BDB3

Tetradic

B3D6CF
BDB3D6
D6B3BA
CBD6B3

Contrast Matrix WCAG 2.1 Contrast

B3D6CF
F6F7FC
FBB7A2
F0394D
960F13
—
1.5
Fail
1.1
Fail
2.5
Fail
5.7
AA
1.5
Fail
—
1.6
Fail
3.6
AA Large
8.3
AAA
1.1
Fail
1.6
Fail
—
2.3
Fail
5.2
AA
2.5
Fail
3.6
AA Large
2.3
Fail
—
2.3
Fail
5.7
AA
8.3
AAA
5.2
AA
2.3
Fail
—
White BG
1.6Fail
1.1Fail
1.7Fail
3.9AA Large
8.8AAA
Black BG
13.4AAA
19.6AAA
12.4AAA
5.4AA
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C2D1
F6F6FB
DEDDA7
A19F48
5C5A12

Deuteranopia

C0BED1
F6F6FA
E2E7A8
ABB947
636E12

Tritanopia

B5D2D2
F6FAFA
F8ABAC
E74444
8F1111

Achromatopsia

CBCBCB
F7F7F7
C9C9C9
727272
383838

Shades & Tints Shades & Tints

#B3D6CF

Dark
Light

#F6F7FC

Dark
Light

#FBB7A2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3d6cf;
  --color-2: #f6f7fc;
  --color-3: #fbb7a2;
  --color-4: #f0394d;
  --color-5: #960f13;
}

SCSS

$color-1: #b3d6cf;
$color-2: #f6f7fc;
$color-3: #fbb7a2;
$color-4: #f0394d;
$color-5: #960f13;

TAILWIND

colors: {
  'brand-1': '#b3d6cf',
  'brand-2': '#f6f7fc',
  'brand-3': '#fbb7a2',
  'brand-4': '#f0394d',
  'brand-5': '#960f13',
}

RGB Array

[179, 214, 207], [246, 247, 252], [251, 183, 162], [240, 57, 77], [150, 15, 19]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B3D6CF, #F6F7FC, #FBB7A2, #F0394D, #960F13 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: #b3d6cf; --color-2: #f6f7fc; --color-3: #fbb7a2; --color-4: #f0394d; --color-5: #960f13. 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 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