← Back to Editor

#F2F8EA · #6797A1 · #FABFA1 · #E3E7B1 · #ECEFA9

warm

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

#F2F8EA

Willow Green · Linen · Mint Green

HEX
#F2F8EA
RGB
rgb(242, 248, 234)
HSL
hsl(86, 50%, 95%)
HSB
hsb(86, 6%, 97%)
CMYK
cmyk(2%, 0%, 6%, 3%)
Oklch
oklch(97.1% 0.019 125.8)

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

#6797A1

Slate Blue · CadetBlue · Lake Green

HEX
#6797A1
RGB
rgb(103, 151, 161)
HSL
hsl(190, 24%, 52%)
HSB
hsb(190, 36%, 63%)
CMYK
cmyk(36%, 6%, 0%, 37%)
Oklch
oklch(64.6% 0.054 212.1)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#FABFA1

Apricot · LightPink · Peach Orange

HEX
#FABFA1
RGB
rgb(250, 191, 161)
HSL
hsl(20, 90%, 81%)
HSB
hsb(20, 36%, 98%)
CMYK
cmyk(0%, 24%, 36%, 2%)
Oklch
oklch(85.1% 0.079 48.2)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#E3E7B1

Fresh Green · Wheat · Lemon Cream

HEX
#E3E7B1
RGB
rgb(227, 231, 177)
HSL
hsl(64, 53%, 80%)
HSB
hsb(64, 23%, 91%)
CMYK
cmyk(2%, 0%, 23%, 9%)
Oklch
oklch(91.2% 0.070 111.2)

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

#ECEFA9

Fresh Green · Wheat · Lemon Cream

HEX
#ECEFA9
RGB
rgb(236, 239, 169)
HSL
hsl(63, 69%, 80%)
HSB
hsb(63, 29%, 94%)
CMYK
cmyk(1%, 0%, 29%, 6%)
Oklch
oklch(93.3% 0.089 110.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2F8EA
F1ECF9

Analogous

F9F8EC
F2F8EA
EDF9EC

Triadic

F2F8EA
ECF3F9
F9ECF3

Split-Comp.

F2F8EA
ECEDF9
F8ECF9

Tetradic

F2F8EA
ECF9F8
F1ECF9
F9ECED

Contrast Matrix WCAG 2.1 Contrast

F2F8EA
6797A1
FABFA1
E3E7B1
ECEFA9
—
3.0
Fail
1.5
Fail
1.2
Fail
1.1
Fail
3.0
Fail
—
2.0
Fail
2.5
Fail
2.7
Fail
1.5
Fail
2.0
Fail
—
1.3
Fail
1.3
Fail
1.2
Fail
2.5
Fail
1.3
Fail
—
1.1
Fail
1.1
Fail
2.7
Fail
1.3
Fail
1.1
Fail
—
White BG
1.1Fail
3.2AA Large
1.6Fail
1.3Fail
1.2Fail
Black BG
19.4AAA
6.5AA
13.0AAA
16.3AAA
17.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F5ED
7C7C9F
E0E0A8
E5E5BE
EDEDBA

Deuteranopia

F4F4EE
79759E
E4E8AA
E5E4C1
EDEDBE

Tritanopia

F2F0F1
699D9C
F7AEAF
E3C8CB
ECC7CA

Achromatopsia

F5F5F5
8A8A8A
CDCDCD
E0E0E0
E6E6E6

Shades & Tints Shades & Tints

#F2F8EA

Dark
Light

#6797A1

Dark
Light

#FABFA1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2f8ea;
  --color-2: #6797a1;
  --color-3: #fabfa1;
  --color-4: #e3e7b1;
  --color-5: #ecefa9;
}

SCSS

$color-1: #f2f8ea;
$color-2: #6797a1;
$color-3: #fabfa1;
$color-4: #e3e7b1;
$color-5: #ecefa9;

TAILWIND

colors: {
  'brand-1': '#f2f8ea',
  'brand-2': '#6797a1',
  'brand-3': '#fabfa1',
  'brand-4': '#e3e7b1',
  'brand-5': '#ecefa9',
}

RGB Array

[242, 248, 234], [103, 151, 161], [250, 191, 161], [227, 231, 177], [236, 239, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F2F8EA, #6797A1, #FABFA1, #E3E7B1, #ECEFA9 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: #f2f8ea; --color-2: #6797a1; --color-3: #fabfa1; --color-4: #e3e7b1; --color-5: #ecefa9. 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 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