← Back to Editor

#664B5B · #7F6587 · #7A889E · #3FBCAE · #98D4BD

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#664B5B

Rose Purple · DimGray · Camellia

HEX
#664B5B
RGB
rgb(102, 75, 91)
HSL
hsl(324, 15%, 35%)
HSB
hsb(324, 26%, 40%)
CMYK
cmyk(0%, 26%, 11%, 60%)
Oklch
oklch(44.7% 0.044 342.7)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#7F6587

Dark Plum · Gray · Violet

HEX
#7F6587
RGB
rgb(127, 101, 135)
HSL
hsl(286, 14%, 46%)
HSB
hsb(286, 25%, 53%)
CMYK
cmyk(6%, 25%, 0%, 47%)
Oklch
oklch(54.5% 0.060 318.1)

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

#7A889E

Azure · LightSlateGray · Navy Blue

HEX
#7A889E
RGB
rgb(122, 136, 158)
HSL
hsl(217, 16%, 55%)
HSB
hsb(217, 23%, 62%)
CMYK
cmyk(23%, 14%, 0%, 38%)
Oklch
oklch(62.3% 0.037 259.4)

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

#3FBCAE

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#3FBCAE
RGB
rgb(63, 188, 174)
HSL
hsl(173, 50%, 49%)
HSB
hsb(173, 66%, 74%)
CMYK
cmyk(66%, 0%, 7%, 26%)
Oklch
oklch(72.4% 0.110 184.5)

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

#98D4BD

Jade · LightSteelBlue · Apple Green

HEX
#98D4BD
RGB
rgb(152, 212, 189)
HSL
hsl(157, 41%, 71%)
HSB
hsb(157, 28%, 83%)
CMYK
cmyk(28%, 0%, 11%, 17%)
Oklch
oklch(82.2% 0.070 168.9)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

664B5B
4C6757

Analogous

644C67
664B5B
674C4F

Triadic

664B5B
5C674C
4C5C67

Split-Comp.

664B5B
4F674C
4C6764

Tetradic

664B5B
67644C
4C6757
4C4F67

Contrast Matrix WCAG 2.1 Contrast

664B5B
7F6587
7A889E
3FBCAE
98D4BD
—
1.5
Fail
2.1
Fail
3.3
AA Large
4.6
AA
1.5
Fail
—
1.4
Fail
2.2
Fail
3.0
AA Large
2.1
Fail
1.4
Fail
—
1.5
Fail
2.1
Fail
3.3
AA Large
2.2
Fail
1.5
Fail
—
1.4
Fail
4.6
AA
3.0
AA Large
2.1
Fail
1.4
Fail
—
White BG
7.7AAA
5.1AA
3.6AA Large
2.3Fail
1.7Fail
Black BG
2.7Fail
4.1AA Large
5.8AA
9.0AAA
12.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5A5A57
74747F
808099
7576B1
B2B3C3

Deuteranopia

5C5E56
75777D
7F7E97
6E65B2
AFAAC4

Tritanopia

655453
7E7877
7B9494
45B4B5
9BC7C8

Achromatopsia

555555
717171
868686
959595
BFBFBF

Shades & Tints Shades & Tints

#664B5B

Dark
Light

#7F6587

Dark
Light

#7A889E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #664b5b;
  --color-2: #7f6587;
  --color-3: #7a889e;
  --color-4: #3fbcae;
  --color-5: #98d4bd;
}

SCSS

$color-1: #664b5b;
$color-2: #7f6587;
$color-3: #7a889e;
$color-4: #3fbcae;
$color-5: #98d4bd;

TAILWIND

colors: {
  'brand-1': '#664b5b',
  'brand-2': '#7f6587',
  'brand-3': '#7a889e',
  'brand-4': '#3fbcae',
  'brand-5': '#98d4bd',
}

RGB Array

[102, 75, 91], [127, 101, 135], [122, 136, 158], [63, 188, 174], [152, 212, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #664B5B, #7F6587, #7A889E, #3FBCAE, #98D4BD is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #664b5b; --color-2: #7f6587; --color-3: #7a889e; --color-4: #3fbcae; --color-5: #98d4bd. 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. 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. 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