#F4D2A9 + #D69DB3 + #AB648D + #A096A4 + #ADC8AF · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4D2A9

Goose Yellow · Wheat · Peach Orange

HEX

#F4D2A9

RGB

rgb(244, 210, 169)

HSL

hsl(33, 77%, 81%)

HSB

hsb(33, 31%, 96%)

CMYK

cmyk(0%, 14%, 31%, 4%)

Oklch

oklch(88.2% 0.066 72.0)

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

#D69DB3

Rouge · Silver · Rose Pink

HEX

#D69DB3

RGB

rgb(214, 157, 179)

HSL

hsl(337, 41%, 73%)

HSB

hsb(337, 27%, 84%)

CMYK

cmyk(0%, 27%, 16%, 16%)

Oklch

oklch(75.6% 0.073 354.1)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#AB648D

Rose Purple · Gray · Rose Pink

HEX

#AB648D

RGB

rgb(171, 100, 141)

HSL

hsl(325, 30%, 53%)

HSB

hsb(325, 42%, 67%)

CMYK

cmyk(0%, 42%, 18%, 33%)

Oklch

oklch(59.5% 0.105 345.1)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

#A096A4

Ash · DarkGray · Silver Sand

HEX

#A096A4

RGB

rgb(160, 150, 164)

HSL

hsl(283, 7%, 62%)

HSB

hsb(283, 9%, 64%)

CMYK

cmyk(2%, 9%, 0%, 36%)

Oklch

oklch(68.6% 0.023 316.4)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#ADC8AF

Celadon · Silver · Apple Green

HEX

#ADC8AF

RGB

rgb(173, 200, 175)

HSL

hsl(124, 20%, 73%)

HSB

hsb(124, 13%, 78%)

CMYK

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

Oklch

oklch(80.6% 0.045 147.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4D2A9

A9CBF4

Analogous

F4ADA9

F4D2A9

F0F4A9

Triadic

F4D2A9

A9F4D2

D2A9F4

Split-Comp.

F4D2A9

A9F0F4

ADA9F4

Tetradic

F4D2A9

A9F4AD

A9CBF4

F4A9F0

Contrast Matrix WCAG 2.1 Contrast

F4D2A9	D69DB3	AB648D	A096A4	ADC8AF
—	1.6 Fail	3.0 Fail	2.0 Fail	1.3 Fail
1.6 Fail	—	1.9 Fail	1.3 Fail	1.2 Fail
3.0 Fail	1.9 Fail	—	1.5 Fail	2.4 Fail
2.0 Fail	1.3 Fail	1.5 Fail	—	1.6 Fail
1.3 Fail	1.2 Fail	2.4 Fail	1.6 Fail	—

White BG

1.4Fail

2.3Fail

4.3AA Large

2.8Fail

1.8Fail

Black BG

14.6AAA

9.3AAA

4.9AA

7.4AAA

11.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E5B3

BDBDAE

8C8C83

9C9CA1

B9B9B5

Deuteranopia

E7EAB5

C1C5AC

909681

9C9DA0

B7B5B7

Tritanopia

F2BBBC

D3A9A9

A77B7A

A09E9D

AEBABB

Achromatopsia

D7D7D7

B1B1B1

7E7E7E

9B9B9B

BDBDBD

Shades & Tints Shades & Tints

#F4D2A9

Dark

Light

#D69DB3

Dark

Light

#AB648D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4d2a9;
  --color-2: #d69db3;
  --color-3: #ab648d;
  --color-4: #a096a4;
  --color-5: #adc8af;
}

SCSS

$color-1: #f4d2a9;
$color-2: #d69db3;
$color-3: #ab648d;
$color-4: #a096a4;
$color-5: #adc8af;

TAILWIND

colors: {
  'brand-1': '#f4d2a9',
  'brand-2': '#d69db3',
  'brand-3': '#ab648d',
  'brand-4': '#a096a4',
  'brand-5': '#adc8af',
}

RGB Array

[244, 210, 169], [214, 157, 179], [171, 100, 141], [160, 150, 164], [173, 200, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #F4D2A9, #D69DB3, #AB648D, #A096A4, #ADC8AF 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: #f4d2a9; --color-2: #d69db3; --color-3: #ab648d; --color-4: #a096a4; --color-5: #adc8af. 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