CSS Color Schemes

CSS Color Schemes

code tech

The CSS Style

# HTML/CSS color scheme display
# Rounded corenrs, colors hover effect
# Responsive and minimal code
# 5 lines of CSS code
# Free

/* COLOR SCHEMES */ .scheme {margin-bottom: 25px;} .color, .first, .last { width: 100%; height: 60px; margin: 0 auto; text-align: center; padding-top: 20px; } .first{ border-radius: 5px 5px 0 0; } .last { border-radius: 0 0 5px 5px;} .color:hover, .first:hover, .last:hover {opacity: 0.8;}

The HTML

<div class="scheme"> <div class="first" style="background-color:#f2eeeb;">Soft Peach / #f2eeeb</div> <div class="color" style="background-color:#412b76; color:#fff;">Meteorite / #412b76</div> <div class="last" style="background-color:#2ee8b6;">Dark Mint Green / #2ee8b6</div> </div>

Demo

Soft Peach / #f2eeeb

Meteorite / #412b76

Dark Mint Green / #2ee8b6