#F2D786 + #FF9784 + #C09491 + #A4C09A + #D4D9A1 · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F2D786

Goose Yellow · Khaki · Sunflower

HEX

#F2D786

RGB

rgb(242, 215, 134)

HSL

hsl(45, 81%, 74%)

HSB

hsb(45, 45%, 95%)

CMYK

cmyk(0%, 11%, 45%, 5%)

Oklch

oklch(88.4% 0.105 91.6)

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

#FF9784

Peach Pink · LightSalmon · Coral Red

HEX

#FF9784

RGB

rgb(255, 151, 132)

HSL

hsl(9, 100%, 76%)

HSB

hsb(9, 48%, 100%)

CMYK

cmyk(0%, 41%, 48%, 0%)

Oklch

oklch(78.1% 0.129 31.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#C09491

Peach Pink · Tan · Coral Red

HEX

#C09491

RGB

rgb(192, 148, 145)

HSL

hsl(4, 27%, 66%)

HSB

hsb(4, 24%, 75%)

CMYK

cmyk(0%, 23%, 24%, 25%)

Oklch

oklch(70.7% 0.054 23.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#A4C09A

Celadon · DarkSeaGreen · Apple Green

HEX

#A4C09A

RGB

rgb(164, 192, 154)

HSL

hsl(104, 23%, 68%)

HSB

hsb(104, 20%, 75%)

CMYK

cmyk(15%, 0%, 20%, 25%)

Oklch

oklch(77.7% 0.061 137.5)

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

#D4D9A1

Fresh Green · Khaki · Sunflower

HEX

#D4D9A1

RGB

rgb(212, 217, 161)

HSL

hsl(65, 42%, 74%)

HSB

hsb(65, 26%, 85%)

CMYK

cmyk(2%, 0%, 26%, 15%)

Oklch

oklch(86.8% 0.074 112.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2D786

87A2F2

Analogous

F2A287

F2D786

D8F287

Triadic

F2D786

87F2D8

D887F2

Split-Comp.

F2D786

87D8F2

A287F2

Tetradic

F2D786

87F2A2

87A2F2

F287D8

Contrast Matrix WCAG 2.1 Contrast

F2D786	FF9784	C09491	A4C09A	D4D9A1
—	1.5 Fail	1.9 Fail	1.4 Fail	1.0 Fail
1.5 Fail	—	1.3 Fail	1.1 Fail	1.4 Fail
1.9 Fail	1.3 Fail	—	1.3 Fail	1.8 Fail
1.4 Fail	1.1 Fail	1.3 Fail	—	1.3 Fail
1.0 Fail	1.4 Fail	1.8 Fail	1.3 Fail	—

White BG

1.4Fail

2.1Fail

2.7Fail

2.0Fail

1.5Fail

Black BG

14.8AAA

10.0AAA

7.9AAA

10.6AAA

14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E69A

D2D189

ADAD92

B0B0A3

D6D6AF

Deuteranopia

E8EA9E

D8E08A

B0B392

AFACA5

D6D5B2

Tritanopia

F1A9AC

FA8C8D

BE9292

A5AAAC

D4B9BC

Achromatopsia

D6D6D6

B4B4B4

A1A1A1

B3B3B3

D1D1D1

Shades & Tints Shades & Tints

#F2D786

Dark

Light

#FF9784

Dark

Light

#C09491

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2d786;
  --color-2: #ff9784;
  --color-3: #c09491;
  --color-4: #a4c09a;
  --color-5: #d4d9a1;
}

SCSS

$color-1: #f2d786;
$color-2: #ff9784;
$color-3: #c09491;
$color-4: #a4c09a;
$color-5: #d4d9a1;

TAILWIND

colors: {
  'brand-1': '#f2d786',
  'brand-2': '#ff9784',
  'brand-3': '#c09491',
  'brand-4': '#a4c09a',
  'brand-5': '#d4d9a1',
}

RGB Array

[242, 215, 134], [255, 151, 132], [192, 148, 145], [164, 192, 154], [212, 217, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #F2D786, #FF9784, #C09491, #A4C09A, #D4D9A1 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: #f2d786; --color-2: #ff9784; --color-3: #c09491; --color-4: #a4c09a; --color-5: #d4d9a1. 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