#A97E6D + #AA9B7C + #BEC196 + #C0D7A3 + #F3FFB6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A97E6D

Tangerine · Gray · Warm Sun

HEX

#A97E6D

RGB

rgb(169, 126, 109)

HSL

hsl(17, 26%, 55%)

HSB

hsb(17, 36%, 66%)

CMYK

cmyk(0%, 25%, 36%, 34%)

Oklch

oklch(63.1% 0.059 42.5)

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

#AA9B7C

Ginger · DarkSeaGreen · Sunflower

HEX

#AA9B7C

RGB

rgb(170, 155, 124)

HSL

hsl(40, 21%, 58%)

HSB

hsb(40, 27%, 67%)

CMYK

cmyk(0%, 9%, 27%, 33%)

Oklch

oklch(69.4% 0.047 85.2)

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

#BEC196

Fresh Green · Tan · Sunflower

HEX

#BEC196

RGB

rgb(190, 193, 150)

HSL

hsl(64, 26%, 67%)

HSB

hsb(64, 22%, 76%)

CMYK

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

Oklch

oklch(79.8% 0.058 110.9)

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

#C0D7A3

Willow Green · Silver · Apple Green

HEX

#C0D7A3

RGB

rgb(192, 215, 163)

HSL

hsl(87, 39%, 74%)

HSB

hsb(87, 24%, 84%)

CMYK

cmyk(11%, 0%, 24%, 16%)

Oklch

oklch(84.9% 0.074 127.3)

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

#F3FFB6

Willow Green · Bisque · Mint Green

HEX

#F3FFB6

RGB

rgb(243, 255, 182)

HSL

hsl(70, 100%, 86%)

HSB

hsb(70, 29%, 100%)

CMYK

cmyk(5%, 0%, 29%, 0%)

Oklch

oklch(97.4% 0.094 115.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A97E6D

6E99AA

Analogous

AA6E7B

A97E6D

AA9D6E

Triadic

A97E6D

6EAA7F

7F6EAA

Split-Comp.

A97E6D

6EAA9D

6E7BAA

Tetradic

A97E6D

7BAA6E

6E99AA

9D6EAA

Contrast Matrix WCAG 2.1 Contrast

A97E6D	AA9B7C	BEC196	C0D7A3	F3FFB6
—	1.3 Fail	1.9 Fail	2.3 Fail	3.4 AA Large
1.3 Fail	—	1.5 Fail	1.8 Fail	2.6 Fail
1.9 Fail	1.5 Fail	—	1.2 Fail	1.8 Fail
2.3 Fail	1.8 Fail	1.2 Fail	—	1.5 Fail
3.4 AA Large	2.6 Fail	1.8 Fail	1.5 Fail	—

White BG

3.6AA Large

2.7Fail

1.9Fail

1.6Fail

1.1Fail

Black BG

5.9AA

7.7AAA

11.3AAA

13.5AAA

19.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

969671

A4A384

BFBFA0

CACAB0

F8F8C8

Deuteranopia

999C72

A4A685

BFBFA3

C9C7B3

F8F7CC

Tritanopia

A77475

A9898B

BEA9AA

C1BABC

F4D6D9

Achromatopsia

898989

9C9C9C

BBBBBB

CACACA

F3F3F3

Shades & Tints Shades & Tints

#A97E6D

Dark

Light

#AA9B7C

Dark

Light

#BEC196

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a97e6d;
  --color-2: #aa9b7c;
  --color-3: #bec196;
  --color-4: #c0d7a3;
  --color-5: #f3ffb6;
}

SCSS

$color-1: #a97e6d;
$color-2: #aa9b7c;
$color-3: #bec196;
$color-4: #c0d7a3;
$color-5: #f3ffb6;

TAILWIND

colors: {
  'brand-1': '#a97e6d',
  'brand-2': '#aa9b7c',
  'brand-3': '#bec196',
  'brand-4': '#c0d7a3',
  'brand-5': '#f3ffb6',
}

RGB Array

[169, 126, 109], [170, 155, 124], [190, 193, 150], [192, 215, 163], [243, 255, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A97E6D, #AA9B7C, #BEC196, #C0D7A3, #F3FFB6 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: #a97e6d; --color-2: #aa9b7c; --color-3: #bec196; --color-4: #c0d7a3; --color-5: #f3ffb6. 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