Hex Color Information of #E2EAFB
HEX #
Color Conversion of #E2EAFB
RGB Value for #E2EAFB is (226, 234, 251)
Red : 226
Green : 234
Blue : 251
HSL : (220.8 | 75.76 | 93.53)
#E2EAFB Color Preview on Black Background
#E2EAFB Color Preview on White Background
Gradient color of #E2EAFB to white
CSS Codes
#gradient
{
background: -webkit-linear-gradient(#E2EAFB, white); /* For Safari */
background: -o-linear-gradient(#E2EAFB, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#E2EAFB, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(#E2EAFB, white); /* Standard syntax (must be last) */
}
HTML Codes
<div id="gradient">
Div content will be here</div>
Preview of gradient of #E2EAFB to white
Rounded border of #E2EAFB color
CSS Codes
#roundedDiv
{
border:2px solid #E2EAFB;
padding:10px 40px;
background:#fff;
border-radius:25px;
}
HTML Codes
<div id="roundedDiv">
Div content will be here</div>
Preview of rounded div with border color #E2EAFB
Div content will be here
Box shadow of #E2EAFB color
CSS Codes
#boxShadowDiv
{
height:100px;
background-color:#E2EAFB;
box-shadow: 10px 10px 5px #888888;
}
HTML Codes
<div id="boxShadowDiv">
Div content will be here</div>
Preview of box shadow div with #E2EAFB as background color
Div content will be here
Text shadow of #E2EAFB color
CSS Codes
#textShadow
{
text-shadow: 5px 5px 5px #E2EAFB;
}
HTML Codes
<div id="textShadow">
Div content will be here</div>
Preview of text shadow, shadow color is #E2EAFB
Div content will be here
Bind an animation to an element, background #E2EAFB
CSS Codes
#animation
{
height:100px;
background:#E2EAFB;
animation:myfirst 10s;
-webkit-animation:myfirst 10s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:#E2EAFB;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:#E2EAFB;}
to {background:yellow;}
}
HTML Codes
<div id="animation">
Div content will be here</div>
Preview of text animation, background color #E2EAFB to yellow in 10s
Div content will be here
Horizontal navigation bar for color #E2EAFB
CSS Codes
#ulCSS
{
list-style-type:none;
margin:0;padding:0;overflow:hidden;
}
#ulCSS li{float:left;
}
#ulCSS a:link,#ulCSS a:visited
{
width:100px;display:block;padding:4px;
color:#FFFFFF;background-color:#E2EAFB;
font-weight:bold;text-align:center;
text-decoration:none;
text-transform:uppercase;
}
#ulCSS a:hover,#ulCSS a:active
{
background-color:#fbf3e2;
}
HTML Codes
<ul id="ulCSS">
<li><a href="#home">Home</a></li>
<li><a href="#cssDesign">CSS Design</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
Preview of horizontal navigation bar with suitable color of #E2EAFB
Web page example of this color #E2EAFB
Michael Jackson
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Lorem
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Ipsum
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Duis aute irure dolor
Lorem ipsum dolor sit amet
Duis aute
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip.
Ut labore… »
Excepteur sint occaecat
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ullamco.
Adipisicing elit, sed do eiusmod tempor sunt in culpa qui officia.
Duis aute
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip.
Ut labore… »
Below there is an awesome colors with its own name. Just click the color which you like and see all the details of that color. If you design a web page you will see the sample color for the web site