#B1B182 + #FF614D + #7F8266 + #EEEDA0 + #D6DDB2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B1B182

Autumn Sage · Tan · Sunflower

HEX

#B1B182

RGB

rgb(177, 177, 130)

HSL

hsl(60, 23%, 60%)

HSB

hsb(60, 27%, 69%)

CMYK

cmyk(0%, 0%, 27%, 31%)

Oklch

oklch(74.9% 0.064 107.8)

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

#FF614D

Peach Pink · Tomato · Coral Red

HEX

#FF614D

RGB

rgb(255, 97, 77)

HSL

hsl(7, 100%, 65%)

HSB

hsb(7, 70%, 100%)

CMYK

cmyk(0%, 62%, 70%, 0%)

Oklch

oklch(69.5% 0.196 30.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#7F8266

Autumn Sage · Gray · Honey Gold

HEX

#7F8266

RGB

rgb(127, 130, 102)

HSL

hsl(66, 12%, 45%)

HSB

hsb(66, 22%, 51%)

CMYK

cmyk(2%, 0%, 22%, 49%)

Oklch

oklch(59.6% 0.041 112.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#EEEDA0

Fresh Green · Khaki · Lemon Cream

HEX

#EEEDA0

RGB

rgb(238, 237, 160)

HSL

hsl(59, 70%, 78%)

HSB

hsb(59, 33%, 93%)

CMYK

cmyk(0%, 0%, 33%, 7%)

Oklch

oklch(92.9% 0.097 107.5)

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

#D6DDB2

Willow Green · Wheat · Apple Green

HEX

#D6DDB2

RGB

rgb(214, 221, 178)

HSL

hsl(70, 39%, 78%)

HSB

hsb(70, 19%, 87%)

CMYK

cmyk(3%, 0%, 19%, 13%)

Oklch

oklch(88.1% 0.058 115.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1B182

8282B0

Analogous

B09982

B1B182

99B082

Triadic

B1B182

82B0B0

B082B0

Split-Comp.

B1B182

8299B0

9982B0

Tetradic

B1B182

82B099

8282B0

B08299

Contrast Matrix WCAG 2.1 Contrast

B1B182	FF614D	7F8266	EEEDA0	D6DDB2
—	1.3 Fail	1.8 Fail	1.8 Fail	1.6 Fail
1.3 Fail	—	1.3 Fail	2.4 Fail	2.1 Fail
1.8 Fail	1.3 Fail	—	3.3 AA Large	2.8 Fail
1.8 Fail	2.4 Fail	3.3 AA Large	—	1.2 Fail
1.6 Fail	2.1 Fail	2.8 Fail	1.2 Fail	—

White BG

2.2Fail

3.0Fail

4.0AA Large

1.2Fail

1.4Fail

Black BG

9.5AAA

7.1AAA

5.3AA

17.3AAA

14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B18D

BBB952

80806D

EEEEB3

D9D9BC

Deuteranopia

B1B190

C4D053

80806E

EEEEB7

D9D8BF

Tritanopia

B19698

F75657

7F7273

EEC1C5

D6C5C6

Achromatopsia

ACACAC

8E8E8E

7E7E7E

E5E5E5

D6D6D6

Shades & Tints Shades & Tints

#B1B182

Dark

Light

#FF614D

Dark

Light

#7F8266

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1b182;
  --color-2: #ff614d;
  --color-3: #7f8266;
  --color-4: #eeeda0;
  --color-5: #d6ddb2;
}

SCSS

$color-1: #b1b182;
$color-2: #ff614d;
$color-3: #7f8266;
$color-4: #eeeda0;
$color-5: #d6ddb2;

TAILWIND

colors: {
  'brand-1': '#b1b182',
  'brand-2': '#ff614d',
  'brand-3': '#7f8266',
  'brand-4': '#eeeda0',
  'brand-5': '#d6ddb2',
}

RGB Array

[177, 177, 130], [255, 97, 77], [127, 130, 102], [238, 237, 160], [214, 221, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B1B182, #FF614D, #7F8266, #EEEDA0, #D6DDB2 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: #b1b182; --color-2: #ff614d; --color-3: #7f8266; --color-4: #eeeda0; --color-5: #d6ddb2. 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 general-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