← Back to Editor

#7D6E8B · #68829D · #2398B9 · #A491AF · #FD61AA

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

#7D6E8B

Dark Plum · Gray · Violet

HEX
#7D6E8B
RGB
rgb(125, 110, 139)
HSL
hsl(271, 12%, 49%)
HSB
hsb(271, 21%, 55%)
CMYK
cmyk(10%, 21%, 0%, 45%)
Oklch
oklch(56.3% 0.047 308.3)

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

#68829D

Azure · SlateGray · Navy Blue

HEX
#68829D
RGB
rgb(104, 130, 157)
HSL
hsl(211, 21%, 51%)
HSB
hsb(211, 34%, 62%)
CMYK
cmyk(34%, 17%, 0%, 38%)
Oklch
oklch(59.6% 0.051 249.7)

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

#2398B9

Lake Blue · LightSeaGreen · Mint Ice

HEX
#2398B9
RGB
rgb(35, 152, 185)
HSL
hsl(193, 68%, 43%)
HSB
hsb(193, 81%, 73%)
CMYK
cmyk(81%, 18%, 0%, 27%)
Oklch
oklch(63.3% 0.109 222.2)

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

#A491AF

Lilac · DarkGray · Lilac Purple

HEX
#A491AF
RGB
rgb(164, 145, 175)
HSL
hsl(278, 16%, 63%)
HSB
hsb(278, 17%, 69%)
CMYK
cmyk(6%, 17%, 0%, 31%)
Oklch
oklch(68.3% 0.048 313.2)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#FD61AA

Rouge · LightCoral · Rose Pink

HEX
#FD61AA
RGB
rgb(253, 97, 170)
HSL
hsl(332, 98%, 69%)
HSB
hsb(332, 62%, 99%)
CMYK
cmyk(0%, 62%, 33%, 1%)
Oklch
oklch(71.3% 0.202 354.4)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7D6E8B
7C8C6E

Analogous

6E6E8C
7D6E8B
8C6E8B

Triadic

7D6E8B
8C7D6E
6E8C7D

Split-Comp.

7D6E8B
8B8C6E
6E8C6E

Tetradic

7D6E8B
8C6E6E
7C8C6E
6E8B8C

Contrast Matrix WCAG 2.1 Contrast

7D6E8B
68829D
2398B9
A491AF
FD61AA
—
1.2
Fail
1.4
Fail
1.6
Fail
1.7
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
1.4
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
1.2
Fail
1.6
Fail
1.4
Fail
1.2
Fail
—
1.0
Fail
1.7
Fail
1.4
Fail
1.2
Fail
1.0
Fail
—
White BG
4.7AA
4.0AA Large
3.4AA Large
2.9Fail
2.8Fail
Black BG
4.5AA Large
5.3AA
6.3AA
7.2AAA
7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

777684
737396
5657B1
9C9CA8
B9B898

Deuteranopia

777982
727095
4F46AF
9D9EA6
C3CE94

Tritanopia

7C7E7D
699190
29ABA9
A3A2A1
F58A87

Achromatopsia

767676
7D7D7D
797979
9A9A9A
989898

Shades & Tints Shades & Tints

#7D6E8B

Dark
Light

#68829D

Dark
Light

#2398B9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7d6e8b;
  --color-2: #68829d;
  --color-3: #2398b9;
  --color-4: #a491af;
  --color-5: #fd61aa;
}

SCSS

$color-1: #7d6e8b;
$color-2: #68829d;
$color-3: #2398b9;
$color-4: #a491af;
$color-5: #fd61aa;

TAILWIND

colors: {
  'brand-1': '#7d6e8b',
  'brand-2': '#68829d',
  'brand-3': '#2398b9',
  'brand-4': '#a491af',
  'brand-5': '#fd61aa',
}

RGB Array

[125, 110, 139], [104, 130, 157], [35, 152, 185], [164, 145, 175], [253, 97, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7D6E8B, #68829D, #2398B9, #A491AF, #FD61AA is ideal for: corporate websites, product showcases, portfolios. 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: #7d6e8b; --color-2: #68829d; --color-3: #2398b9; --color-4: #a491af; --color-5: #fd61aa. 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. 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