← Back to Editor

#F0F4F7 · #FFFC8E · #D2D6A4 · #8CAACC · #7B8396

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

#F0F4F7

Sky Blue · Snow · Sky Blue

HEX
#F0F4F7
RGB
rgb(240, 244, 247)
HSL
hsl(206, 30%, 95%)
HSB
hsb(206, 3%, 97%)
CMYK
cmyk(3%, 1%, 0%, 3%)
Oklch
oklch(96.5% 0.006 239.8)

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

#FFFC8E

Fresh Green · Khaki · Lemon Cream

HEX
#FFFC8E
RGB
rgb(255, 252, 142)
HSL
hsl(58, 100%, 78%)
HSB
hsb(58, 44%, 100%)
CMYK
cmyk(0%, 1%, 44%, 0%)
Oklch
oklch(97.1% 0.133 107.3)

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

#D2D6A4

Fresh Green · Wheat · Sunflower

HEX
#D2D6A4
RGB
rgb(210, 214, 164)
HSL
hsl(65, 38%, 74%)
HSB
hsb(65, 23%, 84%)
CMYK
cmyk(2%, 0%, 23%, 16%)
Oklch
oklch(86.1% 0.066 111.5)

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

#8CAACC

Azure · DarkGray · Cobalt Blue

HEX
#8CAACC
RGB
rgb(140, 170, 204)
HSL
hsl(212, 39%, 67%)
HSB
hsb(212, 31%, 80%)
CMYK
cmyk(31%, 17%, 0%, 20%)
Oklch
oklch(72.8% 0.060 251.8)

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

#7B8396

Azure · LightSlateGray · Navy Blue

HEX
#7B8396
RGB
rgb(123, 131, 150)
HSL
hsl(222, 11%, 54%)
HSB
hsb(222, 18%, 59%)
CMYK
cmyk(18%, 13%, 0%, 41%)
Oklch
oklch(61.0% 0.030 267.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0F4F7
F6F2EE

Analogous

EEF6F6
F0F4F7
EEEFF6

Triadic

F0F4F7
F6EEF3
F3F6EE

Split-Comp.

F0F4F7
F6EEEF
F6F6EE

Tetradic

F0F4F7
F6EEF6
F6F2EE
EFF6EE

Contrast Matrix WCAG 2.1 Contrast

F0F4F7
FFFC8E
D2D6A4
8CAACC
7B8396
—
1.0
Fail
1.4
Fail
2.2
Fail
3.4
AA Large
1.0
Fail
—
1.4
Fail
2.2
Fail
3.5
AA Large
1.4
Fail
1.4
Fail
—
1.6
Fail
2.5
Fail
2.2
Fail
2.2
Fail
1.6
Fail
—
1.6
Fail
3.4
AA Large
3.5
AA Large
2.5
Fail
1.6
Fail
—
White BG
1.1Fail
1.1Fail
1.5Fail
2.4Fail
3.8AA Large
Black BG
19.0AAA
19.6AAA
13.9AAA
8.7AAA
5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F2F6
FEFEA9
D4D4B0
9999C4
7E7F91

Deuteranopia

F2F1F6
FEFEAF
D4D3B3
9795C2
7E7D90

Tritanopia

F0F6F6
FFBEC2
D2BABC
8EBDBC
7B8E8D

Achromatopsia

F3F3F3
F0F0F0
CFCFCF
A5A5A5
838383

Shades & Tints Shades & Tints

#F0F4F7

Dark
Light

#FFFC8E

Dark
Light

#D2D6A4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0f4f7;
  --color-2: #fffc8e;
  --color-3: #d2d6a4;
  --color-4: #8caacc;
  --color-5: #7b8396;
}

SCSS

$color-1: #f0f4f7;
$color-2: #fffc8e;
$color-3: #d2d6a4;
$color-4: #8caacc;
$color-5: #7b8396;

TAILWIND

colors: {
  'brand-1': '#f0f4f7',
  'brand-2': '#fffc8e',
  'brand-3': '#d2d6a4',
  'brand-4': '#8caacc',
  'brand-5': '#7b8396',
}

RGB Array

[240, 244, 247], [255, 252, 142], [210, 214, 164], [140, 170, 204], [123, 131, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0F4F7, #FFFC8E, #D2D6A4, #8CAACC, #7B8396 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: #f0f4f7; --color-2: #fffc8e; --color-3: #d2d6a4; --color-4: #8caacc; --color-5: #7b8396. 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