Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Color palette showcase
<div class="effect-grain">
<div class="background effect-blurry"></div>
<div class="colors-container">
<div class="color color-1"></div>
<div class="color color-2"></div>
<div class="color color-3"></div>
<div class="color color-4"></div>
<div class="color color-5"></div>
<svg xmlns="" version="1.1">
<filter style="color-interpolation-filters:sRGB;" id="grain">
<feTurbulence type="fractalNoise" numOctaves="10" baseFrequency="0.25" seed="10" result="result0" />
<feColorMatrix result="result4" values="0" type="saturate" />
<feComposite in="SourceGraphic" in2="result4" operator="arithmetic" k1="0" k2="0.5" k3="0.1" result="result2" />
<feBlend result="result5" mode="normal" in="result2" in2="SourceGraphic" />
<filter style="color-interpolation-filters:sRGB;" id="paper">
<feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" seed="0" result="result4" id="feTurbulence4160" scale="4" />
<feDisplacementMap in="SourceGraphic" in2="result4" yChannelSelector="G" xChannelSelector="R" scale="1" result="result3" id="feDisplacementMap4162" />
<feDiffuseLighting lighting-color="rgb(233,230,215)" diffuseConstant="1" surfaceScale="0.2" result="result1" in="result4" id="feDiffuseLighting4164">
<feDistantLight azimuth="235" elevation="40" id="feDistantLight4166" />
<feComposite operator="in" in="result3" in2="result1" result="result2" id="feComposite4168" />
<feComposite in2="result1" result="result5" operator="arithmetic" k1="1.7" id="feComposite4170" />
<feBlend in="result5" in2="result3" mode="normal" id="feBlend4172" />
@dark-blue : #4F7F8F;
@light-blue : #96D5EB;
@blue : #57A3BD;
@dark-sand : #DBCEC1;
@sand : #F7F6F5;
@color1 : @sand;
@color2 : @dark-sand;
@color3 : @light-blue;
@color4 : @dark-blue;
@color5 : @blue;
// height of the pallette
@h : 70vh;
// bqckgroudn blur qmount
@blur: 50px;
body {
background-color: black;
overflow: hidden;
.background {
position: absolute;
top: -@blur;
bottom: -@blur;
left: -@blur;
right: -@blur;
z-index: 0;
background: linear-gradient(to bottom, @color1 20%, @color2 30%, @color3 40%, @color4 50%, @color5 60%);
.effect-blurry {
-webkit-filter: blur(@blur);
filter: blur(@blur);
-webkit-filter: url(#grain);
filter: url(#grain);
-webkit-filter: url(#paper);
filter: url(#paper);
.colors-container {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: @h;
width: calc(0.8 * @h);
background-color: black;
box-shadow: 10px 30px 100px 0px rgba(0,0,0,0.7);
display: flex;
flex-direction: column;
.color {
width: 100%;
flex-grow: 1;
.color-1 {
background-color: @color1;
flex-grow: 3;
.color-2 {
background-color: @color2;
.color-3 {
background-color: @color3;
.color-4 {
background-color: @color4;
.color-5 {
background-color: @color5;
flex-grow: 8;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment