← Back to Editor

#7F003B · #DFF2F8 · #A4CAD5 · #39869D · #005067

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#7F003B

Dark Violet · Maroon · Raspberry

HEX
#7F003B
RGB
rgb(127, 0, 59)
HSL
hsl(332, 100%, 25%)
HSB
hsb(332, 100%, 50%)
CMYK
cmyk(0%, 100%, 54%, 50%)
Oklch
oklch(38.4% 0.155 3.3)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#DFF2F8

Sky Blue · Lavender · Glacier Blue

HEX
#DFF2F8
RGB
rgb(223, 242, 248)
HSL
hsl(194, 64%, 92%)
HSB
hsb(194, 10%, 97%)
CMYK
cmyk(10%, 2%, 0%, 3%)
Oklch
oklch(94.9% 0.022 218.6)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#A4CAD5

Sky Blue · LightSteelBlue · Lake Green

HEX
#A4CAD5
RGB
rgb(164, 202, 213)
HSL
hsl(193, 37%, 74%)
HSB
hsb(193, 23%, 84%)
CMYK
cmyk(23%, 5%, 0%, 16%)
Oklch
oklch(81.5% 0.043 217.3)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#39869D

Slate Blue · SteelBlue · Mint Ice

HEX
#39869D
RGB
rgb(57, 134, 157)
HSL
hsl(194, 47%, 42%)
HSB
hsb(194, 64%, 62%)
CMYK
cmyk(64%, 15%, 0%, 38%)
Oklch
oklch(58.2% 0.083 220.6)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#005067

Lake Blue · DarkSlateGray · Peacock Green

HEX
#005067
RGB
rgb(0, 80, 103)
HSL
hsl(193, 100%, 20%)
HSB
hsb(193, 100%, 40%)
CMYK
cmyk(100%, 22%, 0%, 60%)
Oklch
oklch(40.1% 0.076 225.4)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7F003B
008044

Analogous

80007B
7F003B
800400

Triadic

7F003B
3B8000
003C80

Split-Comp.

7F003B
008004
007B80

Tetradic

7F003B
7B8000
008044
040080

Contrast Matrix WCAG 2.1 Contrast

7F003B
DFF2F8
A4CAD5
39869D
005067
—
9.3
AAA
6.1
AA
2.6
Fail
1.2
Fail
9.3
AAA
—
1.5
Fail
3.6
AA Large
7.8
AAA
6.1
AA
1.5
Fail
—
2.4
Fail
5.1
AA
2.6
Fail
3.6
AA Large
2.4
Fail
—
2.2
Fail
1.2
Fail
7.8
AAA
5.1
AA
2.2
Fail
—
White BG
10.7AAA
1.2Fail
1.8Fail
4.1AA Large
9.0AAA
Black BG
2.0Fail
18.2AAA
12.0AAA
5.1AA
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

48472D
E7E7F7
B4B5D2
5A5B97
232361

Deuteranopia

4F5929
E6E5F6
B2AFD2
565096
1E1860

Tritanopia

79211F
E0F5F5
A6D0D0
3D9392
045D5C

Achromatopsia

2D2D2D
EDEDED
C0C0C0
727272
3B3B3B

Shades & Tints Shades & Tints

#7F003B

Dark
Light

#DFF2F8

Dark
Light

#A4CAD5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7f003b;
  --color-2: #dff2f8;
  --color-3: #a4cad5;
  --color-4: #39869d;
  --color-5: #005067;
}

SCSS

$color-1: #7f003b;
$color-2: #dff2f8;
$color-3: #a4cad5;
$color-4: #39869d;
$color-5: #005067;

TAILWIND

colors: {
  'brand-1': '#7f003b',
  'brand-2': '#dff2f8',
  'brand-3': '#a4cad5',
  'brand-4': '#39869d',
  'brand-5': '#005067',
}

RGB Array

[127, 0, 59], [223, 242, 248], [164, 202, 213], [57, 134, 157], [0, 80, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #7F003B, #DFF2F8, #A4CAD5, #39869D, #005067 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #7f003b; --color-2: #dff2f8; --color-3: #a4cad5; --color-4: #39869d; --color-5: #005067. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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