#F4C06C + #FFE29E + #B8C49E + #72838D + #E49463 · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4C06C

Ginger · SandyBrown · Warm Sun

HEX

#F4C06C

RGB

rgb(244, 192, 108)

HSL

hsl(37, 86%, 69%)

HSB

hsb(37, 56%, 96%)

CMYK

cmyk(0%, 21%, 56%, 4%)

Oklch

oklch(83.7% 0.118 78.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#FFE29E

Goose Yellow · Wheat · Lemon Cream

HEX

#FFE29E

RGB

rgb(255, 226, 158)

HSL

hsl(42, 100%, 81%)

HSB

hsb(42, 38%, 100%)

CMYK

cmyk(0%, 11%, 38%, 0%)

Oklch

oklch(92.1% 0.091 87.4)

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

#B8C49E

Willow Green · DarkGray · Apple Green

HEX

#B8C49E

RGB

rgb(184, 196, 158)

HSL

hsl(79, 24%, 69%)

HSB

hsb(79, 19%, 77%)

CMYK

cmyk(6%, 0%, 19%, 23%)

Oklch

oklch(80.1% 0.053 121.9)

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

#72838D

Slate Blue · SlateGray · Navy Blue

HEX

#72838D

RGB

rgb(114, 131, 141)

HSL

hsl(202, 11%, 50%)

HSB

hsb(202, 19%, 55%)

CMYK

cmyk(19%, 7%, 0%, 45%)

Oklch

oklch(60.0% 0.025 233.7)

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

#E49463

Apricot · SandyBrown · Warm Sun

HEX

#E49463

RGB

rgb(228, 148, 99)

HSL

hsl(23, 70%, 64%)

HSB

hsb(23, 57%, 89%)

CMYK

cmyk(0%, 35%, 57%, 11%)

Oklch

oklch(73.7% 0.116 51.6)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4C06C

6CA0F4

Analogous

F47C6C

F4C06C

E4F46C

Triadic

F4C06C

6CF4C0

C06CF4

Split-Comp.

F4C06C

6CE4F4

7C6CF4

Tetradic

F4C06C

6CF47C

6CA0F4

F46CE4

Contrast Matrix WCAG 2.1 Contrast

F4C06C	FFE29E	B8C49E	72838D	E49463
—	1.3 Fail	1.1 Fail	2.4 Fail	1.4 Fail
1.3 Fail	—	1.5 Fail	3.1 AA Large	1.9 Fail
1.1 Fail	1.5 Fail	—	2.1 Fail	1.3 Fail
2.4 Fail	3.1 AA Large	2.1 Fail	—	1.6 Fail
1.4 Fail	1.9 Fail	1.3 Fail	1.6 Fail	—

White BG

1.7Fail

1.3Fail

1.8Fail

3.9AA Large

2.4Fail

Black BG

12.6AAA

16.6AAA

11.4AAA

5.3AA

8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDD80

F2F2AE

BDBDA7

797A8B

C1C16F

Deuteranopia

E1E485

F4F6B2

BDBCA9

78778A

C6CC72

Tritanopia

F19094

FEBBBE

B9AEB0

738988

E0787A

Achromatopsia

C6C6C6

E3E3E3

BCBCBC

7F7F7F

A6A6A6

Shades & Tints Shades & Tints

#F4C06C

Dark

Light

#FFE29E

Dark

Light

#B8C49E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4c06c;
  --color-2: #ffe29e;
  --color-3: #b8c49e;
  --color-4: #72838d;
  --color-5: #e49463;
}

SCSS

$color-1: #f4c06c;
$color-2: #ffe29e;
$color-3: #b8c49e;
$color-4: #72838d;
$color-5: #e49463;

TAILWIND

colors: {
  'brand-1': '#f4c06c',
  'brand-2': '#ffe29e',
  'brand-3': '#b8c49e',
  'brand-4': '#72838d',
  'brand-5': '#e49463',
}

RGB Array

[244, 192, 108], [255, 226, 158], [184, 196, 158], [114, 131, 141], [228, 148, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #F4C06C, #FFE29E, #B8C49E, #72838D, #E49463 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: #f4c06c; --color-2: #ffe29e; --color-3: #b8c49e; --color-4: #72838d; --color-5: #e49463. 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