← Back to Editor

#776EA2 · #937EA5 · #D3A7C3 · #EFD7D0 · #F9F7E4

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

#776EA2

Deep Indigo · SlateGray · Navy Blue

HEX
#776EA2
RGB
rgb(119, 110, 162)
HSL
hsl(250, 22%, 53%)
HSB
hsb(250, 32%, 64%)
CMYK
cmyk(27%, 32%, 0%, 36%)
Oklch
oklch(56.7% 0.080 291.6)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#937EA5

Dark Plum · LightSlateGray · Violet

HEX
#937EA5
RGB
rgb(147, 126, 165)
HSL
hsl(272, 18%, 57%)
HSB
hsb(272, 24%, 65%)
CMYK
cmyk(11%, 24%, 0%, 35%)
Oklch
oklch(62.6% 0.062 309.0)

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

#D3A7C3

Mauve · Silver · Rose Pink

HEX
#D3A7C3
RGB
rgb(211, 167, 195)
HSL
hsl(322, 33%, 74%)
HSB
hsb(322, 21%, 83%)
CMYK
cmyk(0%, 21%, 8%, 17%)
Oklch
oklch(77.7% 0.063 340.2)

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

#EFD7D0

Peach Pink · Bisque · Cherry Blossom

HEX
#EFD7D0
RGB
rgb(239, 215, 208)
HSL
hsl(14, 49%, 88%)
HSB
hsb(14, 13%, 94%)
CMYK
cmyk(0%, 10%, 13%, 6%)
Oklch
oklch(89.7% 0.028 36.9)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#F9F7E4

Fresh Green · Linen · Lemon Cream

HEX
#F9F7E4
RGB
rgb(249, 247, 228)
HSL
hsl(54, 64%, 94%)
HSB
hsb(54, 8%, 98%)
CMYK
cmyk(0%, 1%, 8%, 2%)
Oklch
oklch(97.3% 0.025 102.0)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

776EA2
99A26D

Analogous

6D7EA2
776EA2
906DA2

Triadic

776EA2
A2766D
6DA276

Split-Comp.

776EA2
A2906D
7EA26D

Tetradic

776EA2
A26D7E
99A26D
6DA290

Contrast Matrix WCAG 2.1 Contrast

776EA2
937EA5
D3A7C3
EFD7D0
F9F7E4
—
1.3
Fail
2.2
Fail
3.4
AA Large
4.3
AA Large
1.3
Fail
—
1.7
Fail
2.7
Fail
3.4
AA Large
2.2
Fail
1.7
Fail
—
1.5
Fail
1.9
Fail
3.4
AA Large
2.7
Fail
1.5
Fail
—
1.3
Fail
4.3
AA Large
3.4
AA Large
1.9
Fail
1.3
Fail
—
White BG
4.6AA
3.6AA Large
2.1Fail
1.4Fail
1.1Fail
Black BG
4.5AA
5.8AA
10.1AAA
15.3AAA
19.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

737395
8A8A9C
C0C0BC
E5E4D2
F8F8E9

Deuteranopia

747492
8B8D99
C3C6BB
E6E8D2
F8F8EA

Tritanopia

778B89
929492
D1B7B6
EED3D3
F9ECED

Achromatopsia

777777
898989
B7B7B7
DDDDDD
F5F5F5

Shades & Tints Shades & Tints

#776EA2

Dark
Light

#937EA5

Dark
Light

#D3A7C3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #776ea2;
  --color-2: #937ea5;
  --color-3: #d3a7c3;
  --color-4: #efd7d0;
  --color-5: #f9f7e4;
}

SCSS

$color-1: #776ea2;
$color-2: #937ea5;
$color-3: #d3a7c3;
$color-4: #efd7d0;
$color-5: #f9f7e4;

TAILWIND

colors: {
  'brand-1': '#776ea2',
  'brand-2': '#937ea5',
  'brand-3': '#d3a7c3',
  'brand-4': '#efd7d0',
  'brand-5': '#f9f7e4',
}

RGB Array

[119, 110, 162], [147, 126, 165], [211, 167, 195], [239, 215, 208], [249, 247, 228]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #776EA2, #937EA5, #D3A7C3, #EFD7D0, #F9F7E4 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: #776ea2; --color-2: #937ea5; --color-3: #d3a7c3; --color-4: #efd7d0; --color-5: #f9f7e4. 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