← Back to Editor

#364356 · #816E81 · #E3B0B9 · #F8C0A7 · #FFFED7

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#364356

Indigo · DarkSlateGray · Prussian Blue

HEX
#364356
RGB
rgb(54, 67, 86)
HSL
hsl(216, 23%, 27%)
HSB
hsb(216, 37%, 34%)
CMYK
cmyk(37%, 22%, 0%, 66%)
Oklch
oklch(38.0% 0.037 257.8)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#816E81

Rose Purple · Gray · Warm Gray

HEX
#816E81
RGB
rgb(129, 110, 129)
HSL
hsl(300, 8%, 47%)
HSB
hsb(300, 15%, 51%)
CMYK
cmyk(0%, 15%, 0%, 49%)
Oklch
oklch(56.3% 0.037 326.1)

Traditional「Rose Purple」· Paint「Warm Gray」· Creative Urban Concrete

#E3B0B9

Peach Pink · LightPink · Coral Red

HEX
#E3B0B9
RGB
rgb(227, 176, 185)
HSL
hsl(349, 48%, 79%)
HSB
hsb(349, 22%, 89%)
CMYK
cmyk(0%, 22%, 19%, 11%)
Oklch
oklch(80.6% 0.060 6.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#F8C0A7

Apricot · LightPink · Peach Orange

HEX
#F8C0A7
RGB
rgb(248, 192, 167)
HSL
hsl(19, 85%, 81%)
HSB
hsb(19, 33%, 97%)
CMYK
cmyk(0%, 23%, 33%, 3%)
Oklch
oklch(85.2% 0.073 45.2)

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

#FFFED7

Fresh Green · LightYellow · Lemon Cream

HEX
#FFFED7
RGB
rgb(255, 254, 215)
HSL
hsl(59, 100%, 92%)
HSB
hsb(59, 16%, 100%)
CMYK
cmyk(0%, 0%, 16%, 0%)
Oklch
oklch(98.8% 0.050 106.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

364356
554835

Analogous

355255
364356
383555

Triadic

364356
553542
425535

Split-Comp.

364356
553835
525535

Tetradic

364356
553552
554835
355538

Contrast Matrix WCAG 2.1 Contrast

364356
816E81
E3B0B9
F8C0A7
FFFED7
—
2.1
Fail
5.3
AA
6.3
AA
9.7
AAA
2.1
Fail
—
2.5
Fail
2.9
Fail
4.6
AA
5.3
AA
2.5
Fail
—
1.2
Fail
1.8
Fail
6.3
AA
2.9
Fail
1.2
Fail
—
1.6
Fail
9.7
AAA
4.6
AA
1.8
Fail
1.6
Fail
—
White BG
10.0AAA
4.7AA
1.9Fail
1.6Fail
1.0Fail
Black BG
2.1Fail
4.5AA Large
11.2AAA
13.1AAA
20.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3C3C51
79797C
CDCCB7
E0DFAD
FFFFE0

Deuteranopia

3B3A50
7A7B7B
D0D4B6
E3E7AF
FFFFE3

Tritanopia

374E4D
807978
E0B5B5
F5B2B3
FFE8EA

Achromatopsia

414141
767676
C0C0C0
CECECE
FAFAFA

Shades & Tints Shades & Tints

#364356

Dark
Light

#816E81

Dark
Light

#E3B0B9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #364356;
  --color-2: #816e81;
  --color-3: #e3b0b9;
  --color-4: #f8c0a7;
  --color-5: #fffed7;
}

SCSS

$color-1: #364356;
$color-2: #816e81;
$color-3: #e3b0b9;
$color-4: #f8c0a7;
$color-5: #fffed7;

TAILWIND

colors: {
  'brand-1': '#364356',
  'brand-2': '#816e81',
  'brand-3': '#e3b0b9',
  'brand-4': '#f8c0a7',
  'brand-5': '#fffed7',
}

RGB Array

[54, 67, 86], [129, 110, 129], [227, 176, 185], [248, 192, 167], [255, 254, 215]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #364356, #816E81, #E3B0B9, #F8C0A7, #FFFED7 is ideal for: health products, baby brands, fresh-style blogs, 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: #364356; --color-2: #816e81; --color-3: #e3b0b9; --color-4: #f8c0a7; --color-5: #fffed7. 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. 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