#AFC7A9 + #6FAC9A + #DBD4A1 + #F6DEA3 + #F7BF86 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AFC7A9

Celadon · Silver · Apple Green

HEX

#AFC7A9

RGB

rgb(175, 199, 169)

HSL

hsl(108, 21%, 72%)

HSB

hsb(108, 15%, 78%)

CMYK

cmyk(12%, 0%, 15%, 22%)

Oklch

oklch(80.3% 0.049 139.4)

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

#6FAC9A

Mineral Blue · CadetBlue · Lake Green

HEX

#6FAC9A

RGB

rgb(111, 172, 154)

HSL

hsl(162, 27%, 55%)

HSB

hsb(162, 35%, 67%)

CMYK

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

Oklch

oklch(69.7% 0.069 173.6)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#DBD4A1

Fresh Green · Wheat · Sunflower

HEX

#DBD4A1

RGB

rgb(219, 212, 161)

HSL

hsl(53, 45%, 75%)

HSB

hsb(53, 26%, 86%)

CMYK

cmyk(0%, 3%, 26%, 14%)

Oklch

oklch(86.3% 0.067 101.1)

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

#F6DEA3

Goose Yellow · Wheat · Lemon Cream

HEX

#F6DEA3

RGB

rgb(246, 222, 163)

HSL

hsl(43, 82%, 80%)

HSB

hsb(43, 34%, 96%)

CMYK

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

Oklch

oklch(90.7% 0.080 88.4)

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

#F7BF86

Goose Yellow · BurlyWood · Warm Sun

HEX

#F7BF86

RGB

rgb(247, 191, 134)

HSL

hsl(30, 88%, 75%)

HSB

hsb(30, 46%, 97%)

CMYK

cmyk(0%, 23%, 46%, 3%)

Oklch

oklch(84.3% 0.097 66.4)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFC7A9

C1A9C7

Analogous

BEC7A9

AFC7A9

A9C7B2

Triadic

AFC7A9

A9AFC7

C7A9AF

Split-Comp.

AFC7A9

B2A9C7

C7A9BE

Tetradic

AFC7A9

A9BEC7

C1A9C7

C7B2A9

Contrast Matrix WCAG 2.1 Contrast

AFC7A9	6FAC9A	DBD4A1	F6DEA3	F7BF86
—	1.4 Fail	1.2 Fail	1.4 Fail	1.1 Fail
1.4 Fail	—	1.7 Fail	2.0 Fail	1.6 Fail
1.2 Fail	1.7 Fail	—	1.1 Fail	1.1 Fail
1.4 Fail	2.0 Fail	1.1 Fail	—	1.2 Fail
1.1 Fail	1.6 Fail	1.1 Fail	1.2 Fail	—

White BG

1.8Fail

2.6Fail

1.5Fail

1.3Fail

1.6Fail

Black BG

11.6AAA

8.0AAA

13.9AAA

15.9AAA

12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9BAB0

898A9E

D8D8AD

ECEBB1

DFDE94

Deuteranopia

B8B6B2

86819F

D8D9B0

EDEFB5

E2E697

Tritanopia

B0B6B7

72A2A3

DBB7B9

F5BDBF

F49FA1

Achromatopsia

BCBCBC

989898

D0D0D0

DEDEDE

C9C9C9

Shades & Tints Shades & Tints

#AFC7A9

Dark

Light

#6FAC9A

Dark

Light

#DBD4A1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afc7a9;
  --color-2: #6fac9a;
  --color-3: #dbd4a1;
  --color-4: #f6dea3;
  --color-5: #f7bf86;
}

SCSS

$color-1: #afc7a9;
$color-2: #6fac9a;
$color-3: #dbd4a1;
$color-4: #f6dea3;
$color-5: #f7bf86;

TAILWIND

colors: {
  'brand-1': '#afc7a9',
  'brand-2': '#6fac9a',
  'brand-3': '#dbd4a1',
  'brand-4': '#f6dea3',
  'brand-5': '#f7bf86',
}

RGB Array

[175, 199, 169], [111, 172, 154], [219, 212, 161], [246, 222, 163], [247, 191, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFC7A9, #6FAC9A, #DBD4A1, #F6DEA3, #F7BF86 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: #afc7a9; --color-2: #6fac9a; --color-3: #dbd4a1; --color-4: #f6dea3; --color-5: #f7bf86. 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