← Back to Editor

#CFC7C4 · #A3B1B8 · #587889 · #464C4F · #343336

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

#CFC7C4

Apricot · Silver · Peach Orange

HEX
#CFC7C4
RGB
rgb(207, 199, 196)
HSL
hsl(16, 10%, 79%)
HSB
hsb(16, 5%, 81%)
CMYK
cmyk(0%, 4%, 5%, 19%)
Oklch
oklch(83.5% 0.010 41.9)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#A3B1B8

Sky Blue · DarkGray · Cobalt Blue

HEX
#A3B1B8
RGB
rgb(163, 177, 184)
HSL
hsl(200, 13%, 68%)
HSB
hsb(200, 11%, 72%)
CMYK
cmyk(11%, 4%, 0%, 28%)
Oklch
oklch(75.2% 0.019 229.1)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#587889

Slate Blue · SlateGray · Navy Blue

HEX
#587889
RGB
rgb(88, 120, 137)
HSL
hsl(201, 22%, 44%)
HSB
hsb(201, 36%, 54%)
CMYK
cmyk(36%, 12%, 0%, 46%)
Oklch
oklch(55.5% 0.045 231.8)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#464C4F

Dark Cyan · DarkSlateGray · Charcoal

HEX
#464C4F
RGB
rgb(70, 76, 79)
HSL
hsl(200, 6%, 29%)
HSB
hsb(200, 11%, 31%)
CMYK
cmyk(11%, 4%, 0%, 69%)
Oklch
oklch(41.2% 0.009 229.1)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#343336

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#343336
RGB
rgb(52, 51, 54)
HSL
hsl(260, 3%, 21%)
HSB
hsb(260, 6%, 21%)
CMYK
cmyk(4%, 6%, 0%, 79%)
Oklch
oklch(32.3% 0.005 301.2)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFC7C4
C4CCCF

Analogous

CFC4C7
CFC7C4
CFCCC4

Triadic

CFC7C4
C4CFC7
C7C4CF

Split-Comp.

CFC7C4
C4CFCC
C4C7CF

Tetradic

CFC7C4
C7CFC4
C4CCCF
CCC4CF

Contrast Matrix WCAG 2.1 Contrast

CFC7C4
A3B1B8
587889
464C4F
343336
—
1.3
Fail
2.8
Fail
5.2
AA
7.5
AAA
1.3
Fail
—
2.1
Fail
4.0
AA Large
5.7
AA
2.8
Fail
2.1
Fail
—
1.9
Fail
2.7
Fail
5.2
AA
4.0
AA Large
1.9
Fail
—
1.4
Fail
7.5
AAA
5.7
AA
2.7
Fail
1.4
Fail
—
White BG
1.7Fail
2.2Fail
4.7AA
8.7AAA
12.6AAA
Black BG
12.6AAA
9.5AAA
4.5AA Large
2.4Fail
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCBC5
A9A9B6
666685
49494E
343435

Deuteranopia

CCCDC5
A8A7B6
646284
48484E
343435

Tritanopia

CFC5C5
A4B5B5
5A8281
464E4E
343535

Achromatopsia

C9C9C9
AEAEAE
707070
4B4B4B
343434

Shades & Tints Shades & Tints

#CFC7C4

Dark
Light

#A3B1B8

Dark
Light

#587889

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfc7c4;
  --color-2: #a3b1b8;
  --color-3: #587889;
  --color-4: #464c4f;
  --color-5: #343336;
}

SCSS

$color-1: #cfc7c4;
$color-2: #a3b1b8;
$color-3: #587889;
$color-4: #464c4f;
$color-5: #343336;

TAILWIND

colors: {
  'brand-1': '#cfc7c4',
  'brand-2': '#a3b1b8',
  'brand-3': '#587889',
  'brand-4': '#464c4f',
  'brand-5': '#343336',
}

RGB Array

[207, 199, 196], [163, 177, 184], [88, 120, 137], [70, 76, 79], [52, 51, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #CFC7C4, #A3B1B8, #587889, #464C4F, #343336 is ideal for: brand design, premium product pages, magazine layouts, 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: #cfc7c4; --color-2: #a3b1b8; --color-3: #587889; --color-4: #464c4f; --color-5: #343336. 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. 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