← Back to Editor

#FAF87D · #F9CB73 · #A89A7F · #567288 · #171B1A

sunset

A 5-color sunset palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#FAF87D

Fresh Green · Khaki · Sunflower

HEX
#FAF87D
RGB
rgb(250, 248, 125)
HSL
hsl(59, 93%, 74%)
HSB
hsb(59, 50%, 98%)
CMYK
cmyk(0%, 1%, 50%, 2%)
Oklch
oklch(95.6% 0.145 108.0)

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

#F9CB73

Goose Yellow · Khaki · Warm Sun

HEX
#F9CB73
RGB
rgb(249, 203, 115)
HSL
hsl(39, 92%, 71%)
HSB
hsb(39, 54%, 98%)
CMYK
cmyk(0%, 18%, 54%, 2%)
Oklch
oklch(86.4% 0.119 82.3)

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

#A89A7F

Ginger · DarkGray · Sunflower

HEX
#A89A7F
RGB
rgb(168, 154, 127)
HSL
hsl(40, 19%, 58%)
HSB
hsb(40, 24%, 66%)
CMYK
cmyk(0%, 8%, 24%, 34%)
Oklch
oklch(69.1% 0.041 83.8)

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

#567288

Slate Blue · SlateGray · Navy Blue

HEX
#567288
RGB
rgb(86, 114, 136)
HSL
hsl(206, 23%, 44%)
HSB
hsb(206, 37%, 53%)
CMYK
cmyk(37%, 16%, 0%, 47%)
Oklch
oklch(53.9% 0.048 242.4)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#171B1A

Mineral Blue · Black · Jet Black

HEX
#171B1A
RGB
rgb(23, 27, 26)
HSL
hsl(165, 8%, 10%)
HSB
hsb(165, 15%, 11%)
CMYK
cmyk(15%, 0%, 4%, 89%)
Oklch
oklch(21.8% 0.006 179.0)

Traditional「Mineral Blue」· Paint「Jet Black」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FAF87D
7F81FA

Analogous

FABB7F
FAF87D
BFFA7F

Triadic

FAF87D
7FFAF8
F87FFA

Split-Comp.

FAF87D
7FBFFA
BB7FFA

Tetradic

FAF87D
7FFABB
7F81FA
FA7FBF

Contrast Matrix WCAG 2.1 Contrast

FAF87D
F9CB73
A89A7F
567288
171B1A
—
1.4
Fail
2.5
Fail
4.5
AA
15.6
AAA
1.4
Fail
—
1.8
Fail
3.3
AA Large
11.4
AAA
2.5
Fail
1.8
Fail
—
1.8
Fail
6.3
AA
4.5
AA
3.3
AA Large
1.8
Fail
—
3.4
AA Large
15.6
AAA
11.4
AAA
6.3
AA
3.4
AA Large
—
White BG
1.1Fail
1.5Fail
2.8Fail
5.1AA
17.4AAA
Black BG
18.8AAA
13.8AAA
7.6AAA
4.2AA Large
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F99B
E5E588
A2A286
626283
19191A

Deuteranopia

F9F9A2
E8EB8D
A3A487
615E81
19181A

Tritanopia

FAB2B7
F7999D
A78B8C
577E7E
171A1A

Achromatopsia

EBEBEB
CFCFCF
9B9B9B
6C6C6C
1A1A1A

Shades & Tints Shades & Tints

#FAF87D

Dark
Light

#F9CB73

Dark
Light

#A89A7F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #faf87d;
  --color-2: #f9cb73;
  --color-3: #a89a7f;
  --color-4: #567288;
  --color-5: #171b1a;
}

SCSS

$color-1: #faf87d;
$color-2: #f9cb73;
$color-3: #a89a7f;
$color-4: #567288;
$color-5: #171b1a;

TAILWIND

colors: {
  'brand-1': '#faf87d',
  'brand-2': '#f9cb73',
  'brand-3': '#a89a7f',
  'brand-4': '#567288',
  'brand-5': '#171b1a',
}

RGB Array

[250, 248, 125], [249, 203, 115], [168, 154, 127], [86, 114, 136], [23, 27, 26]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #FAF87D, #F9CB73, #A89A7F, #567288, #171B1A is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #faf87d; --color-2: #f9cb73; --color-3: #a89a7f; --color-4: #567288; --color-5: #171b1a. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. 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