← Back to Editor

#B54261 · #CF807B · #DB9B82 · #F0C88D

sunset

A 4-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 Library

Color Details Color Details

#B54261

Dark Violet · Sienna · Camellia

HEX
#B54261
RGB
rgb(181, 66, 97)
HSL
hsl(344, 47%, 48%)
HSB
hsb(344, 64%, 71%)
CMYK
cmyk(0%, 64%, 46%, 29%)
Oklch
oklch(54.6% 0.151 7.1)

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

#CF807B

Peach Pink · LightCoral · Coral Red

HEX
#CF807B
RGB
rgb(207, 128, 123)
HSL
hsl(4, 47%, 65%)
HSB
hsb(4, 41%, 81%)
CMYK
cmyk(0%, 38%, 41%, 19%)
Oklch
oklch(68.2% 0.099 23.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#DB9B82

Apricot · DarkSalmon · Warm Sun

HEX
#DB9B82
RGB
rgb(219, 155, 130)
HSL
hsl(17, 55%, 68%)
HSB
hsb(17, 41%, 86%)
CMYK
cmyk(0%, 29%, 41%, 14%)
Oklch
oklch(74.5% 0.085 42.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#F0C88D

Goose Yellow · BurlyWood · Warm Sun

HEX
#F0C88D
RGB
rgb(240, 200, 141)
HSL
hsl(36, 77%, 75%)
HSB
hsb(36, 41%, 94%)
CMYK
cmyk(0%, 17%, 41%, 6%)
Oklch
oklch(85.4% 0.088 76.8)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B54261
41B495

Analogous

B44199
B54261
B45C41

Triadic

B54261
60B441
4160B4

Split-Comp.

B54261
41B45C
4199B4

Tetradic

B54261
99B441
41B495
5C41B4

Contrast Matrix WCAG 2.1 Contrast

B54261
CF807B
DB9B82
F0C88D
—
1.8
Fail
2.3
Fail
3.4
AA Large
1.8
Fail
—
1.3
Fail
1.9
Fail
2.3
Fail
1.3
Fail
—
1.5
Fail
3.4
AA Large
1.9
Fail
1.5
Fail
—
White BG
5.4AA
3.0Fail
2.3Fail
1.6Fail
Black BG
3.9AA Large
7.0AAA
9.0AAA
13.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

838259
ADAC7C
BFBF88
DFDE9B

Deuteranopia

8A9358
B1B77D
C3C88A
E1E49F

Tritanopia

AF5452
CB7D7D
D88D8E
EEA7A9

Achromatopsia

686868
979797
ABABAB
CDCDCD

Shades & Tints Shades & Tints

#B54261

Dark
Light

#CF807B

Dark
Light

#DB9B82

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b54261;
  --color-2: #cf807b;
  --color-3: #db9b82;
  --color-4: #f0c88d;
}

SCSS

$color-1: #b54261;
$color-2: #cf807b;
$color-3: #db9b82;
$color-4: #f0c88d;

TAILWIND

colors: {
  'brand-1': '#b54261',
  'brand-2': '#cf807b',
  'brand-3': '#db9b82',
  'brand-4': '#f0c88d',
}

RGB Array

[181, 66, 97], [207, 128, 123], [219, 155, 130], [240, 200, 141]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This sunset-style palette of #B54261, #CF807B, #DB9B82, #F0C88D is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b54261; --color-2: #cf807b; --color-3: #db9b82; --color-4: #f0c88d. 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. 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 4-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