#7484C4 + #929FD1 + #A3C6D9 + #C2EDE0 + #E6FCED - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7484C4

Azure · LightSlateGray · Cobalt Blue

HEX

#7484C4

RGB

rgb(116, 132, 196)

HSL

hsl(228, 40%, 61%)

HSB

hsb(228, 41%, 77%)

CMYK

cmyk(41%, 33%, 0%, 23%)

Oklch

oklch(62.7% 0.099 272.6)

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

#929FD1

Azure · DarkGray · Cobalt Blue

HEX

#929FD1

RGB

rgb(146, 159, 209)

HSL

hsl(228, 41%, 70%)

HSB

hsb(228, 30%, 82%)

CMYK

cmyk(30%, 24%, 0%, 18%)

Oklch

oklch(71.1% 0.075 273.1)

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

#A3C6D9

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#A3C6D9

RGB

rgb(163, 198, 217)

HSL

hsl(201, 42%, 75%)

HSB

hsb(201, 25%, 85%)

CMYK

cmyk(25%, 9%, 0%, 15%)

Oklch

oklch(80.7% 0.046 231.8)

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

#C2EDE0

Jade · LightBlue · Glacier Blue

HEX

#C2EDE0

RGB

rgb(194, 237, 224)

HSL

hsl(162, 54%, 85%)

HSB

hsb(162, 18%, 93%)

CMYK

cmyk(18%, 0%, 5%, 7%)

Oklch

oklch(91.2% 0.048 174.9)

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

#E6FCED

Emerald · Beige · Mint Green

HEX

#E6FCED

RGB

rgb(230, 252, 237)

HSL

hsl(139, 79%, 95%)

HSB

hsb(139, 9%, 99%)

CMYK

cmyk(9%, 0%, 6%, 1%)

Oklch

oklch(97.1% 0.030 156.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7484C4

C3B374

Analogous

74ABC3

7484C4

8C74C3

Triadic

7484C4

C37484

84C374

Split-Comp.

7484C4

C38C74

ABC374

Tetradic

7484C4

C374AB

C3B374

74C38C

Contrast Matrix WCAG 2.1 Contrast

7484C4	929FD1	A3C6D9	C2EDE0	E6FCED
—	1.4 Fail	2.0 Fail	2.8 Fail	3.3 AA Large
1.4 Fail	—	1.4 Fail	2.0 Fail	2.4 Fail
2.0 Fail	1.4 Fail	—	1.4 Fail	1.7 Fail
2.8 Fail	2.0 Fail	1.4 Fail	—	1.2 Fail
3.3 AA Large	2.4 Fail	1.7 Fail	1.2 Fail	—

White BG

3.6AA Large

2.6Fail

1.8Fail

1.3Fail

1.1Fail

Black BG

5.8AA

8.1AAA

11.6AAA

16.5AAA

19.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7B7BB5

9898C5

B2B2D4

D5D5E3

F0F0F1

Deuteranopia

7A79B1

9796C2

B0AED3

D2CFE4

EEEDF1

Tritanopia

75A8A6

93BBB9

A5D1D0

C4E6E6

E7F3F4

Achromatopsia

878787

A1A1A1

BEBEBE

DFDFDF

F4F4F4

Shades & Tints Shades & Tints

#7484C4

Dark

Light

#929FD1

Dark

Light

#A3C6D9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7484c4;
  --color-2: #929fd1;
  --color-3: #a3c6d9;
  --color-4: #c2ede0;
  --color-5: #e6fced;
}

SCSS

$color-1: #7484c4;
$color-2: #929fd1;
$color-3: #a3c6d9;
$color-4: #c2ede0;
$color-5: #e6fced;

TAILWIND

colors: {
  'brand-1': '#7484c4',
  'brand-2': '#929fd1',
  'brand-3': '#a3c6d9',
  'brand-4': '#c2ede0',
  'brand-5': '#e6fced',
}

RGB Array

[116, 132, 196], [146, 159, 209], [163, 198, 217], [194, 237, 224], [230, 252, 237]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7484C4, #929FD1, #A3C6D9, #C2EDE0, #E6FCED 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: #7484c4; --color-2: #929fd1; --color-3: #a3c6d9; --color-4: #c2ede0; --color-5: #e6fced. 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