← Back to Editor

#DDBF7F · #F77730 · #B05857 · #6D5684 · #40191E

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

#DDBF7F

Ginger · BurlyWood · Sunflower

HEX
#DDBF7F
RGB
rgb(221, 191, 127)
HSL
hsl(41, 58%, 68%)
HSB
hsb(41, 43%, 87%)
CMYK
cmyk(0%, 14%, 43%, 13%)
Oklch
oklch(81.6% 0.089 85.4)

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

#F77730

Tangerine · Tomato · Warm Sun

HEX
#F77730
RGB
rgb(247, 119, 48)
HSL
hsl(21, 93%, 58%)
HSB
hsb(21, 81%, 97%)
CMYK
cmyk(0%, 52%, 81%, 3%)
Oklch
oklch(70.9% 0.176 46.0)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#B05857

Crimson · Sienna · Passion Red

HEX
#B05857
RGB
rgb(176, 88, 87)
HSL
hsl(1, 36%, 52%)
HSB
hsb(1, 51%, 69%)
CMYK
cmyk(0%, 50%, 51%, 31%)
Oklch
oklch(56.7% 0.115 22.1)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#6D5684

Dark Plum · DimGray · Violet

HEX
#6D5684
RGB
rgb(109, 86, 132)
HSL
hsl(270, 21%, 43%)
HSB
hsb(270, 35%, 52%)
CMYK
cmyk(17%, 35%, 0%, 48%)
Oklch
oklch(49.5% 0.076 306.7)

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

#40191E

Crimson · DarkSlateGray · Deep Berry

HEX
#40191E
RGB
rgb(64, 25, 30)
HSL
hsl(352, 44%, 17%)
HSB
hsb(352, 61%, 25%)
CMYK
cmyk(0%, 61%, 53%, 75%)
Oklch
oklch(27.3% 0.061 14.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DDBF7F
7E9CDD

Analogous

DD8F7E
DDBF7F
CBDD7E

Triadic

DDBF7F
7EDDBF
BF7EDD

Split-Comp.

DDBF7F
7ECBDD
8F7EDD

Tetradic

DDBF7F
7EDD8F
7E9CDD
DD7ECB

Contrast Matrix WCAG 2.1 Contrast

DDBF7F
F77730
B05857
6D5684
40191E
—
1.5
Fail
2.7
Fail
3.6
AA Large
8.6
AAA
1.5
Fail
—
1.7
Fail
2.3
Fail
5.6
AA
2.7
Fail
1.7
Fail
—
1.3
Fail
3.2
AA Large
3.6
AA Large
2.3
Fail
1.3
Fail
—
2.4
Fail
8.6
AAA
5.6
AA
3.2
AA Large
2.4
Fail
—
White BG
1.8Fail
2.8Fail
4.8AA
6.3AA
15.3AAA
Black BG
11.8AAA
7.6AAA
4.4AA Large
3.3AA Large
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D08E
C0BE41
8A8957
636379
2F2F1D

Deuteranopia

D2D492
C7D145
8F9657
646676
31341D

Tritanopia

DC9B9D
F14F52
AC5757
6C706E
3E1C1C

Achromatopsia

C1C1C1
959595
727272
626262
252525

Shades & Tints Shades & Tints

#DDBF7F

Dark
Light

#F77730

Dark
Light

#B05857

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ddbf7f;
  --color-2: #f77730;
  --color-3: #b05857;
  --color-4: #6d5684;
  --color-5: #40191e;
}

SCSS

$color-1: #ddbf7f;
$color-2: #f77730;
$color-3: #b05857;
$color-4: #6d5684;
$color-5: #40191e;

TAILWIND

colors: {
  'brand-1': '#ddbf7f',
  'brand-2': '#f77730',
  'brand-3': '#b05857',
  'brand-4': '#6d5684',
  'brand-5': '#40191e',
}

RGB Array

[221, 191, 127], [247, 119, 48], [176, 88, 87], [109, 86, 132], [64, 25, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #DDBF7F, #F77730, #B05857, #6D5684, #40191E 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: #ddbf7f; --color-2: #f77730; --color-3: #b05857; --color-4: #6d5684; --color-5: #40191e. 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