← Back to Editor

#F5F3F7 · #8099BD · #8BB56F · #DBB727 · #E5E866

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

#F5F3F7

Lilac · Snow · Lavender

HEX
#F5F3F7
RGB
rgb(245, 243, 247)
HSL
hsl(270, 20%, 96%)
HSB
hsb(270, 2%, 97%)
CMYK
cmyk(1%, 2%, 0%, 3%)
Oklch
oklch(96.7% 0.006 308.4)

Traditional「Lilac」· Paint「Lavender」· Creative Lavender Dream

#8099BD

Azure · LightSlateGray · Cobalt Blue

HEX
#8099BD
RGB
rgb(128, 153, 189)
HSL
hsl(215, 32%, 62%)
HSB
hsb(215, 32%, 74%)
CMYK
cmyk(32%, 19%, 0%, 26%)
Oklch
oklch(67.7% 0.061 257.5)

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

#8BB56F

Celadon · DarkSeaGreen · Olive Green

HEX
#8BB56F
RGB
rgb(139, 181, 111)
HSL
hsl(96, 32%, 57%)
HSB
hsb(96, 39%, 71%)
CMYK
cmyk(23%, 0%, 39%, 29%)
Oklch
oklch(72.5% 0.106 133.6)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#DBB727

Ginger · GoldenRod · Sunflower

HEX
#DBB727
RGB
rgb(219, 183, 39)
HSL
hsl(48, 71%, 51%)
HSB
hsb(48, 82%, 86%)
CMYK
cmyk(0%, 16%, 82%, 14%)
Oklch
oklch(78.9% 0.152 93.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#E5E866

Fresh Green · Khaki · Sunflower

HEX
#E5E866
RGB
rgb(229, 232, 102)
HSL
hsl(61, 74%, 65%)
HSB
hsb(61, 56%, 91%)
CMYK
cmyk(1%, 0%, 56%, 9%)
Oklch
oklch(90.4% 0.152 110.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5F3F7
F5F7F3

Analogous

F3F3F7
F5F3F7
F7F3F7

Triadic

F5F3F7
F7F5F3
F3F7F5

Split-Comp.

F5F3F7
F7F7F3
F3F7F3

Tetradic

F5F3F7
F7F3F3
F5F7F3
F3F7F7

Contrast Matrix WCAG 2.1 Contrast

F5F3F7
8099BD
8BB56F
DBB727
E5E866
—
2.6
Fail
2.1
Fail
1.8
Fail
1.2
Fail
2.6
Fail
—
1.2
Fail
1.5
Fail
2.2
Fail
2.1
Fail
1.2
Fail
—
1.2
Fail
1.8
Fail
1.8
Fail
1.5
Fail
1.2
Fail
—
1.5
Fail
1.2
Fail
2.2
Fail
1.8
Fail
1.5
Fail
—
White BG
1.1Fail
2.9Fail
2.3Fail
1.9Fail
1.3Fail
Black BG
19.0AAA
7.2AAA
8.9AAA
10.8AAA
16.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F4F4F6
8B8BB4
9D9E80
CBCB4A
E6E685

Deuteranopia

F4F4F6
8988B2
9B9884
CED052
E6E68D

Tritanopia

F5F5F5
81ADAC
8D8D90
D9656B
E59EA4

Achromatopsia

F4F4F4
969696
A0A0A0
B1B1B1
D8D8D8

Shades & Tints Shades & Tints

#F5F3F7

Dark
Light

#8099BD

Dark
Light

#8BB56F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5f3f7;
  --color-2: #8099bd;
  --color-3: #8bb56f;
  --color-4: #dbb727;
  --color-5: #e5e866;
}

SCSS

$color-1: #f5f3f7;
$color-2: #8099bd;
$color-3: #8bb56f;
$color-4: #dbb727;
$color-5: #e5e866;

TAILWIND

colors: {
  'brand-1': '#f5f3f7',
  'brand-2': '#8099bd',
  'brand-3': '#8bb56f',
  'brand-4': '#dbb727',
  'brand-5': '#e5e866',
}

RGB Array

[245, 243, 247], [128, 153, 189], [139, 181, 111], [219, 183, 39], [229, 232, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5F3F7, #8099BD, #8BB56F, #DBB727, #E5E866 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: #f5f3f7; --color-2: #8099bd; --color-3: #8bb56f; --color-4: #dbb727; --color-5: #e5e866. 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