#F6FFFC + #F4E6EA + #D9C9CF + #AC9BA0 + #A8AAA9 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#F6FFFC

Jade · White · Glacier Blue

HEX

#F6FFFC

RGB

rgb(246, 255, 252)

HSL

hsl(160, 100%, 98%)

HSB

hsb(160, 4%, 100%)

CMYK

cmyk(4%, 0%, 1%, 0%)

Oklch

oklch(99.2% 0.010 174.3)

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

#F4E6EA

Rouge · Linen · Cherry Blossom

HEX

#F4E6EA

RGB

rgb(244, 230, 234)

HSL

hsl(343, 39%, 93%)

HSB

hsb(343, 6%, 96%)

CMYK

cmyk(0%, 6%, 4%, 4%)

Oklch

oklch(93.7% 0.016 358.1)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#D9C9CF

Rouge · LightGray · Cherry Blossom

HEX

#D9C9CF

RGB

rgb(217, 201, 207)

HSL

hsl(338, 17%, 82%)

HSB

hsb(338, 7%, 85%)

CMYK

cmyk(0%, 7%, 5%, 15%)

Oklch

oklch(85.1% 0.020 352.7)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#AC9BA0

Rouge · DarkGray · Silver Sand

HEX

#AC9BA0

RGB

rgb(172, 155, 160)

HSL

hsl(342, 9%, 64%)

HSB

hsb(342, 10%, 67%)

CMYK

cmyk(0%, 10%, 7%, 33%)

Oklch

oklch(70.6% 0.021 357.9)

Traditional「Rouge」· Paint「Silver Sand」· Creative Urban Concrete

#A8AAA9

Ash · DarkGray · Silver Sand

HEX

#A8AAA9

RGB

rgb(168, 170, 169)

HSL

hsl(150, 1%, 66%)

HSB

hsb(150, 1%, 67%)

CMYK

cmyk(1%, 0%, 1%, 33%)

Oklch

oklch(73.6% 0.003 165.0)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F6FFFC

FFF5F8

Analogous

F5FFF6

F6FFFC

F5FDFF

Triadic

F6FFFC

FCF5FF

FFFCF5

Split-Comp.

F6FFFC

FFF5FD

FFF7F5

Tetradic

F6FFFC

F7F5FF

FFF5F8

FDFFF5

Contrast Matrix WCAG 2.1 Contrast

F6FFFC	F4E6EA	D9C9CF	AC9BA0	A8AAA9
—	1.2 Fail	1.6 Fail	2.6 Fail	2.3 Fail
1.2 Fail	—	1.3 Fail	2.2 Fail	1.9 Fail
1.6 Fail	1.3 Fail	—	1.7 Fail	1.5 Fail
2.6 Fail	2.2 Fail	1.7 Fail	—	1.1 Fail
2.3 Fail	1.9 Fail	1.5 Fail	1.1 Fail	—

White BG

1.0Fail

1.2Fail

1.6Fail

2.6Fail

2.3Fail

Black BG

20.6AAA

17.4AAA

13.2AAA

8.0AAA

9.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FAFAFD

EEEEE9

D2D2CE

A5A49F

A9A9A9

Deuteranopia

F9F9FD

EFF0E9

D3D4CD

A6A79F

A9A9A9

Tritanopia

F6FDFD

F3E8E8

D8CCCC

AB9E9E

A8A9A9

Achromatopsia

FCFCFC

EBEBEB

CECECE

A1A1A1

A9A9A9

Shades & Tints Shades & Tints

#F6FFFC

Dark

Light

#F4E6EA

Dark

Light

#D9C9CF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f6fffc;
  --color-2: #f4e6ea;
  --color-3: #d9c9cf;
  --color-4: #ac9ba0;
  --color-5: #a8aaa9;
}

SCSS

$color-1: #f6fffc;
$color-2: #f4e6ea;
$color-3: #d9c9cf;
$color-4: #ac9ba0;
$color-5: #a8aaa9;

TAILWIND

colors: {
  'brand-1': '#f6fffc',
  'brand-2': '#f4e6ea',
  'brand-3': '#d9c9cf',
  'brand-4': '#ac9ba0',
  'brand-5': '#a8aaa9',
}

RGB Array

[246, 255, 252], [244, 230, 234], [217, 201, 207], [172, 155, 160], [168, 170, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F6FFFC, #F4E6EA, #D9C9CF, #AC9BA0, #A8AAA9 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: #f6fffc; --color-2: #f4e6ea; --color-3: #d9c9cf; --color-4: #ac9ba0; --color-5: #a8aaa9. 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 nature-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