#FFFFFF + #E6F9FF + #C7F3FF + #9AC7D4 + #A68F8F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFFFFF

Moonlight White · White · Cloud White

HEX

#FFFFFF

RGB

rgb(255, 255, 255)

HSL

hsl(0, 0%, 100%)

HSB

hsb(0, 0%, 100%)

CMYK

cmyk(0%, 0%, 0%, 0%)

Oklch

oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#E6F9FF

Sky Blue · Lavender · Glacier Blue

HEX

#E6F9FF

RGB

rgb(230, 249, 255)

HSL

hsl(194, 100%, 95%)

HSB

hsb(194, 10%, 100%)

CMYK

cmyk(10%, 2%, 0%, 0%)

Oklch

oklch(97.0% 0.022 218.6)

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

#C7F3FF

Sky Blue · Lavender · Glacier Blue

HEX

#C7F3FF

RGB

rgb(199, 243, 255)

HSL

hsl(193, 100%, 89%)

HSB

hsb(193, 22%, 100%)

CMYK

cmyk(22%, 5%, 0%, 0%)

Oklch

oklch(93.7% 0.048 216.1)

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

#9AC7D4

Sky Blue · LightSteelBlue · Lake Green

HEX

#9AC7D4

RGB

rgb(154, 199, 212)

HSL

hsl(193, 40%, 72%)

HSB

hsb(193, 27%, 83%)

CMYK

cmyk(27%, 6%, 0%, 17%)

Oklch

oklch(80.2% 0.051 217.4)

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

#A68F8F

Peach Pink · DarkGray · Coral Red

HEX

#A68F8F

RGB

rgb(166, 143, 143)

HSL

hsl(0, 11%, 61%)

HSB

hsb(0, 14%, 65%)

CMYK

cmyk(0%, 14%, 14%, 35%)

Oklch

oklch(67.1% 0.028 17.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFFFFF

Analogous

FFFFFF

Triadic

FFFFFF

Split-Comp.

FFFFFF

Tetradic

FFFFFF

Contrast Matrix WCAG 2.1 Contrast

FFFFFF	E6F9FF	C7F3FF	9AC7D4	A68F8F
—	1.1 Fail	1.2 Fail	1.8 Fail	3.0 AA Large
1.1 Fail	—	1.1 Fail	1.7 Fail	2.8 Fail
1.2 Fail	1.1 Fail	—	1.5 Fail	2.5 Fail
1.8 Fail	1.7 Fail	1.5 Fail	—	1.7 Fail
3.0 AA Large	2.8 Fail	2.5 Fail	1.7 Fail	—

White BG

1.0Fail

1.1Fail

1.2Fail

1.8Fail

3.0AA Large

Black BG

21.0AAA

19.4AAA

17.7AAA

11.5AAA

6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FFFFFF

EEEEFE

DADAFC

ADAED1

9C9C8F

Deuteranopia

FFFFFF

EDECFD

D8D4FB

ABA8D0

9D9F8F

Tritanopia

FFFFFF

E7FCFC

C9FAF9

9CCECE

A58F8F

Achromatopsia

FFFFFF

F4F4F4

E7E7E7

BBBBBB

969696

Shades & Tints Shades & Tints

#FFFFFF

Dark

Light

#E6F9FF

Dark

Light

#C7F3FF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffffff;
  --color-2: #e6f9ff;
  --color-3: #c7f3ff;
  --color-4: #9ac7d4;
  --color-5: #a68f8f;
}

SCSS

$color-1: #ffffff;
$color-2: #e6f9ff;
$color-3: #c7f3ff;
$color-4: #9ac7d4;
$color-5: #a68f8f;

TAILWIND

colors: {
  'brand-1': '#ffffff',
  'brand-2': '#e6f9ff',
  'brand-3': '#c7f3ff',
  'brand-4': '#9ac7d4',
  'brand-5': '#a68f8f',
}

RGB Array

[255, 255, 255], [230, 249, 255], [199, 243, 255], [154, 199, 212], [166, 143, 143]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFFFFF, #E6F9FF, #C7F3FF, #9AC7D4, #A68F8F 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: #ffffff; --color-2: #e6f9ff; --color-3: #c7f3ff; --color-4: #9ac7d4; --color-5: #a68f8f. 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