#AE8F61 + #B2CAAA + #FFF5D7 + #FDB092 + #9E8E6A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AE8F61

Ginger · Gray · Warm Sun

HEX

#AE8F61

RGB

rgb(174, 143, 97)

HSL

hsl(36, 32%, 53%)

HSB

hsb(36, 44%, 68%)

CMYK

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

Oklch

oklch(66.8% 0.073 76.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#B2CAAA

Celadon · Silver · Apple Green

HEX

#B2CAAA

RGB

rgb(178, 202, 170)

HSL

hsl(105, 23%, 73%)

HSB

hsb(105, 16%, 79%)

CMYK

cmyk(12%, 0%, 16%, 21%)

Oklch

oklch(81.2% 0.051 137.9)

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

#FFF5D7

Goose Yellow · Beige · Lemon Cream

HEX

#FFF5D7

RGB

rgb(255, 245, 215)

HSL

hsl(45, 100%, 92%)

HSB

hsb(45, 16%, 100%)

CMYK

cmyk(0%, 4%, 16%, 0%)

Oklch

oklch(97.0% 0.041 91.7)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#FDB092

Apricot · LightSalmon · Peach Orange

HEX

#FDB092

RGB

rgb(253, 176, 146)

HSL

hsl(17, 96%, 78%)

HSB

hsb(17, 42%, 99%)

CMYK

cmyk(0%, 30%, 42%, 1%)

Oklch

oklch(82.4% 0.100 42.1)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#9E8E6A

Ginger · Gray · Sunflower

HEX

#9E8E6A

RGB

rgb(158, 142, 106)

HSL

hsl(42, 21%, 52%)

HSB

hsb(42, 33%, 62%)

CMYK

cmyk(0%, 10%, 33%, 38%)

Oklch

oklch(65.2% 0.054 86.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AE8F61

617FAE

Analogous

AE6861

AE8F61

A6AE61

Triadic

AE8F61

61AE8F

8F61AE

Split-Comp.

AE8F61

61A6AE

6861AE

Tetradic

AE8F61

61AE68

617FAE

AE61A6

Contrast Matrix WCAG 2.1 Contrast

AE8F61	B2CAAA	FFF5D7	FDB092	9E8E6A
—	1.7 Fail	2.8 Fail	1.7 Fail	1.1 Fail
1.7 Fail	—	1.6 Fail	1.0 Fail	1.8 Fail
2.8 Fail	1.6 Fail	—	1.6 Fail	3.0 Fail
1.7 Fail	1.0 Fail	1.6 Fail	—	1.8 Fail
1.1 Fail	1.8 Fail	3.0 Fail	1.8 Fail	—

White BG

3.0AA Large

1.8Fail

1.1Fail

1.8Fail

3.2AA Large

Black BG

6.9AA

11.9AAA

19.3AAA

11.8AAA

6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A1A06C

BCBDB2

FBFBDE

DCDB99

979773

Deuteranopia

A2A56F

BBB9B4

FBFCE0

E0E69B

989975

Tritanopia

AC7577

B3B8B9

FFE4E5

F99FA0

9D7A7B

Achromatopsia

939393

BFBFBF

F5F5F5

C4C4C4

8F8F8F

Shades & Tints Shades & Tints

#AE8F61

Dark

Light

#B2CAAA

Dark

Light

#FFF5D7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ae8f61;
  --color-2: #b2caaa;
  --color-3: #fff5d7;
  --color-4: #fdb092;
  --color-5: #9e8e6a;
}

SCSS

$color-1: #ae8f61;
$color-2: #b2caaa;
$color-3: #fff5d7;
$color-4: #fdb092;
$color-5: #9e8e6a;

TAILWIND

colors: {
  'brand-1': '#ae8f61',
  'brand-2': '#b2caaa',
  'brand-3': '#fff5d7',
  'brand-4': '#fdb092',
  'brand-5': '#9e8e6a',
}

RGB Array

[174, 143, 97], [178, 202, 170], [255, 245, 215], [253, 176, 146], [158, 142, 106]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AE8F61, #B2CAAA, #FFF5D7, #FDB092, #9E8E6A 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: #ae8f61; --color-2: #b2caaa; --color-3: #fff5d7; --color-4: #fdb092; --color-5: #9e8e6a. 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