#A5BDE4 + #FDFBF0 + #C6D1E2 + #E0E1E2 + #F7F5E9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A5BDE4

Azure · LightSteelBlue · Cobalt Blue

HEX

#A5BDE4

RGB

rgb(165, 189, 228)

HSL

hsl(217, 54%, 77%)

HSB

hsb(217, 28%, 89%)

CMYK

cmyk(28%, 17%, 0%, 11%)

Oklch

oklch(79.4% 0.062 260.1)

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

#FDFBF0

Fresh Green · SeaShell · Lemon Cream

HEX

#FDFBF0

RGB

rgb(253, 251, 240)

HSL

hsl(51, 76%, 97%)

HSB

hsb(51, 5%, 99%)

CMYK

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

Oklch

oklch(98.7% 0.015 98.3)

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

#C6D1E2

Azure · LightGray · Sky Blue

HEX

#C6D1E2

RGB

rgb(198, 209, 226)

HSL

hsl(216, 33%, 83%)

HSB

hsb(216, 12%, 89%)

CMYK

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

Oklch

oklch(85.7% 0.026 259.0)

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

#E0E1E2

Plain White · LightGray · Cloud White

HEX

#E0E1E2

RGB

rgb(224, 225, 226)

HSL

hsl(210, 3%, 88%)

HSB

hsb(210, 1%, 89%)

CMYK

cmyk(1%, 0%, 0%, 11%)

Oklch

oklch(90.9% 0.002 247.8)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#F7F5E9

Fresh Green · Linen · Lemon Cream

HEX

#F7F5E9

RGB

rgb(247, 245, 233)

HSL

hsl(51, 47%, 94%)

HSB

hsb(51, 6%, 97%)

CMYK

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

Oklch

oklch(96.8% 0.016 99.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A5BDE4

E4CCA5

Analogous

A5DDE4

A5BDE4

ACA5E4

Triadic

A5BDE4

E4A5BD

BDE4A5

Split-Comp.

A5BDE4

E4ACA5

DDE4A5

Tetradic

A5BDE4

E4A5DD

E4CCA5

A5E4AC

Contrast Matrix WCAG 2.1 Contrast

A5BDE4	FDFBF0	C6D1E2	E0E1E2	F7F5E9
—	1.8 Fail	1.2 Fail	1.5 Fail	1.7 Fail
1.8 Fail	—	1.5 Fail	1.3 Fail	1.1 Fail
1.2 Fail	1.5 Fail	—	1.2 Fail	1.4 Fail
1.5 Fail	1.3 Fail	1.2 Fail	—	1.2 Fail
1.7 Fail	1.1 Fail	1.4 Fail	1.2 Fail	—

White BG

1.9Fail

1.0Fail

1.5Fail

1.3Fail

1.1Fail

Black BG

11.0AAA

20.2AAA

13.6AAA

16.0AAA

19.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFB0DB

FCFCF3

CBCBDE

E0E0E2

F6F6EC

Deuteranopia

AEACD8

FCFCF3

CAC9DD

E0E0E2

F6F6ED

Tritanopia

A6D3D1

FDF5F5

C7DBDA

E0E2E2

F7EEEF

Achromatopsia

BABABA

FAFAFA

D0D0D0

E1E1E1

F4F4F4

Shades & Tints Shades & Tints

#A5BDE4

Dark

Light

#FDFBF0

Dark

Light

#C6D1E2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a5bde4;
  --color-2: #fdfbf0;
  --color-3: #c6d1e2;
  --color-4: #e0e1e2;
  --color-5: #f7f5e9;
}

SCSS

$color-1: #a5bde4;
$color-2: #fdfbf0;
$color-3: #c6d1e2;
$color-4: #e0e1e2;
$color-5: #f7f5e9;

TAILWIND

colors: {
  'brand-1': '#a5bde4',
  'brand-2': '#fdfbf0',
  'brand-3': '#c6d1e2',
  'brand-4': '#e0e1e2',
  'brand-5': '#f7f5e9',
}

RGB Array

[165, 189, 228], [253, 251, 240], [198, 209, 226], [224, 225, 226], [247, 245, 233]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A5BDE4, #FDFBF0, #C6D1E2, #E0E1E2, #F7F5E9 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: #a5bde4; --color-2: #fdfbf0; --color-3: #c6d1e2; --color-4: #e0e1e2; --color-5: #f7f5e9. 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