← Back to Editor

#45474E · #AFC7AE · #E7E1C9 · #DED6C8 · #CFCCC4

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#45474E

Dark Cyan · DarkSlateGray · Charcoal

HEX
#45474E
RGB
rgb(69, 71, 78)
HSL
hsl(227, 6%, 29%)
HSB
hsb(227, 12%, 31%)
CMYK
cmyk(12%, 9%, 0%, 69%)
Oklch
oklch(39.9% 0.012 273.1)

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

#AFC7AE

Celadon · Silver · Apple Green

HEX
#AFC7AE
RGB
rgb(175, 199, 174)
HSL
hsl(118, 18%, 73%)
HSB
hsb(118, 13%, 78%)
CMYK
cmyk(12%, 0%, 13%, 22%)
Oklch
oklch(80.5% 0.043 144.1)

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

#E7E1C9

Goose Yellow · Bisque · Lemon Cream

HEX
#E7E1C9
RGB
rgb(231, 225, 201)
HSL
hsl(48, 38%, 85%)
HSB
hsb(48, 13%, 91%)
CMYK
cmyk(0%, 3%, 13%, 9%)
Oklch
oklch(90.8% 0.033 95.4)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#DED6C8

Goose Yellow · LightGray · Peach Orange

HEX
#DED6C8
RGB
rgb(222, 214, 200)
HSL
hsl(38, 25%, 83%)
HSB
hsb(38, 10%, 87%)
CMYK
cmyk(0%, 4%, 10%, 13%)
Oklch
oklch(87.9% 0.021 81.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#CFCCC4

Goose Yellow · LightGray · Lemon Cream

HEX
#CFCCC4
RGB
rgb(207, 204, 196)
HSL
hsl(44, 10%, 79%)
HSB
hsb(44, 5%, 81%)
CMYK
cmyk(0%, 1%, 5%, 19%)
Oklch
oklch(84.5% 0.011 89.7)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

45474E
4E4C46

Analogous

464C4E
45474E
48464E

Triadic

45474E
4E4647
474E46

Split-Comp.

45474E
4E4846
4C4E46

Tetradic

45474E
4E464C
4E4C46
464E48

Contrast Matrix WCAG 2.1 Contrast

45474E
AFC7AE
E7E1C9
DED6C8
CFCCC4
—
5.1
AA
7.1
AAA
6.4
AA
5.8
AA
5.1
AA
—
1.4
Fail
1.3
Fail
1.1
Fail
7.1
AAA
1.4
Fail
—
1.1
Fail
1.2
Fail
6.4
AA
1.3
Fail
1.1
Fail
—
1.1
Fail
5.8
AA
1.1
Fail
1.2
Fail
1.1
Fail
—
White BG
9.3AAA
1.8Fail
1.3Fail
1.4Fail
1.6Fail
Black BG
2.3Fail
11.6AAA
16.0AAA
14.6AAA
13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

46464C
B9BAB4
E4E4CF
DBDACB
CECEC6

Deuteranopia

46464C
B8B6B6
E5E5D0
DBDCCC
CECEC6

Tritanopia

454B4B
B0B9BA
E7D3D4
DECECF
CFC7C8

Achromatopsia

474747
BDBDBD
E0E0E0
D7D7D7
CCCCCC

Shades & Tints Shades & Tints

#45474E

Dark
Light

#AFC7AE

Dark
Light

#E7E1C9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #45474e;
  --color-2: #afc7ae;
  --color-3: #e7e1c9;
  --color-4: #ded6c8;
  --color-5: #cfccc4;
}

SCSS

$color-1: #45474e;
$color-2: #afc7ae;
$color-3: #e7e1c9;
$color-4: #ded6c8;
$color-5: #cfccc4;

TAILWIND

colors: {
  'brand-1': '#45474e',
  'brand-2': '#afc7ae',
  'brand-3': '#e7e1c9',
  'brand-4': '#ded6c8',
  'brand-5': '#cfccc4',
}

RGB Array

[69, 71, 78], [175, 199, 174], [231, 225, 201], [222, 214, 200], [207, 204, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #45474E, #AFC7AE, #E7E1C9, #DED6C8, #CFCCC4 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, 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: #45474e; --color-2: #afc7ae; --color-3: #e7e1c9; --color-4: #ded6c8; --color-5: #cfccc4. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 general-style 5-color scheme is especially suited for beauty, lifestyle, arts 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