← Back to Editor

#604F55 · #E2D7C3 · #B7AA97 · #CCBBA7 · #F5DAC9

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#604F55

Dark Violet · DimGray · Camellia

HEX
#604F55
RGB
rgb(96, 79, 85)
HSL
hsl(339, 10%, 34%)
HSB
hsb(339, 18%, 38%)
CMYK
cmyk(0%, 18%, 11%, 62%)
Oklch
oklch(44.7% 0.024 354.9)

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

#E2D7C3

Goose Yellow · LightGray · Peach Orange

HEX
#E2D7C3
RGB
rgb(226, 215, 195)
HSL
hsl(39, 35%, 83%)
HSB
hsb(39, 14%, 89%)
CMYK
cmyk(0%, 5%, 14%, 11%)
Oklch
oklch(88.3% 0.029 82.6)

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

#B7AA97

Ginger · DarkGray · Warm Sun

HEX
#B7AA97
RGB
rgb(183, 170, 151)
HSL
hsl(36, 18%, 65%)
HSB
hsb(36, 17%, 72%)
CMYK
cmyk(0%, 7%, 17%, 28%)
Oklch
oklch(74.4% 0.031 77.5)

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

#CCBBA7

Goose Yellow · Silver · Warm Sun

HEX
#CCBBA7
RGB
rgb(204, 187, 167)
HSL
hsl(32, 27%, 73%)
HSB
hsb(32, 18%, 80%)
CMYK
cmyk(0%, 8%, 18%, 20%)
Oklch
oklch(80.1% 0.034 71.8)

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

#F5DAC9

Apricot · Bisque · Peach Orange

HEX
#F5DAC9
RGB
rgb(245, 218, 201)
HSL
hsl(23, 69%, 87%)
HSB
hsb(23, 18%, 96%)
CMYK
cmyk(0%, 11%, 18%, 4%)
Oklch
oklch(90.6% 0.038 54.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

604F55
4E5F59

Analogous

5F4E5D
604F55
5F514E

Triadic

604F55
545F4E
4E545F

Split-Comp.

604F55
4E5F51
4E5D5F

Tetradic

604F55
5D5F4E
4E5F59
514E5F

Contrast Matrix WCAG 2.1 Contrast

604F55
E2D7C3
B7AA97
CCBBA7
F5DAC9
—
5.4
AA
3.4
AA Large
4.1
AA Large
5.7
AA
5.4
AA
—
1.6
Fail
1.3
Fail
1.1
Fail
3.4
AA Large
1.6
Fail
—
1.2
Fail
1.7
Fail
4.1
AA Large
1.3
Fail
1.2
Fail
—
1.4
Fail
5.7
AA
1.1
Fail
1.7
Fail
1.4
Fail
—
White BG
7.6AAA
1.4Fail
2.3Fail
1.9Fail
1.3Fail
Black BG
2.7Fail
14.7AAA
9.2AAA
11.2AAA
15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

595854
DDDDC8
B1B19C
C5C4AC
E9E9CD

Deuteranopia

5A5B53
DEDFC9
B2B39D
C6C7AD
EBEDCE

Tritanopia

5F5252
E1CCCD
B69FA0
CBB0B1
F4D0D1

Achromatopsia

555555
D8D8D8
ACACAC
BEBEBE
E0E0E0

Shades & Tints Shades & Tints

#604F55

Dark
Light

#E2D7C3

Dark
Light

#B7AA97

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #604f55;
  --color-2: #e2d7c3;
  --color-3: #b7aa97;
  --color-4: #ccbba7;
  --color-5: #f5dac9;
}

SCSS

$color-1: #604f55;
$color-2: #e2d7c3;
$color-3: #b7aa97;
$color-4: #ccbba7;
$color-5: #f5dac9;

TAILWIND

colors: {
  'brand-1': '#604f55',
  'brand-2': '#e2d7c3',
  'brand-3': '#b7aa97',
  'brand-4': '#ccbba7',
  'brand-5': '#f5dac9',
}

RGB Array

[96, 79, 85], [226, 215, 195], [183, 170, 151], [204, 187, 167], [245, 218, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #604F55, #E2D7C3, #B7AA97, #CCBBA7, #F5DAC9 is ideal for: health products, baby brands, fresh-style blogs, 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: #604f55; --color-2: #e2d7c3; --color-3: #b7aa97; --color-4: #ccbba7; --color-5: #f5dac9. 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 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