#FFDF6B + #A3B688 + #E79807 + #899885 + #5F806B · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FFDF6B

Goose Yellow · Khaki · Sunflower

HEX

#FFDF6B

RGB

rgb(255, 223, 107)

HSL

hsl(47, 100%, 71%)

HSB

hsb(47, 58%, 100%)

CMYK

cmyk(0%, 13%, 58%, 0%)

Oklch

oklch(90.8% 0.139 94.0)

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

#A3B688

Willow Green · DarkSeaGreen · Apple Green

HEX

#A3B688

RGB

rgb(163, 182, 136)

HSL

hsl(85, 24%, 62%)

HSB

hsb(85, 25%, 71%)

CMYK

cmyk(10%, 0%, 25%, 29%)

Oklch

oklch(75.0% 0.067 126.2)

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

#E79807

Ochre · Orange · Amber Brown

HEX

#E79807

RGB

rgb(231, 152, 7)

HSL

hsl(39, 94%, 47%)

HSB

hsb(39, 97%, 91%)

CMYK

cmyk(0%, 34%, 97%, 9%)

Oklch

oklch(74.1% 0.157 72.1)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#899885

Celadon · Gray · Silver Sand

HEX

#899885

RGB

rgb(137, 152, 133)

HSL

hsl(107, 8%, 56%)

HSB

hsb(107, 12%, 60%)

CMYK

cmyk(10%, 0%, 12%, 40%)

Oklch

oklch(66.2% 0.032 139.1)

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

#5F806B

Celadon · DimGray · Olive Green

HEX

#5F806B

RGB

rgb(95, 128, 107)

HSL

hsl(142, 15%, 44%)

HSB

hsb(142, 26%, 50%)

CMYK

cmyk(26%, 0%, 16%, 50%)

Oklch

oklch(56.8% 0.050 156.5)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFDF6B

6B8BFF

Analogous

FF956B

FFDF6B

D5FF6B

Triadic

FFDF6B

6BFFDF

DF6BFF

Split-Comp.

FFDF6B

6BD5FF

956BFF

Tetradic

FFDF6B

6BFF95

6B8BFF

FF6BD5

Contrast Matrix WCAG 2.1 Contrast

FFDF6B	A3B688	E79807	899885	5F806B
—	1.7 Fail	1.8 Fail	2.3 Fail	3.3 AA Large
1.7 Fail	—	1.1 Fail	1.4 Fail	2.0 Fail
1.8 Fail	1.1 Fail	—	1.3 Fail	1.9 Fail
2.3 Fail	1.4 Fail	1.3 Fail	—	1.4 Fail
3.3 AA Large	2.0 Fail	1.9 Fail	1.4 Fail	—

White BG

1.3Fail

2.2Fail

2.4Fail

3.0AA Large

4.4AA Large

Black BG

16.0AAA

9.6AAA

8.9AAA

6.9AA

4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F1F187

ABAB93

C5C42A

8F908A

6D6E70

Deuteranopia

F3F58E

AAA996

C9CF33

8F8E8B

6B6971

Tritanopia

FD9DA2

A49C9E

E3464C

8A8D8E

617475

Achromatopsia

DBDBDB

ABABAB

9F9F9F

919191

747474

Shades & Tints Shades & Tints

#FFDF6B

Dark

Light

#A3B688

Dark

Light

#E79807

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffdf6b;
  --color-2: #a3b688;
  --color-3: #e79807;
  --color-4: #899885;
  --color-5: #5f806b;
}

SCSS

$color-1: #ffdf6b;
$color-2: #a3b688;
$color-3: #e79807;
$color-4: #899885;
$color-5: #5f806b;

TAILWIND

colors: {
  'brand-1': '#ffdf6b',
  'brand-2': '#a3b688',
  'brand-3': '#e79807',
  'brand-4': '#899885',
  'brand-5': '#5f806b',
}

RGB Array

[255, 223, 107], [163, 182, 136], [231, 152, 7], [137, 152, 133], [95, 128, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #FFDF6B, #A3B688, #E79807, #899885, #5F806B is ideal for: corporate websites, product showcases, portfolios. 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: #ffdf6b; --color-2: #a3b688; --color-3: #e79807; --color-4: #899885; --color-5: #5f806b. 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. 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