← Back to Editor

#35A0F2 · #FFB8E3 · #DED5DE · #E6FBF0

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

#35A0F2

Lake Blue · DodgerBlue · Navy Blue

HEX
#35A0F2
RGB
rgb(53, 160, 242)
HSL
hsl(206, 88%, 58%)
HSB
hsb(206, 78%, 95%)
CMYK
cmyk(78%, 34%, 0%, 5%)
Oklch
oklch(68.4% 0.154 246.3)

Traditional「Lake Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#FFB8E3

Mauve · Pink · Cherry Blossom

HEX
#FFB8E3
RGB
rgb(255, 184, 227)
HSL
hsl(324, 100%, 86%)
HSB
hsb(324, 28%, 100%)
CMYK
cmyk(0%, 28%, 11%, 0%)
Oklch
oklch(86.1% 0.098 342.4)

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

#DED5DE

Mauve · LightGray · Lavender

HEX
#DED5DE
RGB
rgb(222, 213, 222)
HSL
hsl(300, 12%, 85%)
HSB
hsb(300, 4%, 87%)
CMYK
cmyk(0%, 4%, 0%, 13%)
Oklch
oklch(88.3% 0.016 325.7)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

#E6FBF0

Emerald · Lavender · Mint Green

HEX
#E6FBF0
RGB
rgb(230, 251, 240)
HSL
hsl(149, 72%, 94%)
HSB
hsb(149, 8%, 98%)
CMYK
cmyk(8%, 0%, 4%, 2%)
Oklch
oklch(97.0% 0.026 163.2)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

35A0F2
F28736

Analogous

36F2E6
35A0F2
3642F2

Triadic

35A0F2
F236A0
A0F236

Split-Comp.

35A0F2
F23642
F2E636

Tetradic

35A0F2
E636F2
F28736
42F236

Contrast Matrix WCAG 2.1 Contrast

35A0F2
FFB8E3
DED5DE
E6FBF0
—
1.8
Fail
2.0
Fail
2.6
Fail
1.8
Fail
—
1.1
Fail
1.5
Fail
2.0
Fail
1.1
Fail
—
1.3
Fail
2.6
Fail
1.5
Fail
1.3
Fail
—
White BG
2.8Fail
1.6Fail
1.4Fail
1.1Fail
Black BG
7.5AAA
13.2AAA
14.7AAA
19.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6364DE
E0E0D9
DADADC
EFEFF3

Deuteranopia

5D55D9
E4EAD6
DBDBDB
EEECF3

Tritanopia

3ACECB
FBD0CF
DEDADA
E7F5F5

Achromatopsia

898989
D2D2D2
D9D9D9
F3F3F3

Shades & Tints Shades & Tints

#35A0F2

Dark
Light

#FFB8E3

Dark
Light

#DED5DE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #35a0f2;
  --color-2: #ffb8e3;
  --color-3: #ded5de;
  --color-4: #e6fbf0;
}

SCSS

$color-1: #35a0f2;
$color-2: #ffb8e3;
$color-3: #ded5de;
$color-4: #e6fbf0;

TAILWIND

colors: {
  'brand-1': '#35a0f2',
  'brand-2': '#ffb8e3',
  'brand-3': '#ded5de',
  'brand-4': '#e6fbf0',
}

RGB Array

[53, 160, 242], [255, 184, 227], [222, 213, 222], [230, 251, 240]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #35A0F2, #FFB8E3, #DED5DE, #E6FBF0 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: #35a0f2; --color-2: #ffb8e3; --color-3: #ded5de; --color-4: #e6fbf0. 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