#96B296 + #98BB98 + #F4F7EC + #FEFAD1 + #F8F0C6 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#96B296

Celadon · DarkSeaGreen · Apple Green

HEX

#96B296

RGB

rgb(150, 178, 150)

HSL

hsl(120, 15%, 64%)

HSB

hsb(120, 16%, 70%)

CMYK

cmyk(16%, 0%, 16%, 30%)

Oklch

oklch(73.5% 0.050 145.0)

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

#98BB98

Celadon · DarkSeaGreen · Apple Green

HEX

#98BB98

RGB

rgb(152, 187, 152)

HSL

hsl(120, 20%, 66%)

HSB

hsb(120, 19%, 73%)

CMYK

cmyk(19%, 0%, 19%, 27%)

Oklch

oklch(75.7% 0.062 144.9)

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

#F4F7EC

Willow Green · Linen · Mint Green

HEX

#F4F7EC

RGB

rgb(244, 247, 236)

HSL

hsl(76, 41%, 95%)

HSB

hsb(76, 4%, 97%)

CMYK

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

Oklch

oklch(97.1% 0.015 119.1)

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

#FEFAD1

Fresh Green · Beige · Lemon Cream

HEX

#FEFAD1

RGB

rgb(254, 250, 209)

HSL

hsl(55, 96%, 91%)

HSB

hsb(55, 18%, 100%)

CMYK

cmyk(0%, 2%, 18%, 0%)

Oklch

oklch(97.8% 0.053 102.7)

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

#F8F0C6

Fresh Green · Bisque · Lemon Cream

HEX

#F8F0C6

RGB

rgb(248, 240, 198)

HSL

hsl(50, 78%, 87%)

HSB

hsb(50, 20%, 97%)

CMYK

cmyk(0%, 3%, 20%, 3%)

Oklch

oklch(95.1% 0.055 98.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

96B296

B195B1

Analogous

A3B195

96B296

95B1A3

Triadic

96B296

9595B1

B19595

Split-Comp.

96B296

A395B1

B195A3

Tetradic

96B296

95A3B1

B195B1

B1A395

Contrast Matrix WCAG 2.1 Contrast

96B296	98BB98	F4F7EC	FEFAD1	F8F0C6
—	1.1 Fail	2.1 Fail	2.2 Fail	2.0 Fail
1.1 Fail	—	2.0 Fail	2.0 Fail	1.8 Fail
2.1 Fail	2.0 Fail	—	1.0 Fail	1.1 Fail
2.2 Fail	2.0 Fail	1.0 Fail	—	1.1 Fail
2.0 Fail	1.8 Fail	1.1 Fail	1.1 Fail	—

White BG

2.3Fail

2.1Fail

1.1Fail

Black BG

9.1AAA

9.9AAA

19.4AAA

19.8AAA

18.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A29D

A7A7A0

F5F5EF

FCFCDB

F5F4D0

Deuteranopia

A19E9E

A5A3A3

F5F5EF

FDFDDD

F5F6D3

Tritanopia

97A2A3

9AA7A9

F4F1F1

FEE3E4

F8D8DA

Achromatopsia

A6A6A6

ADADAD

F5F5F5

F7F7F7

EEEEEE

Shades & Tints Shades & Tints

#96B296

Dark

Light

#98BB98

Dark

Light

#F4F7EC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #96b296;
  --color-2: #98bb98;
  --color-3: #f4f7ec;
  --color-4: #fefad1;
  --color-5: #f8f0c6;
}

SCSS

$color-1: #96b296;
$color-2: #98bb98;
$color-3: #f4f7ec;
$color-4: #fefad1;
$color-5: #f8f0c6;

TAILWIND

colors: {
  'brand-1': '#96b296',
  'brand-2': '#98bb98',
  'brand-3': '#f4f7ec',
  'brand-4': '#fefad1',
  'brand-5': '#f8f0c6',
}

RGB Array

[150, 178, 150], [152, 187, 152], [244, 247, 236], [254, 250, 209], [248, 240, 198]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #96B296, #98BB98, #F4F7EC, #FEFAD1, #F8F0C6 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: #96b296; --color-2: #98bb98; --color-3: #f4f7ec; --color-4: #fefad1; --color-5: #f8f0c6. 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