← Back to Editor

#7A6771 · #898D96 · #7DB2B8 · #CADAE0 · #E3E6DF

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

#7A6771

Rose Purple · DimGray · Warm Gray

HEX
#7A6771
RGB
rgb(122, 103, 113)
HSL
hsl(328, 8%, 44%)
HSB
hsb(328, 16%, 48%)
CMYK
cmyk(0%, 16%, 7%, 52%)
Oklch
oklch(53.5% 0.028 345.1)

Traditional「Rose Purple」· Paint「Warm Gray」· Creative Urban Concrete

#898D96

Ash · LightSlateGray · Silver Sand

HEX
#898D96
RGB
rgb(137, 141, 150)
HSL
hsl(222, 6%, 56%)
HSB
hsb(222, 9%, 59%)
CMYK
cmyk(9%, 6%, 0%, 41%)
Oklch
oklch(64.3% 0.014 266.6)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#7DB2B8

Sky Blue · MediumAquaMarine · Lake Green

HEX
#7DB2B8
RGB
rgb(125, 178, 184)
HSL
hsl(186, 29%, 61%)
HSB
hsb(186, 32%, 72%)
CMYK
cmyk(32%, 3%, 0%, 28%)
Oklch
oklch(72.9% 0.056 204.9)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#CADAE0

Sky Blue · LightGray · Glacier Blue

HEX
#CADAE0
RGB
rgb(202, 218, 224)
HSL
hsl(196, 26%, 84%)
HSB
hsb(196, 10%, 88%)
CMYK
cmyk(10%, 3%, 0%, 12%)
Oklch
oklch(87.8% 0.019 222.2)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#E3E6DF

Willow Green · Beige · Mint Green

HEX
#E3E6DF
RGB
rgb(227, 230, 223)
HSL
hsl(86, 12%, 89%)
HSB
hsb(86, 3%, 90%)
CMYK
cmyk(1%, 0%, 3%, 10%)
Oklch
oklch(92.1% 0.010 125.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7A6771
677970

Analogous

796779
7A6771
796768

Triadic

7A6771
717967
677179

Split-Comp.

7A6771
687967
677979

Tetradic

7A6771
797967
677970
676879

Contrast Matrix WCAG 2.1 Contrast

7A6771
898D96
7DB2B8
CADAE0
E3E6DF
—
1.6
Fail
2.2
Fail
3.6
AA Large
4.2
AA Large
1.6
Fail
—
1.4
Fail
2.3
Fail
2.6
Fail
2.2
Fail
1.4
Fail
—
1.6
Fail
1.9
Fail
3.6
AA Large
2.3
Fail
1.6
Fail
—
1.1
Fail
4.2
AA Large
2.6
Fail
1.9
Fail
1.1
Fail
—
White BG
5.2AA
3.3AA Large
2.4Fail
1.4Fail
1.3Fail
Black BG
4.0AA Large
6.3AA
8.9AAA
14.6AAA
16.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

72726F
8B8B94
9494B7
D1D1DF
E4E4E1

Deuteranopia

73746E
8B8A93
918DB6
D0CFDE
E4E4E1

Tritanopia

796D6C
899292
80B5B5
CBDDDD
E3E2E2

Achromatopsia

6E6E6E
8D8D8D
A3A3A3
D6D6D6
E4E4E4

Shades & Tints Shades & Tints

#7A6771

Dark
Light

#898D96

Dark
Light

#7DB2B8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7a6771;
  --color-2: #898d96;
  --color-3: #7db2b8;
  --color-4: #cadae0;
  --color-5: #e3e6df;
}

SCSS

$color-1: #7a6771;
$color-2: #898d96;
$color-3: #7db2b8;
$color-4: #cadae0;
$color-5: #e3e6df;

TAILWIND

colors: {
  'brand-1': '#7a6771',
  'brand-2': '#898d96',
  'brand-3': '#7db2b8',
  'brand-4': '#cadae0',
  'brand-5': '#e3e6df',
}

RGB Array

[122, 103, 113], [137, 141, 150], [125, 178, 184], [202, 218, 224], [227, 230, 223]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7A6771, #898D96, #7DB2B8, #CADAE0, #E3E6DF 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: #7a6771; --color-2: #898d96; --color-3: #7db2b8; --color-4: #cadae0; --color-5: #e3e6df. 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