#F7F6DD + #DBDDA8 + #9AAFA5 + #9099B3 + #D6EDF4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F7F6DD

Fresh Green · Beige · Lemon Cream

HEX

#F7F6DD

RGB

rgb(247, 246, 221)

HSL

hsl(58, 62%, 92%)

HSB

hsb(58, 11%, 97%)

CMYK

cmyk(0%, 0%, 11%, 3%)

Oklch

oklch(96.7% 0.033 105.1)

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

#DBDDA8

Fresh Green · Wheat · Lemon Cream

HEX

#DBDDA8

RGB

rgb(219, 221, 168)

HSL

hsl(62, 44%, 76%)

HSB

hsb(62, 24%, 87%)

CMYK

cmyk(1%, 0%, 24%, 13%)

Oklch

oklch(88.3% 0.069 109.5)

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

#9AAFA5

Jade · DarkGray · Apple Green

HEX

#9AAFA5

RGB

rgb(154, 175, 165)

HSL

hsl(151, 12%, 65%)

HSB

hsb(151, 12%, 69%)

CMYK

cmyk(12%, 0%, 6%, 31%)

Oklch

oklch(73.5% 0.027 165.4)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#9099B3

Azure · DarkGray · Cobalt Blue

HEX

#9099B3

RGB

rgb(144, 153, 179)

HSL

hsl(225, 19%, 63%)

HSB

hsb(225, 20%, 70%)

CMYK

cmyk(20%, 15%, 0%, 30%)

Oklch

oklch(68.5% 0.040 270.3)

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

#D6EDF4

Sky Blue · Lavender · Glacier Blue

HEX

#D6EDF4

RGB

rgb(214, 237, 244)

HSL

hsl(194, 58%, 90%)

HSB

hsb(194, 12%, 96%)

CMYK

cmyk(12%, 3%, 0%, 4%)

Oklch

oklch(93.1% 0.026 217.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7F6DD

DEDFF7

Analogous

F7EADE

F7F6DD

EBF7DE

Triadic

F7F6DD

DEF7F6

F6DEF7

Split-Comp.

F7F6DD

DEEBF7

EADEF7

Tetradic

F7F6DD

DEF7EA

DEDFF7

F7DEEB

Contrast Matrix WCAG 2.1 Contrast

F7F6DD	DBDDA8	9AAFA5	9099B3	D6EDF4
—	1.3 Fail	2.1 Fail	2.6 Fail	1.1 Fail
1.3 Fail	—	1.6 Fail	2.0 Fail	1.2 Fail
2.1 Fail	1.6 Fail	—	1.2 Fail	1.9 Fail
2.6 Fail	2.0 Fail	1.2 Fail	—	2.3 Fail
1.1 Fail	1.2 Fail	1.9 Fail	2.3 Fail	—

White BG

1.1Fail

1.4Fail

2.3Fail

2.8Fail

1.2Fail

Black BG

19.2AAA

14.9AAA

9.0AAA

7.4AAA

17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F7F7E3

DCDCB5

A3A3A7

9494AD

E0E0F2

Deuteranopia

F7F7E5

DCDCB8

A2A0A8

9393AB

DFDDF2

Tritanopia

F7E8E9

DBBFC1

9BA9AA

90A8A7

D7F1F1

Achromatopsia

F3F3F3

D6D6D6

A8A8A8

999999

E7E7E7

Shades & Tints Shades & Tints

#F7F6DD

Dark

Light

#DBDDA8

Dark

Light

#9AAFA5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7f6dd;
  --color-2: #dbdda8;
  --color-3: #9aafa5;
  --color-4: #9099b3;
  --color-5: #d6edf4;
}

SCSS

$color-1: #f7f6dd;
$color-2: #dbdda8;
$color-3: #9aafa5;
$color-4: #9099b3;
$color-5: #d6edf4;

TAILWIND

colors: {
  'brand-1': '#f7f6dd',
  'brand-2': '#dbdda8',
  'brand-3': '#9aafa5',
  'brand-4': '#9099b3',
  'brand-5': '#d6edf4',
}

RGB Array

[247, 246, 221], [219, 221, 168], [154, 175, 165], [144, 153, 179], [214, 237, 244]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7F6DD, #DBDDA8, #9AAFA5, #9099B3, #D6EDF4 is ideal for: health products, baby brands, fresh-style blogs. 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: #f7f6dd; --color-2: #dbdda8; --color-3: #9aafa5; --color-4: #9099b3; --color-5: #d6edf4. 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. 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