← Back to Editor

#F7E4CF · #FCC2B5 · #BB8E90 · #643A4A · #A2B7A9

nature

A 5-color nature palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#F7E4CF

Goose Yellow · Bisque · Peach Orange

HEX
#F7E4CF
RGB
rgb(247, 228, 207)
HSL
hsl(32, 71%, 89%)
HSB
hsb(32, 16%, 97%)
CMYK
cmyk(0%, 8%, 16%, 3%)
Oklch
oklch(92.9% 0.035 70.2)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FCC2B5

Peach Pink · LightPink · Cherry Blossom

HEX
#FCC2B5
RGB
rgb(252, 194, 181)
HSL
hsl(11, 92%, 85%)
HSB
hsb(11, 28%, 99%)
CMYK
cmyk(0%, 23%, 28%, 1%)
Oklch
oklch(86.3% 0.069 32.9)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#BB8E90

Peach Pink · DarkGray · Coral Red

HEX
#BB8E90
RGB
rgb(187, 142, 144)
HSL
hsl(357, 25%, 65%)
HSB
hsb(357, 24%, 73%)
CMYK
cmyk(0%, 24%, 23%, 27%)
Oklch
oklch(69.0% 0.055 15.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#643A4A

Dark Violet · DimGray · Camellia

HEX
#643A4A
RGB
rgb(100, 58, 74)
HSL
hsl(337, 27%, 31%)
HSB
hsb(337, 42%, 39%)
CMYK
cmyk(0%, 42%, 26%, 61%)
Oklch
oklch(40.5% 0.063 355.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#A2B7A9

Celadon · DarkGray · Apple Green

HEX
#A2B7A9
RGB
rgb(162, 183, 169)
HSL
hsl(140, 13%, 68%)
HSB
hsb(140, 11%, 72%)
CMYK
cmyk(11%, 0%, 8%, 28%)
Oklch
oklch(75.9% 0.030 156.4)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7E4CF
CFE2F7

Analogous

F7D0CF
F7E4CF
F6F7CF

Triadic

F7E4CF
CFF7E4
E4CFF7

Split-Comp.

F7E4CF
CFF6F7
D0CFF7

Tetradic

F7E4CF
CFF7D0
CFE2F7
F7CFF6

Contrast Matrix WCAG 2.1 Contrast

F7E4CF
FCC2B5
BB8E90
643A4A
A2B7A9
—
1.3
Fail
2.3
Fail
7.5
AAA
1.7
Fail
1.3
Fail
—
1.8
Fail
6.0
AA
1.4
Fail
2.3
Fail
1.8
Fail
—
3.3
AA Large
1.3
Fail
7.5
AAA
6.0
AA
3.3
AA Large
—
4.4
AA Large
1.7
Fail
1.4
Fail
1.3
Fail
4.4
AA Large
—
White BG
1.2Fail
1.6Fail
2.8Fail
9.4AAA
2.1Fail
Black BG
17.0AAA
13.5AAA
7.4AAA
2.2Fail
9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEFD4
E3E2B8
A8A790
525146
ABABAC

Deuteranopia

F0F1D5
E6EBB9
AAAE8F
545745
AAA8AD

Tritanopia

F6D8D9
F9BBBB
B98F8F
624342
A3AFB0

Achromatopsia

E7E7E7
D2D2D2
9C9C9C
484848
AFAFAF

Shades & Tints Shades & Tints

#F7E4CF

Dark
Light

#FCC2B5

Dark
Light

#BB8E90

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7e4cf;
  --color-2: #fcc2b5;
  --color-3: #bb8e90;
  --color-4: #643a4a;
  --color-5: #a2b7a9;
}

SCSS

$color-1: #f7e4cf;
$color-2: #fcc2b5;
$color-3: #bb8e90;
$color-4: #643a4a;
$color-5: #a2b7a9;

TAILWIND

colors: {
  'brand-1': '#f7e4cf',
  'brand-2': '#fcc2b5',
  'brand-3': '#bb8e90',
  'brand-4': '#643a4a',
  'brand-5': '#a2b7a9',
}

RGB Array

[247, 228, 207], [252, 194, 181], [187, 142, 144], [100, 58, 74], [162, 183, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F7E4CF, #FCC2B5, #BB8E90, #643A4A, #A2B7A9 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: #f7e4cf; --color-2: #fcc2b5; --color-3: #bb8e90; --color-4: #643a4a; --color-5: #a2b7a9. 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 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