Color palette showcase

Color palette showcase.markdown

Color palette showcase

I really liked how Duminda Perera showcased her colors in "Minimalist Color Palettes 2015" https://www.behance.net/gallery/32154055/Minimalist-Color-Palettes-2015. I decided to use this palette showcase technique to with the theme of my wedding.

A Pen by Steren on CodePen.

License.

index.html

<div class="effect-grain">
  <div class="background effect-blurry"></div>
</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>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <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>

    <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" />
      </feDiffuseLighting>
      <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" />
    </filter>
  </defs>
</svg>

style.css

@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);
}

.effect-grain{
  -webkit-filter: url(#grain);
  filter: url(#grain);
}

.effect-paper{
  -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;
}