← Back to Editor

#272F56 · #404F70 · #8B958D · #CDB682 · #C1853F

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

#272F56

Indigo · DarkSlateGray · Prussian Blue

HEX
#272F56
RGB
rgb(39, 47, 86)
HSL
hsl(230, 38%, 25%)
HSB
hsb(230, 55%, 34%)
CMYK
cmyk(55%, 45%, 0%, 66%)
Oklch
oklch(31.9% 0.070 273.1)

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

#404F70

Indigo · DarkSlateBlue · Prussian Blue

HEX
#404F70
RGB
rgb(64, 79, 112)
HSL
hsl(221, 27%, 35%)
HSB
hsb(221, 43%, 44%)
CMYK
cmyk(43%, 29%, 0%, 56%)
Oklch
oklch(42.9% 0.058 265.2)

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

#8B958D

Ash · LightSlateGray · Silver Sand

HEX
#8B958D
RGB
rgb(139, 149, 141)
HSL
hsl(132, 5%, 56%)
HSB
hsb(132, 7%, 58%)
CMYK
cmyk(7%, 0%, 5%, 42%)
Oklch
oklch(65.9% 0.016 151.6)

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

#CDB682

Ginger · Tan · Sunflower

HEX
#CDB682
RGB
rgb(205, 182, 130)
HSL
hsl(42, 43%, 66%)
HSB
hsb(42, 37%, 80%)
CMYK
cmyk(0%, 11%, 37%, 20%)
Oklch
oklch(78.4% 0.073 86.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#C1853F

Ochre · Chocolate · Amber Brown

HEX
#C1853F
RGB
rgb(193, 133, 63)
HSL
hsl(32, 51%, 50%)
HSB
hsb(32, 67%, 76%)
CMYK
cmyk(0%, 31%, 67%, 24%)
Oklch
oklch(66.4% 0.113 67.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

272F56
585028

Analogous

284858
272F56
382858

Triadic

272F56
582830
305828

Split-Comp.

272F56
583828
485828

Tetradic

272F56
582848
585028
285838

Contrast Matrix WCAG 2.1 Contrast

272F56
404F70
8B958D
CDB682
C1853F
—
1.6
Fail
4.2
AA Large
6.5
AA
4.1
AA Large
1.6
Fail
—
2.6
Fail
4.1
AA Large
2.6
Fail
4.2
AA Large
2.6
Fail
—
1.6
Fail
1.0
Fail
6.5
AA
4.1
AA Large
1.6
Fail
—
1.6
Fail
4.1
AA Large
2.6
Fail
1.0
Fail
1.6
Fail
—
White BG
12.9AAA
8.2AAA
3.1AA Large
2.0Fail
3.1AA Large
Black BG
1.6Fail
2.6Fail
6.8AA
10.6AAA
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2A2B4D
464768
8F8F8F
C3C38F
A7A650

Deuteranopia

2A294A
464566
8F8E8F
C4C692
ABAF54

Tritanopia

274543
416260
8B9091
CC999B
BE5D60

Achromatopsia

313131
4E4E4E
919191
B7B7B7
8F8F8F

Shades & Tints Shades & Tints

#272F56

Dark
Light

#404F70

Dark
Light

#8B958D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #272f56;
  --color-2: #404f70;
  --color-3: #8b958d;
  --color-4: #cdb682;
  --color-5: #c1853f;
}

SCSS

$color-1: #272f56;
$color-2: #404f70;
$color-3: #8b958d;
$color-4: #cdb682;
$color-5: #c1853f;

TAILWIND

colors: {
  'brand-1': '#272f56',
  'brand-2': '#404f70',
  'brand-3': '#8b958d',
  'brand-4': '#cdb682',
  'brand-5': '#c1853f',
}

RGB Array

[39, 47, 86], [64, 79, 112], [139, 149, 141], [205, 182, 130], [193, 133, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #272F56, #404F70, #8B958D, #CDB682, #C1853F 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: #272f56; --color-2: #404f70; --color-3: #8b958d; --color-4: #cdb682; --color-5: #c1853f. 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