#AAA58F + #B4B498 + #D5CA8C + #E5C562 + #F5DC78 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AAA58F

Ginger · DarkGray · Sunflower

HEX

#AAA58F

RGB

rgb(170, 165, 143)

HSL

hsl(49, 14%, 61%)

HSB

hsb(49, 16%, 67%)

CMYK

cmyk(0%, 3%, 16%, 33%)

Oklch

oklch(72.0% 0.031 96.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#B4B498

Fresh Green · DarkGray · Sunflower

HEX

#B4B498

RGB

rgb(180, 180, 152)

HSL

hsl(60, 16%, 65%)

HSB

hsb(60, 16%, 71%)

CMYK

cmyk(0%, 0%, 16%, 29%)

Oklch

oklch(76.2% 0.039 107.3)

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

#D5CA8C

Fresh Green · BurlyWood · Sunflower

HEX

#D5CA8C

RGB

rgb(213, 202, 140)

HSL

hsl(51, 46%, 69%)

HSB

hsb(51, 34%, 84%)

CMYK

cmyk(0%, 5%, 34%, 16%)

Oklch

oklch(83.3% 0.081 99.3)

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

#E5C562

Ginger · SandyBrown · Sunflower

HEX

#E5C562

RGB

rgb(229, 197, 98)

HSL

hsl(45, 72%, 64%)

HSB

hsb(45, 57%, 90%)

CMYK

cmyk(0%, 14%, 57%, 10%)

Oklch

oklch(83.1% 0.124 91.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#F5DC78

Goose Yellow · Khaki · Sunflower

HEX

#F5DC78

RGB

rgb(245, 220, 120)

HSL

hsl(48, 86%, 72%)

HSB

hsb(48, 51%, 96%)

CMYK

cmyk(0%, 10%, 51%, 4%)

Oklch

oklch(89.5% 0.124 95.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AAA58F

8E93A9

Analogous

A9968E

AAA58F

A1A98E

Triadic

AAA58F

8EA9A4

A48EA9

Split-Comp.

AAA58F

8EA1A9

968EA9

Tetradic

AAA58F

8EA996

8E93A9

A98EA1

Contrast Matrix WCAG 2.1 Contrast

AAA58F	B4B498	D5CA8C	E5C562	F5DC78
—	1.2 Fail	1.5 Fail	1.5 Fail	1.8 Fail
1.2 Fail	—	1.3 Fail	1.3 Fail	1.6 Fail
1.5 Fail	1.3 Fail	—	1.0 Fail	1.2 Fail
1.5 Fail	1.3 Fail	1.0 Fail	—	1.2 Fail
1.8 Fail	1.6 Fail	1.2 Fail	1.2 Fail	—

White BG

2.5Fail

2.1Fail

1.7Fail

1.4Fail

Black BG

8.5AAA

9.9AAA

12.7AAA

12.5AAA

15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A894

B4B49F

D0D09B

D7D77A

EAEA90

Deuteranopia

A8A996

B4B4A0

D1D29F

D9DB80

ECEE96

Tritanopia

AA9999

B4A4A5

D4A7A9

E38D91

F4A3A8

Achromatopsia

A4A4A4

B1B1B1

C6C6C6

C3C3C3

D8D8D8

Shades & Tints Shades & Tints

#AAA58F

Dark

Light

#B4B498

Dark

Light

#D5CA8C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #aaa58f;
  --color-2: #b4b498;
  --color-3: #d5ca8c;
  --color-4: #e5c562;
  --color-5: #f5dc78;
}

SCSS

$color-1: #aaa58f;
$color-2: #b4b498;
$color-3: #d5ca8c;
$color-4: #e5c562;
$color-5: #f5dc78;

TAILWIND

colors: {
  'brand-1': '#aaa58f',
  'brand-2': '#b4b498',
  'brand-3': '#d5ca8c',
  'brand-4': '#e5c562',
  'brand-5': '#f5dc78',
}

RGB Array

[170, 165, 143], [180, 180, 152], [213, 202, 140], [229, 197, 98], [245, 220, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AAA58F, #B4B498, #D5CA8C, #E5C562, #F5DC78 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: #aaa58f; --color-2: #b4b498; --color-3: #d5ca8c; --color-4: #e5c562; --color-5: #f5dc78. 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