← Back to Editor

#F7EFDA · #F6DAC5 · #F4D3C4 · #453B3A · #302826

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F7EFDA

Goose Yellow · Beige · Lemon Cream

HEX
#F7EFDA
RGB
rgb(247, 239, 218)
HSL
hsl(43, 64%, 91%)
HSB
hsb(43, 12%, 97%)
CMYK
cmyk(0%, 3%, 12%, 3%)
Oklch
oklch(95.3% 0.029 89.6)

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

#F6DAC5

Apricot · Bisque · Peach Orange

HEX
#F6DAC5
RGB
rgb(246, 218, 197)
HSL
hsl(26, 73%, 87%)
HSB
hsb(26, 20%, 96%)
CMYK
cmyk(0%, 11%, 20%, 4%)
Oklch
oklch(90.6% 0.042 59.1)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F4D3C4

Apricot · Bisque · Peach Orange

HEX
#F4D3C4
RGB
rgb(244, 211, 196)
HSL
hsl(19, 69%, 86%)
HSB
hsb(19, 20%, 96%)
CMYK
cmyk(0%, 14%, 20%, 4%)
Oklch
oklch(89.1% 0.042 45.9)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#453B3A

Crimson · DarkSlateGray · Dark Stone

HEX
#453B3A
RGB
rgb(69, 59, 58)
HSL
hsl(5, 9%, 25%)
HSB
hsb(5, 16%, 27%)
CMYK
cmyk(0%, 14%, 16%, 73%)
Oklch
oklch(36.2% 0.014 24.6)

Traditional「Crimson」· Paint「Dark Stone」· Creative Midnight Shadow

#302826

Crimson · DarkSlateGray · Deep Berry

HEX
#302826
RGB
rgb(48, 40, 38)
HSL
hsl(12, 12%, 17%)
HSB
hsb(12, 21%, 19%)
CMYK
cmyk(0%, 17%, 21%, 81%)
Oklch
oklch(28.5% 0.013 34.3)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7EFDA
D9E2F7

Analogous

F7E0D9
F7EFDA
F0F7D9

Triadic

F7EFDA
D9F7EE
EED9F7

Split-Comp.

F7EFDA
D9F0F7
E0D9F7

Tetradic

F7EFDA
D9F7E0
D9E2F7
F7D9F0

Contrast Matrix WCAG 2.1 Contrast

F7EFDA
F6DAC5
F4D3C4
453B3A
302826
—
1.2
Fail
1.2
Fail
9.4
AAA
12.6
AAA
1.2
Fail
—
1.1
Fail
8.1
AAA
10.8
AAA
1.2
Fail
1.1
Fail
—
7.7
AAA
10.3
AAA
9.4
AAA
8.1
AAA
7.7
AAA
—
1.3
Fail
12.6
AAA
10.8
AAA
10.3
AAA
1.3
Fail
—
White BG
1.1Fail
1.3Fail
1.4Fail
10.8AAA
14.4AAA
Black BG
18.3AAA
15.8AAA
15.0AAA
1.9Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F4F3DF
EAEACA
E6E5C8
41413A
2D2C26

Deuteranopia

F4F5E0
ECEECB
E8EAC9
41423A
2D2E27

Tritanopia

F7E3E4
F5CECF
F2CACB
453A3A
302727

Achromatopsia

EFEFEF
E0E0E0
DBDBDB
3E3E3E
2A2A2A

Shades & Tints Shades & Tints

#F7EFDA

Dark
Light

#F6DAC5

Dark
Light

#F4D3C4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7efda;
  --color-2: #f6dac5;
  --color-3: #f4d3c4;
  --color-4: #453b3a;
  --color-5: #302826;
}

SCSS

$color-1: #f7efda;
$color-2: #f6dac5;
$color-3: #f4d3c4;
$color-4: #453b3a;
$color-5: #302826;

TAILWIND

colors: {
  'brand-1': '#f7efda',
  'brand-2': '#f6dac5',
  'brand-3': '#f4d3c4',
  'brand-4': '#453b3a',
  'brand-5': '#302826',
}

RGB Array

[247, 239, 218], [246, 218, 197], [244, 211, 196], [69, 59, 58], [48, 40, 38]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #F7EFDA, #F6DAC5, #F4D3C4, #453B3A, #302826 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: #f7efda; --color-2: #f6dac5; --color-3: #f4d3c4; --color-4: #453b3a; --color-5: #302826. 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