#F0E6B4 + #F3CFAB + #F7B8A2 + #CAB5A0 + #B0B49E · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#F0E6B4

Fresh Green · Wheat · Lemon Cream

HEX

#F0E6B4

RGB

rgb(240, 230, 180)

HSL

hsl(50, 67%, 82%)

HSB

hsb(50, 25%, 94%)

CMYK

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

Oklch

oklch(92.1% 0.066 98.1)

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

#F3CFAB

Goose Yellow · Wheat · Peach Orange

HEX

#F3CFAB

RGB

rgb(243, 207, 171)

HSL

hsl(30, 75%, 81%)

HSB

hsb(30, 30%, 95%)

CMYK

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

Oklch

oklch(87.6% 0.063 66.9)

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

#F7B8A2

Apricot · LightPink · Peach Orange

HEX

#F7B8A2

RGB

rgb(247, 184, 162)

HSL

hsl(16, 84%, 80%)

HSB

hsb(16, 34%, 97%)

CMYK

cmyk(0%, 26%, 34%, 3%)

Oklch

oklch(83.5% 0.080 40.1)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#CAB5A0

Goose Yellow · Tan · Warm Sun

HEX

#CAB5A0

RGB

rgb(202, 181, 160)

HSL

hsl(30, 28%, 71%)

HSB

hsb(30, 21%, 79%)

CMYK

cmyk(0%, 10%, 21%, 21%)

Oklch

oklch(78.5% 0.038 67.2)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#B0B49E

Willow Green · DarkGray · Apple Green

HEX

#B0B49E

RGB

rgb(176, 180, 158)

HSL

hsl(71, 13%, 66%)

HSB

hsb(71, 12%, 71%)

CMYK

cmyk(2%, 0%, 12%, 29%)

Oklch

oklch(76.1% 0.031 115.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0E6B4

B2BDF0

Analogous

F0C7B2

F0E6B4

DBF0B2

Triadic

F0E6B4

B2F0E6

E6B2F0

Split-Comp.

F0E6B4

B2DBF0

C7B2F0

Tetradic

F0E6B4

B2F0C7

B2BDF0

F0B2DB

Contrast Matrix WCAG 2.1 Contrast

F0E6B4	F3CFAB	F7B8A2	CAB5A0	B0B49E
—	1.2 Fail	1.4 Fail	1.6 Fail	1.7 Fail
1.2 Fail	—	1.2 Fail	1.3 Fail	1.5 Fail
1.4 Fail	1.2 Fail	—	1.2 Fail	1.2 Fail
1.6 Fail	1.3 Fail	1.2 Fail	—	1.1 Fail
1.7 Fail	1.5 Fail	1.2 Fail	1.1 Fail	—

White BG

1.3Fail

1.5Fail

1.7Fail

2.0Fail

2.1Fail

Black BG

16.7AAA

14.3AAA

12.3AAA

10.6AAA

9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECC0

E3E3B4

DCDBA7

C1C1A5

B2B2A3

Deuteranopia

ECEDC3

E6E8B6

DFE4A9

C2C4A6

B2B1A5

Tritanopia

F0CACC

F1BBBC

F4ACAC

C9A9AA

B0A8A8

Achromatopsia

E3E3E3

D6D6D6

C8C8C8

B9B9B9

B0B0B0

Shades & Tints Shades & Tints

#F0E6B4

Dark

Light

#F3CFAB

Dark

Light

#F7B8A2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0e6b4;
  --color-2: #f3cfab;
  --color-3: #f7b8a2;
  --color-4: #cab5a0;
  --color-5: #b0b49e;
}

SCSS

$color-1: #f0e6b4;
$color-2: #f3cfab;
$color-3: #f7b8a2;
$color-4: #cab5a0;
$color-5: #b0b49e;

TAILWIND

colors: {
  'brand-1': '#f0e6b4',
  'brand-2': '#f3cfab',
  'brand-3': '#f7b8a2',
  'brand-4': '#cab5a0',
  'brand-5': '#b0b49e',
}

RGB Array

[240, 230, 180], [243, 207, 171], [247, 184, 162], [202, 181, 160], [176, 180, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F0E6B4, #F3CFAB, #F7B8A2, #CAB5A0, #B0B49E 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: #f0e6b4; --color-2: #f3cfab; --color-3: #f7b8a2; --color-4: #cab5a0; --color-5: #b0b49e. 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