#779D83 + #B1D281 + #F3F3E3 + #F3F3B3 + #D6AD75 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#779D83

Celadon · LightSlateGray · Olive Green

HEX

#779D83

RGB

rgb(119, 157, 131)

HSL

hsl(139, 16%, 54%)

HSB

hsb(139, 24%, 62%)

CMYK

cmyk(24%, 0%, 17%, 38%)

Oklch

oklch(66.0% 0.057 154.7)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#B1D281

Willow Green · DarkSeaGreen · Apple Green

HEX

#B1D281

RGB

rgb(177, 210, 129)

HSL

hsl(84, 47%, 66%)

HSB

hsb(84, 39%, 82%)

CMYK

cmyk(16%, 0%, 39%, 18%)

Oklch

oklch(82.1% 0.112 126.8)

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

#F3F3E3

Fresh Green · Beige · Lemon Cream

HEX

#F3F3E3

RGB

rgb(243, 243, 227)

HSL

hsl(60, 40%, 92%)

HSB

hsb(60, 7%, 95%)

CMYK

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

Oklch

oklch(96.0% 0.021 106.8)

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

#F3F3B3

Fresh Green · Wheat · Lemon Cream

HEX

#F3F3B3

RGB

rgb(243, 243, 179)

HSL

hsl(60, 73%, 83%)

HSB

hsb(60, 26%, 95%)

CMYK

cmyk(0%, 0%, 26%, 5%)

Oklch

oklch(94.9% 0.082 107.9)

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

#D6AD75

Ginger · BurlyWood · Warm Sun

HEX

#D6AD75

RGB

rgb(214, 173, 117)

HSL

hsl(35, 54%, 65%)

HSB

hsb(35, 45%, 84%)

CMYK

cmyk(0%, 19%, 45%, 16%)

Oklch

oklch(77.2% 0.087 74.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

779D83

9C7791

Analogous

7E9C77

779D83

779C96

Triadic

779D83

83779C

9C8377

Split-Comp.

779D83

96779C

9C777E

Tetradic

779D83

777E9C

9C7791

9C9677

Contrast Matrix WCAG 2.1 Contrast

779D83	B1D281	F3F3E3	F3F3B3	D6AD75
—	1.8 Fail	2.7 Fail	2.6 Fail	1.5 Fail
1.8 Fail	—	1.5 Fail	1.5 Fail	1.2 Fail
2.7 Fail	1.5 Fail	—	1.0 Fail	1.9 Fail
2.6 Fail	1.5 Fail	1.0 Fail	—	1.8 Fail
1.5 Fail	1.2 Fail	1.9 Fail	1.8 Fail	—

White BG

3.0AA Large

1.7Fail

1.1Fail

2.1Fail

Black BG

6.9AA

12.4AAA

18.7AAA

18.3AAA

10.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

878889

BFC095

F3F3E7

F3F3C2

C4C483

Deuteranopia

85828B

BDBB99

F3F3E8

F3F3C6

C7CA86

Tritanopia

798E8F

B3A4A7

F3EAEB

F3CFD1

D48D90

Achromatopsia

8F8F8F

BFBFBF

F1F1F1

ECECEC

B3B3B3

Shades & Tints Shades & Tints

#779D83

Dark

Light

#B1D281

Dark

Light

#F3F3E3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #779d83;
  --color-2: #b1d281;
  --color-3: #f3f3e3;
  --color-4: #f3f3b3;
  --color-5: #d6ad75;
}

SCSS

$color-1: #779d83;
$color-2: #b1d281;
$color-3: #f3f3e3;
$color-4: #f3f3b3;
$color-5: #d6ad75;

TAILWIND

colors: {
  'brand-1': '#779d83',
  'brand-2': '#b1d281',
  'brand-3': '#f3f3e3',
  'brand-4': '#f3f3b3',
  'brand-5': '#d6ad75',
}

RGB Array

[119, 157, 131], [177, 210, 129], [243, 243, 227], [243, 243, 179], [214, 173, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #779D83, #B1D281, #F3F3E3, #F3F3B3, #D6AD75 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: #779d83; --color-2: #b1d281; --color-3: #f3f3e3; --color-4: #f3f3b3; --color-5: #d6ad75. 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