#B17E49 + #B0A57C + #AEDAC1 + #D3E092 + #ECF2B3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B17E49

Ochre · Sienna · Amber Brown

HEX

#B17E49

RGB

rgb(177, 126, 73)

HSL

hsl(31, 42%, 49%)

HSB

hsb(31, 59%, 69%)

CMYK

cmyk(0%, 29%, 59%, 31%)

Oklch

oklch(63.3% 0.094 65.7)

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

#B0A57C

Ginger · Tan · Sunflower

HEX

#B0A57C

RGB

rgb(176, 165, 124)

HSL

hsl(47, 25%, 59%)

HSB

hsb(47, 30%, 69%)

CMYK

cmyk(0%, 6%, 30%, 31%)

Oklch

oklch(72.1% 0.057 94.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#AEDAC1

Celadon · Silver · Apple Green

HEX

#AEDAC1

RGB

rgb(174, 218, 193)

HSL

hsl(146, 37%, 77%)

HSB

hsb(146, 20%, 85%)

CMYK

cmyk(20%, 0%, 11%, 15%)

Oklch

oklch(85.0% 0.058 160.0)

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

#D3E092

Willow Green · Khaki · Apple Green

HEX

#D3E092

RGB

rgb(211, 224, 146)

HSL

hsl(70, 56%, 73%)

HSB

hsb(70, 35%, 88%)

CMYK

cmyk(6%, 0%, 35%, 12%)

Oklch

oklch(87.9% 0.101 116.2)

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

#ECF2B3

Fresh Green · Wheat · Lemon Cream

HEX

#ECF2B3

RGB

rgb(236, 242, 179)

HSL

hsl(66, 71%, 83%)

HSB

hsb(66, 26%, 95%)

CMYK

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

Oklch

oklch(94.2% 0.081 112.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B17E49

487BB1

Analogous

B14A48

B17E49

B0B148

Triadic

B17E49

48B17F

7F48B1

Split-Comp.

B17E49

48B0B1

4A48B1

Tetradic

B17E49

48B14A

487BB1

B148B0

Contrast Matrix WCAG 2.1 Contrast

B17E49	B0A57C	AEDAC1	D3E092	ECF2B3
—	1.4 Fail	2.3 Fail	2.5 Fail	3.0 AA Large
1.4 Fail	—	1.6 Fail	1.7 Fail	2.1 Fail
2.3 Fail	1.6 Fail	—	1.1 Fail	1.3 Fail
2.5 Fail	1.7 Fail	1.1 Fail	—	1.2 Fail
3.0 AA Large	2.1 Fail	1.3 Fail	1.2 Fail	—

White BG

3.5AA Large

2.5Fail

1.5Fail

1.4Fail

1.2Fail

Black BG

5.9AA

8.5AAA

13.6AAA

14.8AAA

17.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9B9A56

ABAB86

C1C1C7

D9D9A5

EFEFC2

Deuteranopia

9EA259

ACAD88

BFBBC9

D8D7A9

EEEEC6

Tritanopia

AE6062

AF8E8F

B0CCCD

D4B4B7

ECCED1

Achromatopsia

878787

A4A4A4

CACACA

D3D3D3

E9E9E9

Shades & Tints Shades & Tints

#B17E49

Dark

Light

#B0A57C

Dark

Light

#AEDAC1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b17e49;
  --color-2: #b0a57c;
  --color-3: #aedac1;
  --color-4: #d3e092;
  --color-5: #ecf2b3;
}

SCSS

$color-1: #b17e49;
$color-2: #b0a57c;
$color-3: #aedac1;
$color-4: #d3e092;
$color-5: #ecf2b3;

TAILWIND

colors: {
  'brand-1': '#b17e49',
  'brand-2': '#b0a57c',
  'brand-3': '#aedac1',
  'brand-4': '#d3e092',
  'brand-5': '#ecf2b3',
}

RGB Array

[177, 126, 73], [176, 165, 124], [174, 218, 193], [211, 224, 146], [236, 242, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B17E49, #B0A57C, #AEDAC1, #D3E092, #ECF2B3 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: #b17e49; --color-2: #b0a57c; --color-3: #aedac1; --color-4: #d3e092; --color-5: #ecf2b3. 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