#626B94 + #6F9DB8 + #A2A8C2 + #D4B2CC + #F2BFC2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#626B94

Indigo · SlateGray · Navy Blue

HEX

#626B94

RGB

rgb(98, 107, 148)

HSL

hsl(229, 20%, 48%)

HSB

hsb(229, 34%, 58%)

CMYK

cmyk(34%, 28%, 0%, 42%)

Oklch

oklch(53.7% 0.065 274.5)

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

#6F9DB8

Slate Blue · CadetBlue · Navy Blue

HEX

#6F9DB8

RGB

rgb(111, 157, 184)

HSL

hsl(202, 34%, 58%)

HSB

hsb(202, 40%, 72%)

CMYK

cmyk(40%, 15%, 0%, 28%)

Oklch

oklch(67.3% 0.064 234.7)

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

#A2A8C2

Azure · DarkGray · Cobalt Blue

HEX

#A2A8C2

RGB

rgb(162, 168, 194)

HSL

hsl(229, 21%, 70%)

HSB

hsb(229, 16%, 76%)

CMYK

cmyk(16%, 13%, 0%, 24%)

Oklch

oklch(73.5% 0.038 275.2)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#D4B2CC

Mauve · Silver · Lilac Purple

HEX

#D4B2CC

RGB

rgb(212, 178, 204)

HSL

hsl(314, 28%, 76%)

HSB

hsb(314, 16%, 83%)

CMYK

cmyk(0%, 16%, 4%, 17%)

Oklch

oklch(80.1% 0.052 334.3)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#F2BFC2

Peach Pink · Pink · Cherry Blossom

HEX

#F2BFC2

RGB

rgb(242, 191, 194)

HSL

hsl(356, 66%, 85%)

HSB

hsb(356, 21%, 95%)

CMYK

cmyk(0%, 21%, 20%, 5%)

Oklch

oklch(85.1% 0.059 14.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

626B94

938A62

Analogous

628393

626B94

716293

Triadic

626B94

93626B

6B9362

Split-Comp.

626B94

937162

839362

Tetradic

626B94

936283

938A62

629371

Contrast Matrix WCAG 2.1 Contrast

626B94	6F9DB8	A2A8C2	D4B2CC	F2BFC2
—	1.8 Fail	2.2 Fail	2.7 Fail	3.2 AA Large
1.8 Fail	—	1.2 Fail	1.5 Fail	1.8 Fail
2.2 Fail	1.2 Fail	—	1.2 Fail	1.5 Fail
2.7 Fail	1.5 Fail	1.2 Fail	—	1.2 Fail
3.2 AA Large	1.8 Fail	1.5 Fail	1.2 Fail	—

White BG

5.2AA

2.9Fail

2.4Fail

1.9Fail

1.6Fail

Black BG

4.1AA Large

7.2AAA

8.9AAA

11.0AAA

13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

66668A

8383B1

A5A5BC

C5C5C6

DCDBC1

Deuteranopia

656588

807DB0

A4A4BA

C7CAC4

DFE3C1

Tritanopia

628281

71ACAB

A2B7B6

D2C1C0

EFC1C1

Achromatopsia

6D6D6D

929292

A9A9A9

BFBFBF

CFCFCF

Shades & Tints Shades & Tints

#626B94

Dark

Light

#6F9DB8

Dark

Light

#A2A8C2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #626b94;
  --color-2: #6f9db8;
  --color-3: #a2a8c2;
  --color-4: #d4b2cc;
  --color-5: #f2bfc2;
}

SCSS

$color-1: #626b94;
$color-2: #6f9db8;
$color-3: #a2a8c2;
$color-4: #d4b2cc;
$color-5: #f2bfc2;

TAILWIND

colors: {
  'brand-1': '#626b94',
  'brand-2': '#6f9db8',
  'brand-3': '#a2a8c2',
  'brand-4': '#d4b2cc',
  'brand-5': '#f2bfc2',
}

RGB Array

[98, 107, 148], [111, 157, 184], [162, 168, 194], [212, 178, 204], [242, 191, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #626B94, #6F9DB8, #A2A8C2, #D4B2CC, #F2BFC2 is ideal for: health products, baby brands, fresh-style blogs. 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: #626b94; --color-2: #6f9db8; --color-3: #a2a8c2; --color-4: #d4b2cc; --color-5: #f2bfc2. 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. 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