← Back to Editor

#CCF0FF · #FFFFFF · #E7E5D1 · #F3F09B · #F2DE3C

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#CCF0FF

Sky Blue · Lavender · Glacier Blue

HEX
#CCF0FF
RGB
rgb(204, 240, 255)
HSL
hsl(198, 100%, 90%)
HSB
hsb(198, 20%, 100%)
CMYK
cmyk(20%, 6%, 0%, 0%)
Oklch
oklch(93.4% 0.043 224.9)

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

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#E7E5D1

Fresh Green · Beige · Lemon Cream

HEX
#E7E5D1
RGB
rgb(231, 229, 209)
HSL
hsl(55, 31%, 86%)
HSB
hsb(55, 10%, 91%)
CMYK
cmyk(0%, 1%, 10%, 9%)
Oklch
oklch(91.8% 0.027 102.3)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F3F09B

Fresh Green · Khaki · Lemon Cream

HEX
#F3F09B
RGB
rgb(243, 240, 155)
HSL
hsl(58, 79%, 78%)
HSB
hsb(58, 36%, 95%)
CMYK
cmyk(0%, 1%, 36%, 5%)
Oklch
oklch(93.9% 0.106 106.5)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F2DE3C

Autumn Sage · Gold · Sunflower

HEX
#F2DE3C
RGB
rgb(242, 222, 60)
HSL
hsl(53, 87%, 59%)
HSB
hsb(53, 75%, 95%)
CMYK
cmyk(0%, 8%, 75%, 5%)
Oklch
oklch(89.1% 0.170 102.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCF0FF
FFDBCC

Analogous

CCFFF5
CCF0FF
CCD6FF

Triadic

CCF0FF
FFCCF0
F0FFCC

Split-Comp.

CCF0FF
FFCCD6
FFF5CC

Tetradic

CCF0FF
F5CCFF
FFDBCC
D6FFCC

Contrast Matrix WCAG 2.1 Contrast

CCF0FF
FFFFFF
E7E5D1
F3F09B
F2DE3C
—
1.2
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.2
Fail
—
1.3
Fail
1.2
Fail
1.4
Fail
1.1
Fail
1.3
Fail
—
1.1
Fail
1.1
Fail
1.0
Fail
1.2
Fail
1.1
Fail
—
1.2
Fail
1.1
Fail
1.4
Fail
1.1
Fail
1.2
Fail
—
White BG
1.2Fail
1.0Fail
1.3Fail
1.2Fail
1.4Fail
Black BG
17.5AAA
21.0AAA
16.5AAA
17.7AAA
15.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCFB
FFFFFF
E6E6D6
F2F2B0
E9E963

Deuteranopia

DAD7FB
FFFFFF
E6E6D7
F2F2B5
EBEC6D

Tritanopia

CEF9F8
FFFFFF
E7DADB
F3C0C3
F18289

Achromatopsia

E7E7E7
FFFFFF
E3E3E3
E7E7E7
D2D2D2

Shades & Tints Shades & Tints

#CCF0FF

Dark
Light

#FFFFFF

Dark
Light

#E7E5D1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccf0ff;
  --color-2: #ffffff;
  --color-3: #e7e5d1;
  --color-4: #f3f09b;
  --color-5: #f2de3c;
}

SCSS

$color-1: #ccf0ff;
$color-2: #ffffff;
$color-3: #e7e5d1;
$color-4: #f3f09b;
$color-5: #f2de3c;

TAILWIND

colors: {
  'brand-1': '#ccf0ff',
  'brand-2': '#ffffff',
  'brand-3': '#e7e5d1',
  'brand-4': '#f3f09b',
  'brand-5': '#f2de3c',
}

RGB Array

[204, 240, 255], [255, 255, 255], [231, 229, 209], [243, 240, 155], [242, 222, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCF0FF, #FFFFFF, #E7E5D1, #F3F09B, #F2DE3C is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ccf0ff; --color-2: #ffffff; --color-3: #e7e5d1; --color-4: #f3f09b; --color-5: #f2de3c. 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 tech, SaaS, healthcare, eco industries. 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