Blogger HTML Renk Kodları Eklentisi

Artık Blogger sitenizi bu renk kodları ile güzelleştirebilirsiniz. Generate tuşuna basarak farklı renkleri de inceleyebilirsiniz.

Aşağıda vereceğim kodları Blogger Yeni Sayfa HTML bölümüne eklemeniz yeterli olacaktır.

HTML <h2>Random, quasi evenly distributed colors using the golden ratio.</h2>
  <form>
    <label for="maxNums">Swatches:</label>
    <input id="maxNums" type="number" min="1" max="360" value="32">
    <label for="sat">Saturation:</label>
    <input id="sat" type="number" min="0" max="100" value="50">
    <label for="lit">Lightness:</label>
    <input id="lit" type="number" min="0" max="100" value="50">
    <br>
    <label for="minHue">Start Hue:</label>
    <input id="minHue" type="number" min="0" max="359" value="0">
    <label for="maxHue">End Hue:</label>
    <input id="maxHue" type="number" min="0" max="359" value="359">
    <input id="gen" type="button" value="Generate">
  </form>
  <section class="map">
    <svg viewBox="0 0 360 3"></svg>
  </section>
  <section class="swatches"></section>

Şimdi aşağıya CSS Kodlarını ekliyelim.

CSS @import url(https://fonts.googleapis.com/css?family=Fira+Sans:300);

*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
  font: 300 18px/1.25 Fira Sans;
}
body {
  background-color: hsl(90, 5%, 10%);
  margin: 0.5rem;
  color: hsl(0, 0%, 75%);
}
.swatches {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
/*  margin-top: .5rem;*/
}
.swatches > div {
  width: 100px;
  height: 100px;
  margin: 0.25rem;
  padding: 0.5rem;
  border-radius: 5px;
  font: 300 32px/1 Fira Sans;
  color: hsla(0, 0%, 0%, 0.4);
}
input {
  width: 50px;
  font: inherit;
  line-height: 1;
  background-color: inherit;
  color: steelblue;
  border: none;
}
input[type="button"] {
  width: 170px;
  background-color: hsla(0, 0%, 100%, 0.10);
  padding: 4px;
  border: 1px solid hsla(0, 0%, 100%, 0.10);
}
form {
  padding: 0.5rem;
  border-bottom: 1px dashed hsl(0, 0%, 35%);
}
label {
  display: inline-block;
  width: 120px;
  text-align: right;
}
h2 {
  text-align: center;
} 

Son olarak aşağıda ki JavaScript kodlarını ekliyoruz.

JS document.querySelector("#gen").addEventListener("click", genClick, false);

function genClick() {
  var random = Math.random();
  var golden = 0.618033988749895;
  var sectEl = document.querySelector(".swatches");
  var mapEl = document.querySelector(".map > svg");
  var maxNums = document.querySelector("#maxNums").value;
  var min = parseInt(document.querySelector("#minHue").value, 10);
  var max = parseInt(document.querySelector("#maxHue").value, 10);
  var sat = document.querySelector("#sat").value;
  var lit = document.querySelector("#lit").value;

  // sectEl.innerHTML = "";
  while (sectEl.firstChild) {
    sectEl.removeChild(sectEl.firstChild);
  }
  // mapEl.innerHTML = "";
  while (mapEl.firstChild) {
    mapEl.removeChild(mapEl.firstChild);
  }
  for (var i = 0; i < maxNums; i += 1) {
    var distNum = Math.round(((random + (golden * i)) % 1) * (max - min) + min);
    sectEl.appendChild(colorSwatch(distNum, sat, lit));
    mapEl.appendChild(dot(distNum));
  }
}

function colorSwatch(hue, sat, lit) {
  var divEl = document.createElement("div");
  var hslColor = "hsl(" + hue + ", " + sat + "%, " + lit + "%)";
  divEl.style.backgroundColor = hslColor;
  divEl.appendChild(document.createTextNode(hue));
  return divEl;
}

function dot(hue) {
  var circleEl = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  var hslColor = "hsl(" + hue + ", 75%, 50%)";
  circleEl.setAttribute('cx', hue);
  circleEl.setAttribute('cy', 1.5);
  circleEl.setAttribute('r', 1);
  circleEl.style.fill = hslColor;
  return circleEl;
}

genClick();

Bütün işlemler bu kadar herkese kolay gelsin.