#D8F097 + #9EDB9A + #B1BF62 + #B3884D + #735949 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D8F097

Willow Green · Khaki · Apple Green

HEX

#D8F097

RGB

rgb(216, 240, 151)

HSL

hsl(76, 75%, 77%)

HSB

hsb(76, 37%, 94%)

CMYK

cmyk(10%, 0%, 37%, 6%)

Oklch

oklch(91.7% 0.116 121.0)

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

#9EDB9A

Celadon · LightGreen · Apple Green

HEX

#9EDB9A

RGB

rgb(158, 219, 154)

HSL

hsl(116, 47%, 73%)

HSB

hsb(116, 30%, 86%)

CMYK

cmyk(28%, 0%, 30%, 14%)

Oklch

oklch(83.3% 0.109 143.0)

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

#B1BF62

Autumn Sage · Tan · Sunflower

HEX

#B1BF62

RGB

rgb(177, 191, 98)

HSL

hsl(69, 42%, 57%)

HSB

hsb(69, 49%, 75%)

CMYK

cmyk(7%, 0%, 49%, 25%)

Oklch

oklch(77.4% 0.119 116.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#B3884D

Ochre · Chocolate · Amber Brown

HEX

#B3884D

RGB

rgb(179, 136, 77)

HSL

hsl(35, 40%, 50%)

HSB

hsb(35, 57%, 70%)

CMYK

cmyk(0%, 24%, 57%, 30%)

Oklch

oklch(65.6% 0.093 73.7)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#735949

Tangerine · DimGray · Amber Brown

HEX

#735949

RGB

rgb(115, 89, 73)

HSL

hsl(23, 22%, 37%)

HSB

hsb(23, 37%, 45%)

CMYK

cmyk(0%, 23%, 37%, 55%)

Oklch

oklch(48.6% 0.042 53.1)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8F097

B098F0

Analogous

F0DC98

D8F097

ADF098

Triadic

D8F097

98D9F0

F098D9

Split-Comp.

D8F097

98ADF0

DC98F0

Tetradic

D8F097

98F0DC

B098F0

F098AD

Contrast Matrix WCAG 2.1 Contrast

D8F097	9EDB9A	B1BF62	B3884D	735949
—	1.3 Fail	1.6 Fail	2.6 Fail	5.2 AA
1.3 Fail	—	1.2 Fail	2.0 Fail	4.0 AA Large
1.6 Fail	1.2 Fail	—	1.6 Fail	3.2 AA Large
2.6 Fail	2.0 Fail	1.6 Fail	—	2.0 Fail
5.2 AA	4.0 AA Large	3.2 AA Large	2.0 Fail	—

White BG

1.2Fail

1.6Fail

2.0Fail

3.2AA Large

6.5AA

Black BG

16.8AAA

13.1AAA

10.5AAA

6.5AA

3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E3AD

B8B9AA

B7B779

A0A05B

68684D

Deuteranopia

E1DFB2

B5B0AE

B6B57E

A3A65F

696B4E

Tritanopia

D9BEC1

A1B6B9

B28A8E

B16769

725051

Achromatopsia

DFDFDF

C1C1C1

B0B0B0

8E8E8E

5F5F5F

Shades & Tints Shades & Tints

#D8F097

Dark

Light

#9EDB9A

Dark

Light

#B1BF62

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8f097;
  --color-2: #9edb9a;
  --color-3: #b1bf62;
  --color-4: #b3884d;
  --color-5: #735949;
}

SCSS

$color-1: #d8f097;
$color-2: #9edb9a;
$color-3: #b1bf62;
$color-4: #b3884d;
$color-5: #735949;

TAILWIND

colors: {
  'brand-1': '#d8f097',
  'brand-2': '#9edb9a',
  'brand-3': '#b1bf62',
  'brand-4': '#b3884d',
  'brand-5': '#735949',
}

RGB Array

[216, 240, 151], [158, 219, 154], [177, 191, 98], [179, 136, 77], [115, 89, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #D8F097, #9EDB9A, #B1BF62, #B3884D, #735949 is ideal for: corporate websites, product showcases, portfolios. 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: #d8f097; --color-2: #9edb9a; --color-3: #b1bf62; --color-4: #b3884d; --color-5: #735949. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 warm-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