#7D8F75 + #B7B98A + #F4CF89 + #E0E791 + #D5F7B2 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7D8F75

Celadon · Gray · Olive Green

HEX

#7D8F75

RGB

rgb(125, 143, 117)

HSL

hsl(102, 10%, 51%)

HSB

hsb(102, 18%, 56%)

CMYK

cmyk(13%, 0%, 18%, 44%)

Oklch

oklch(62.8% 0.043 136.0)

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

#B7B98A

Fresh Green · Tan · Sunflower

HEX

#B7B98A

RGB

rgb(183, 185, 138)

HSL

hsl(63, 25%, 63%)

HSB

hsb(63, 25%, 73%)

CMYK

cmyk(1%, 0%, 25%, 27%)

Oklch

oklch(77.2% 0.064 109.8)

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

#F4CF89

Goose Yellow · Khaki · Warm Sun

HEX

#F4CF89

RGB

rgb(244, 207, 137)

HSL

hsl(39, 83%, 75%)

HSB

hsb(39, 44%, 96%)

CMYK

cmyk(0%, 15%, 44%, 4%)

Oklch

oklch(87.1% 0.097 82.7)

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

#E0E791

Fresh Green · Khaki · Sunflower

HEX

#E0E791

RGB

rgb(224, 231, 145)

HSL

hsl(65, 64%, 74%)

HSB

hsb(65, 37%, 91%)

CMYK

cmyk(3%, 0%, 37%, 9%)

Oklch

oklch(90.3% 0.109 112.4)

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

#D5F7B2

Emerald · Wheat · Mint Green

HEX

#D5F7B2

RGB

rgb(213, 247, 178)

HSL

hsl(90, 81%, 83%)

HSB

hsb(90, 28%, 97%)

CMYK

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

Oklch

oklch(93.5% 0.097 129.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7D8F75

87768F

Analogous

8A8F76

7D8F75

768F7B

Triadic

7D8F75

767D8F

8F767D

Split-Comp.

7D8F75

7B768F

8F768A

Tetradic

7D8F75

768A8F

87768F

8F7B76

Contrast Matrix WCAG 2.1 Contrast

7D8F75	B7B98A	F4CF89	E0E791	D5F7B2
—	1.7 Fail	2.3 Fail	2.6 Fail	2.9 Fail
1.7 Fail	—	1.4 Fail	1.6 Fail	1.7 Fail
2.3 Fail	1.4 Fail	—	1.1 Fail	1.3 Fail
2.6 Fail	1.6 Fail	1.1 Fail	—	1.1 Fail
2.9 Fail	1.7 Fail	1.3 Fail	1.1 Fail	—

White BG

3.5AA Large

2.0Fail

1.5Fail

1.3Fail

1.2Fail

Black BG

6.1AA

10.3AAA

14.1AAA

16.0AAA

17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

85857B

B8B895

E4E49A

E3E3A6

E4E4C3

Deuteranopia

84827D

B8B898

E6E99E

E3E2AB

E2DFC7

Tritanopia

7E8081

B79EA0

F2A7AA

E0B6BA

D7D0D3

Achromatopsia

878787

B3B3B3

D2D2D2

DBDBDB

E5E5E5

Shades & Tints Shades & Tints

#7D8F75

Dark

Light

#B7B98A

Dark

Light

#F4CF89

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7d8f75;
  --color-2: #b7b98a;
  --color-3: #f4cf89;
  --color-4: #e0e791;
  --color-5: #d5f7b2;
}

SCSS

$color-1: #7d8f75;
$color-2: #b7b98a;
$color-3: #f4cf89;
$color-4: #e0e791;
$color-5: #d5f7b2;

TAILWIND

colors: {
  'brand-1': '#7d8f75',
  'brand-2': '#b7b98a',
  'brand-3': '#f4cf89',
  'brand-4': '#e0e791',
  'brand-5': '#d5f7b2',
}

RGB Array

[125, 143, 117], [183, 185, 138], [244, 207, 137], [224, 231, 145], [213, 247, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #7D8F75, #B7B98A, #F4CF89, #E0E791, #D5F7B2 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: #7d8f75; --color-2: #b7b98a; --color-3: #f4cf89; --color-4: #e0e791; --color-5: #d5f7b2. 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 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