Maroon Colors  ·  Color Library

Palettes / Colors / #ECECFC

#ECECFC — Pale Blue

#ECECFC is a blue color we call Pale Blue, closest to the named color Lavender (#E6E6FA). It belongs to the blue family.

Color name

Closest CSS keyword: lavender (#E6E6FA) — not an exact match. CSS lavender gives you #E6E6FA, a different color; use #ECECFC when you need this exact shade.

Sources: common names follow widely used color-name references; CSS keywords and their hex values follow the CSS Color specification.

#ECECFC is a cool blue color associated with trust, calm and professionalism. It is light enough to work as a background or base color, with darker text on top.

Its strongest partner is its complement #FCFCED; it also sits naturally between #EDF5FC and #F5EDFC. In the palettes below you can see it working alongside real color combinations from our collection.

#ECECFC · RGB 236, 236, 252

Download PNG swatch SVG

Color values

HEX#ECECFC
RGB236, 236, 252
HSL240°, 73%, 96%
HSV240°, 6%, 99%
CMYK6%, 6%, 0%, 1%
XYZ82.16, 84.85, 104.14
Yxy84.85, 0.3030, 0.3129
CIE-Lab93.82, 2.93, -7.71
Hunter Lab92.12, 2.97, -7.86

RGB & CMYK percentages

Red 93% · Green 93% · Blue 99%

Cyan 6% · Magenta 6% · Yellow 0% · Key 1%

CMYK values are unprofiled approximations for screen reference — not a print-proofing guarantee.

Previews

Sample text in #ECECFC on black
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sample text in #ECECFC on white
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CSS code for #ECECFC

.text { color: #ECECFC; }
.background { background-color: #ECECFC; }
.border { border: 3px solid #ECECFC; }
.text-rgb { color: rgb(236, 236, 252); }
.text-hsl { color: hsl(240, 73%, 96%); }
.text-shadow-hex { text-shadow: 4px 4px 2px #ECECFC; }
.text-shadow-rgba { text-shadow: 4px 4px 2px rgba(236, 236, 252, 0.8); }
.box-shadow-hex { box-shadow: 1px 1px 3px 2px #ECECFC; }
.box-shadow-rgba { box-shadow: 1px 1px 3px 2px rgba(236, 236, 252, 0.8); }

HTML: <p style="color:#ECECFC">Text here</p> · <div style="background-color:#ECECFC">Div content here</div>

Shades of #ECECFC

#C6C6F6#9E9EF0#7272E9#4A4AE3#2222DD#1C1CB5#16168D#0F0F61#090939#030312

Tints of #ECECFC

#EDEDFC#EDEDFC#EDEDFC#EDEDFC#EDEDFC#EDEDFC#EDEDFC#EDEDFC#EDEDFC#EDEDFC

Tones of #ECECFC

#EEEEFB#EFEFFA#F1F1F9#F2F2F8#F3F3F7#F4F4F6

Color harmonies

Complementary — #FCFCED:

Analogous:

Triadic:

Contrast & accessibility

Against white text1.17:1 Fails
Against black text17.97:1 AAA

Best text color on #ECECFC: #000000.

Semi-transparent (opacity) text on #ECECFC

Text set with opacity blends into the background, so its real contrast is lower than the solid ratios above. Choose a text color and an opacity to see the blended color and its true ratio:

100%
Sample heading text
Smaller body text shows the effect best.

Blended color: · Contrast against #ECECFC: ·

How #ECECFC looks with color blindness

Simulated with standard Machado color-vision-deficiency matrices — useful when this color carries meaning in charts, maps or interfaces:

Protanopia · #ECECF8Deuteranopia · #ECECF7Tritanopia · #ECF5F4

Closest design-system colors

The nearest matches in the Tailwind CSS, Material Design and Bootstrap palettes — handy when you need a framework class instead of a raw hex:

Bootstrap light · #F8F9FAMaterial Grey 500 · #9E9E9ETailwind purple 500 · #A855F7

Palettes with a similar color

These palettes use a close neighbour of #ECECFC rather than the exact color:

Palette Ebeaff
#EBEAFF · #9694FF · #3D3BF3 · #FF2929
Palette E4fbff
#E4FBFF · #B8B5FF · #7868E6 · #EDEEF7
Palette B1b2ff
#B1B2FF · #AAC4FF · #D2DAFF · #EEF1FF
Palette F1eaff
#F1EAFF · #E5D4FF · #DCBFFF · #D0A2F7
Palette F9ecec
#F9ECEC · #F0D9DA · #C8D9EB · #ECF2F9
Palette Ecf2ff
#ECF2FF · #E3DFFD · #E5D1FA · #FFF4D2

Similar colors

The closest colors that actually appear in our palette collection — click any to open its page:

#EBEAFF#EDEEF7#EEF1FF#F1EAFF#ECF2F9#ECF2FF#F3E8FF#F0F3FF#F4EEFF#F1F1F6#EFF0F4#E8F1F5

Browse neighbouring colors

← #ECECFB  ·  #ECECFD →

Frequently asked questions

What color is #ECECFC?

#ECECFC is Pale Blue, a blue color (RGB 236, 236, 252). Its closest standard named color is Lavender.

What is the RGB and HSL of #ECECFC?

#ECECFC is RGB 236, 236, 252 — HSL 240°, 73%, 96% — CMYK 6%, 6%, 0%, 1%.

What colors go with #ECECFC?

Its complement is #FCFCED; analogous partners are #EDF5FC and #F5EDFC. It also appears in 6+ palettes in our collection.

Can I use #ECECFC for text?

Black text on #ECECFC has a contrast ratio of 17.97:1 (passes WCAG AA); white text gives 1.17:1.