#A9AFBD + #FEFEB6 + #FFD499 + #B19780 + #8A857F · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A9AFBD

Azure · DarkGray · Cobalt Blue

HEX

#A9AFBD

RGB

rgb(169, 175, 189)

HSL

hsl(222, 13%, 70%)

HSB

hsb(222, 11%, 74%)

CMYK

cmyk(11%, 7%, 0%, 26%)

Oklch

oklch(75.4% 0.021 267.2)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#FEFEB6

Fresh Green · Bisque · Lemon Cream

HEX

#FEFEB6

RGB

rgb(254, 254, 182)

HSL

hsl(60, 97%, 85%)

HSB

hsb(60, 28%, 100%)

CMYK

cmyk(0%, 0%, 28%, 0%)

Oklch

oklch(98.0% 0.091 108.0)

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

#FFD499

Goose Yellow · Khaki · Peach Orange

HEX

#FFD499

RGB

rgb(255, 212, 153)

HSL

hsl(35, 100%, 80%)

HSB

hsb(35, 40%, 100%)

CMYK

cmyk(0%, 17%, 40%, 0%)

Oklch

oklch(89.3% 0.089 75.0)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#B19780

Tangerine · DarkGray · Warm Sun

HEX

#B19780

RGB

rgb(177, 151, 128)

HSL

hsl(28, 24%, 60%)

HSB

hsb(28, 28%, 69%)

CMYK

cmyk(0%, 15%, 28%, 31%)

Oklch

oklch(69.4% 0.045 63.5)

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

#8A857F

Ash · Gray · Warm Gray

HEX

#8A857F

RGB

rgb(138, 133, 127)

HSL

hsl(33, 4%, 52%)

HSB

hsb(33, 8%, 54%)

CMYK

cmyk(0%, 4%, 8%, 46%)

Oklch

oklch(61.9% 0.011 72.6)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A9AFBD

BCB6A9

Analogous

A9B8BC

A9AFBD

ADA9BC

Triadic

A9AFBD

BCA9AF

AFBCA9

Split-Comp.

A9AFBD

BCADA9

B8BCA9

Tetradic

A9AFBD

BCA9B8

BCB6A9

A9BCAD

Contrast Matrix WCAG 2.1 Contrast

A9AFBD	FEFEB6	FFD499	B19780	8A857F
—	2.1 Fail	1.6 Fail	1.3 Fail	1.7 Fail
2.1 Fail	—	1.3 Fail	2.6 Fail	3.5 AA Large
1.6 Fail	1.3 Fail	—	2.0 Fail	2.6 Fail
1.3 Fail	2.6 Fail	2.0 Fail	—	1.3 Fail
1.7 Fail	3.5 AA Large	2.6 Fail	1.3 Fail	—

White BG

2.2Fail

1.0Fail

1.4Fail

2.8Fail

3.7AA Large

Black BG

9.6AAA

20.1AAA

15.1AAA

7.6AAA

5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACACBA

FEFEC7

ECECA7

A6A686

888880

Deuteranopia

ABABB9

FEFECC

EFF2AB

A7A987

888981

Tritanopia

A9B7B6

FED5D8

FDB3B5

B08A8B

8A8282

Achromatopsia

AFAFAF

F6F6F6

DADADA

9C9C9C

868686

Shades & Tints Shades & Tints

#A9AFBD

Dark

Light

#FEFEB6

Dark

Light

#FFD499

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a9afbd;
  --color-2: #fefeb6;
  --color-3: #ffd499;
  --color-4: #b19780;
  --color-5: #8a857f;
}

SCSS

$color-1: #a9afbd;
$color-2: #fefeb6;
$color-3: #ffd499;
$color-4: #b19780;
$color-5: #8a857f;

TAILWIND

colors: {
  'brand-1': '#a9afbd',
  'brand-2': '#fefeb6',
  'brand-3': '#ffd499',
  'brand-4': '#b19780',
  'brand-5': '#8a857f',
}

RGB Array

[169, 175, 189], [254, 254, 182], [255, 212, 153], [177, 151, 128], [138, 133, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #A9AFBD, #FEFEB6, #FFD499, #B19780, #8A857F 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: #a9afbd; --color-2: #fefeb6; --color-3: #ffd499; --color-4: #b19780; --color-5: #8a857f. 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 sunset-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