← Back to Editor

#BCC4A8 · #7A917F · #495F68 · #323646 · #0B0211

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#BCC4A8

Willow Green · Silver · Apple Green

HEX
#BCC4A8
RGB
rgb(188, 196, 168)
HSL
hsl(77, 19%, 71%)
HSB
hsb(77, 14%, 77%)
CMYK
cmyk(4%, 0%, 14%, 23%)
Oklch
oklch(80.6% 0.039 120.3)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#7A917F

Celadon · Gray · Warm Gray

HEX
#7A917F
RGB
rgb(122, 145, 127)
HSL
hsl(133, 9%, 52%)
HSB
hsb(133, 16%, 57%)
CMYK
cmyk(16%, 0%, 12%, 43%)
Oklch
oklch(63.3% 0.037 151.7)

Traditional「Celadon」· Paint「Warm Gray」· Creative Urban Concrete

#495F68

Slate Blue · DimGray · Mint Ice

HEX
#495F68
RGB
rgb(73, 95, 104)
HSL
hsl(197, 18%, 35%)
HSB
hsb(197, 30%, 41%)
CMYK
cmyk(30%, 9%, 0%, 59%)
Oklch
oklch(47.1% 0.030 224.9)

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

#323646

Indigo · DarkSlateGray · Prussian Blue

HEX
#323646
RGB
rgb(50, 54, 70)
HSL
hsl(228, 17%, 24%)
HSB
hsb(228, 29%, 27%)
CMYK
cmyk(29%, 23%, 0%, 73%)
Oklch
oklch(33.6% 0.029 273.8)

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

#0B0211

Royal Purple · Black · Dark Purple

HEX
#0B0211
RGB
rgb(11, 2, 17)
HSL
hsl(276, 79%, 4%)
HSB
hsb(276, 88%, 7%)
CMYK
cmyk(35%, 88%, 0%, 93%)
Oklch
oklch(12.1% 0.043 313.1)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BCC4A8
AFA7C3

Analogous

C3BDA7
BCC4A8
ADC3A7

Triadic

BCC4A8
A7BBC3
C3A7BB

Split-Comp.

BCC4A8
A7ADC3
BDA7C3

Tetradic

BCC4A8
A7C3BD
AFA7C3
C3A7AD

Contrast Matrix WCAG 2.1 Contrast

BCC4A8
7A917F
495F68
323646
0B0211
—
1.9
Fail
3.7
AA Large
6.6
AA
11.3
AAA
1.9
Fail
—
2.0
Fail
3.5
AA Large
6.0
AA
3.7
AA Large
2.0
Fail
—
1.8
Fail
3.0
AA Large
6.6
AA
3.5
AA Large
1.8
Fail
—
1.7
Fail
11.3
AAA
6.0
AA
3.0
AA Large
1.7
Fail
—
White BG
1.8Fail
3.4AA Large
6.7AA
12.0AAA
20.4AAA
Black BG
11.6AAA
6.2AA
3.1AA Large
1.8Fail
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFC0AF
848483
535366
343442
07070D

Deuteranopia

BFBEB0
838184
515065
343341
08080C

Tritanopia

BCB4B5
7B8788
4A6464
323F3E
0B0B0A

Achromatopsia

BEBEBE
888888
595959
373737
060606

Shades & Tints Shades & Tints

#BCC4A8

Dark
Light

#7A917F

Dark
Light

#495F68

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bcc4a8;
  --color-2: #7a917f;
  --color-3: #495f68;
  --color-4: #323646;
  --color-5: #0b0211;
}

SCSS

$color-1: #bcc4a8;
$color-2: #7a917f;
$color-3: #495f68;
$color-4: #323646;
$color-5: #0b0211;

TAILWIND

colors: {
  'brand-1': '#bcc4a8',
  'brand-2': '#7a917f',
  'brand-3': '#495f68',
  'brand-4': '#323646',
  'brand-5': '#0b0211',
}

RGB Array

[188, 196, 168], [122, 145, 127], [73, 95, 104], [50, 54, 70], [11, 2, 17]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #BCC4A8, #7A917F, #495F68, #323646, #0B0211 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #bcc4a8; --color-2: #7a917f; --color-3: #495f68; --color-4: #323646; --color-5: #0b0211. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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