#A3A6D1 + #A3B7D1 + #A3C8D1 + #A3D9D1 + #A3EAD1 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A3A6D1

Azure · LightSteelBlue · Cobalt Blue

HEX

#A3A6D1

RGB

rgb(163, 166, 209)

HSL

hsl(236, 33%, 73%)

HSB

hsb(236, 22%, 82%)

CMYK

cmyk(22%, 21%, 0%, 18%)

Oklch

oklch(73.8% 0.062 281.6)

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

#A3B7D1

Azure · LightSteelBlue · Cobalt Blue

HEX

#A3B7D1

RGB

rgb(163, 183, 209)

HSL

hsl(214, 33%, 73%)

HSB

hsb(214, 22%, 82%)

CMYK

cmyk(22%, 12%, 0%, 18%)

Oklch

oklch(77.3% 0.043 255.0)

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

#A3C8D1

Sky Blue · LightSteelBlue · Lake Green

HEX

#A3C8D1

RGB

rgb(163, 200, 209)

HSL

hsl(192, 33%, 73%)

HSB

hsb(192, 22%, 82%)

CMYK

cmyk(22%, 4%, 0%, 18%)

Oklch

oklch(80.9% 0.041 214.2)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#A3D9D1

Jade · LightBlue · Lake Green

HEX

#A3D9D1

RGB

rgb(163, 217, 209)

HSL

hsl(171, 42%, 75%)

HSB

hsb(171, 25%, 85%)

CMYK

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

Oklch

oklch(84.6% 0.057 184.9)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#A3EAD1

Jade · LightBlue · Apple Green

HEX

#A3EAD1

RGB

rgb(163, 234, 209)

HSL

hsl(159, 63%, 78%)

HSB

hsb(159, 30%, 92%)

CMYK

cmyk(30%, 0%, 11%, 8%)

Oklch

oklch(88.3% 0.079 170.5)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A3A6D1

D1CEA3

Analogous

A3BDD1

A3A6D1

B7A3D1

Triadic

A3A6D1

D1A3A6

A6D1A3

Split-Comp.

A3A6D1

D1B7A3

BDD1A3

Tetradic

A3A6D1

D1A3BD

D1CEA3

A3D1B7

Contrast Matrix WCAG 2.1 Contrast

A3A6D1	A3B7D1	A3C8D1	A3D9D1	A3EAD1
—	1.1 Fail	1.3 Fail	1.5 Fail	1.7 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.5 Fail
1.3 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.5 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.7 Fail	1.5 Fail	1.3 Fail	1.1 Fail	—

White BG

2.4Fail

2.0Fail

1.8Fail

1.6Fail

1.4Fail

Black BG

8.9AAA

10.3AAA

11.7AAA

13.4AAA

15.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A4A4C7

ACACCB

B3B3CF

BABBD3

C2C2D7

Deuteranopia

A4A4C4

ABA9C9

B1AECE

B7B3D3

BEB8D9

Tritanopia

A3BEBD

A4C6C5

A5CDCD

A6D4D5

A7DCDD

Achromatopsia

AAAAAA

B4B4B4

BEBEBE

C8C8C8

D2D2D2

Shades & Tints Shades & Tints

#A3A6D1

Dark

Light

#A3B7D1

Dark

Light

#A3C8D1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a3a6d1;
  --color-2: #a3b7d1;
  --color-3: #a3c8d1;
  --color-4: #a3d9d1;
  --color-5: #a3ead1;
}

SCSS

$color-1: #a3a6d1;
$color-2: #a3b7d1;
$color-3: #a3c8d1;
$color-4: #a3d9d1;
$color-5: #a3ead1;

TAILWIND

colors: {
  'brand-1': '#a3a6d1',
  'brand-2': '#a3b7d1',
  'brand-3': '#a3c8d1',
  'brand-4': '#a3d9d1',
  'brand-5': '#a3ead1',
}

RGB Array

[163, 166, 209], [163, 183, 209], [163, 200, 209], [163, 217, 209], [163, 234, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #A3A6D1, #A3B7D1, #A3C8D1, #A3D9D1, #A3EAD1 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: #a3a6d1; --color-2: #a3b7d1; --color-3: #a3c8d1; --color-4: #a3d9d1; --color-5: #a3ead1. 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 sea-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