#7399AC + #A1BCCD + #ABC6D7 + #FCFCF0 + #E2E7EA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7399AC

Slate Blue · CadetBlue · Navy Blue

HEX

#7399AC

RGB

rgb(115, 153, 172)

HSL

hsl(200, 26%, 56%)

HSB

hsb(200, 33%, 67%)

CMYK

cmyk(33%, 11%, 0%, 33%)

Oklch

oklch(66.2% 0.050 230.1)

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

#A1BCCD

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#A1BCCD

RGB

rgb(161, 188, 205)

HSL

hsl(203, 31%, 72%)

HSB

hsb(203, 21%, 80%)

CMYK

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

Oklch

oklch(78.1% 0.038 235.6)

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

#ABC6D7

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#ABC6D7

RGB

rgb(171, 198, 215)

HSL

hsl(203, 35%, 76%)

HSB

hsb(203, 20%, 84%)

CMYK

cmyk(20%, 8%, 0%, 16%)

Oklch

oklch(81.2% 0.038 235.6)

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

#FCFCF0

Fresh Green · SeaShell · Lemon Cream

HEX

#FCFCF0

RGB

rgb(252, 252, 240)

HSL

hsl(60, 67%, 96%)

HSB

hsb(60, 5%, 99%)

CMYK

cmyk(0%, 0%, 5%, 1%)

Oklch

oklch(98.8% 0.016 106.7)

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

#E2E7EA

Sky Blue · Lavender · Sky Blue

HEX

#E2E7EA

RGB

rgb(226, 231, 234)

HSL

hsl(202, 16%, 90%)

HSB

hsb(202, 3%, 92%)

CMYK

cmyk(3%, 1%, 0%, 8%)

Oklch

oklch(92.5% 0.007 233.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7399AC

AC8572

Analogous

72ACA2

7399AC

727BAC

Triadic

7399AC

AC7299

99AC72

Split-Comp.

7399AC

AC727B

ACA272

Tetradic

7399AC

A272AC

AC8572

7BAC72

Contrast Matrix WCAG 2.1 Contrast

7399AC	A1BCCD	ABC6D7	FCFCF0	E2E7EA
—	1.5 Fail	1.7 Fail	3.0 Fail	2.4 Fail
1.5 Fail	—	1.1 Fail	1.9 Fail	1.6 Fail
1.7 Fail	1.1 Fail	—	1.7 Fail	1.4 Fail
3.0 Fail	1.9 Fail	1.7 Fail	—	1.2 Fail
2.4 Fail	1.6 Fail	1.4 Fail	1.2 Fail	—

White BG

3.1AA Large

2.0Fail

1.8Fail

1.0Fail

1.2Fail

Black BG

6.9AA

10.6AAA

11.8AAA

20.3AAA

16.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8384A7

ADADC9

B7B7D3

FCFCF3

E4E4E9

Deuteranopia

817EA6

ABA9C8

B5B3D2

FCFCF4

E4E4E9

Tritanopia

75A4A3

A2C6C5

ACD0CF

FCF5F6

E2E9E9

Achromatopsia

909090

B6B6B6

C0C0C0

FBFBFB

E6E6E6

Shades & Tints Shades & Tints

#7399AC

Dark

Light

#A1BCCD

Dark

Light

#ABC6D7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7399ac;
  --color-2: #a1bccd;
  --color-3: #abc6d7;
  --color-4: #fcfcf0;
  --color-5: #e2e7ea;
}

SCSS

$color-1: #7399ac;
$color-2: #a1bccd;
$color-3: #abc6d7;
$color-4: #fcfcf0;
$color-5: #e2e7ea;

TAILWIND

colors: {
  'brand-1': '#7399ac',
  'brand-2': '#a1bccd',
  'brand-3': '#abc6d7',
  'brand-4': '#fcfcf0',
  'brand-5': '#e2e7ea',
}

RGB Array

[115, 153, 172], [161, 188, 205], [171, 198, 215], [252, 252, 240], [226, 231, 234]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7399AC, #A1BCCD, #ABC6D7, #FCFCF0, #E2E7EA 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: #7399ac; --color-2: #a1bccd; --color-3: #abc6d7; --color-4: #fcfcf0; --color-5: #e2e7ea. 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