← Back to Editor

#F7FBFA · #EDEBD6 · #DBD5A5 · #C6B541 · #7A8EA7

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

#F7FBFA

Jade · Snow · Glacier Blue

HEX
#F7FBFA
RGB
rgb(247, 251, 250)
HSL
hsl(165, 33%, 98%)
HSB
hsb(165, 2%, 98%)
CMYK
cmyk(2%, 0%, 0%, 2%)
Oklch
oklch(98.5% 0.004 179.7)

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

#EDEBD6

Fresh Green · Beige · Lemon Cream

HEX
#EDEBD6
RGB
rgb(237, 235, 214)
HSL
hsl(55, 39%, 88%)
HSB
hsb(55, 10%, 93%)
CMYK
cmyk(0%, 1%, 10%, 7%)
Oklch
oklch(93.6% 0.028 102.5)

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

#DBD5A5

Fresh Green · Wheat · Sunflower

HEX
#DBD5A5
RGB
rgb(219, 213, 165)
HSL
hsl(53, 43%, 75%)
HSB
hsb(53, 25%, 86%)
CMYK
cmyk(0%, 3%, 25%, 14%)
Oklch
oklch(86.6% 0.063 101.7)

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

#C6B541

Autumn Sage · GoldenRod · Sunflower

HEX
#C6B541
RGB
rgb(198, 181, 65)
HSL
hsl(52, 54%, 52%)
HSB
hsb(52, 67%, 78%)
CMYK
cmyk(0%, 9%, 67%, 22%)
Oklch
oklch(76.6% 0.135 100.9)

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

#7A8EA7

Azure · LightSlateGray · Navy Blue

HEX
#7A8EA7
RGB
rgb(122, 142, 167)
HSL
hsl(213, 20%, 57%)
HSB
hsb(213, 27%, 65%)
CMYK
cmyk(27%, 15%, 0%, 35%)
Oklch
oklch(64.0% 0.044 254.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7FBFA
FCF8F9

Analogous

F8FCF9
F7FBFA
F8FBFC

Triadic

F7FBFA
FBF8FC
FCFBF8

Split-Comp.

F7FBFA
FCF8FB
FCF9F8

Tetradic

F7FBFA
F9F8FC
FCF8F9
FBFCF8

Contrast Matrix WCAG 2.1 Contrast

F7FBFA
EDEBD6
DBD5A5
C6B541
7A8EA7
—
1.2
Fail
1.4
Fail
2.0
Fail
3.2
AA Large
1.2
Fail
—
1.2
Fail
1.7
Fail
2.8
Fail
1.4
Fail
1.2
Fail
—
1.4
Fail
2.2
Fail
2.0
Fail
1.7
Fail
1.4
Fail
—
1.6
Fail
3.2
AA Large
2.8
Fail
2.2
Fail
1.6
Fail
—
White BG
1.0Fail
1.2Fail
1.5Fail
2.1Fail
3.4AA Large
Black BG
20.1AAA
17.5AAA
14.1AAA
10.1AAA
6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9FA
ECECDB
D8D8B1
BFBE5D
8383A1

Deuteranopia

F9F8FA
ECECDC
D9D9B3
C0C164
8280A0

Tritanopia

F7FAFA
EDDFE0
DBBABC
C57378
7B9C9B

Achromatopsia

FAFAFA
E9E9E9
D1D1D1
ADADAD
8B8B8B

Shades & Tints Shades & Tints

#F7FBFA

Dark
Light

#EDEBD6

Dark
Light

#DBD5A5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7fbfa;
  --color-2: #edebd6;
  --color-3: #dbd5a5;
  --color-4: #c6b541;
  --color-5: #7a8ea7;
}

SCSS

$color-1: #f7fbfa;
$color-2: #edebd6;
$color-3: #dbd5a5;
$color-4: #c6b541;
$color-5: #7a8ea7;

TAILWIND

colors: {
  'brand-1': '#f7fbfa',
  'brand-2': '#edebd6',
  'brand-3': '#dbd5a5',
  'brand-4': '#c6b541',
  'brand-5': '#7a8ea7',
}

RGB Array

[247, 251, 250], [237, 235, 214], [219, 213, 165], [198, 181, 65], [122, 142, 167]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7FBFA, #EDEBD6, #DBD5A5, #C6B541, #7A8EA7 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: #f7fbfa; --color-2: #edebd6; --color-3: #dbd5a5; --color-4: #c6b541; --color-5: #7a8ea7. 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