Generator palety kolorów z JavaScript, HTML i CSS3

Narzędzie Internetowe, które generuje harmonijne palety kolorów w oparciu o wybrany kolor bazowy.
Będziesz mieć funkcjonalny generator palet kolorów, który pozwoli użytkownikom bez wysiłku eksplorować i kopiować kolory.

Po wygenerowaniu palety kolorów wystarczy kliknąć na wybrany kolor. Skopiuje się automatycznie do schowka.

Poniżej znajdziesz kody źródłowe do wstawienia na własną stronę www.

Generuj swoje kolory

Kody źródłowe

Jak wstawić generator na własną stronę?

Można to zrobić ręcznie lub pobrać gotowca i go edytować jak dusza zapragnie.

Samodzielnie:

Tworzymy nowy folder a w nim odpowiednie pliki:

index.html
style.css
script.js

I wklejamy poniższe kody źródłowe.

index.html

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Generator palety kolorów</title>
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet"/>
    <!-- Stylesheet-->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <label for="base-color">Wybierz kolor bazowy:</label>
        <input type="color" value="#2196f3" id="base-color" /><br/>
      &nbsp;<br/>
      <button id="generate-btn">Generuj kolory</button><br/>
        &nbsp;<br/>
        <p>Wygenerowana paleta kolorów</p>
      <div id="color-palette" class="color-palette"></div>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

style.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container {
  width: min(500px, 90%);
  text-align: center;
  padding: 36px;
  border-radius: 16px;
  background-color: #ffffff;
  border: solid 1px rgba(204, 204, 204, 0.5),  
}
label {
  font-size: 18px;
  margin-right: 10px;
}
input {
  padding: 5px;
  cursor: pointer;
}
button {
  border: 3px solid #cccccc;
  background-color: transparent;
  border-radius: 5px;
  padding: 8px 16px;
  cursor: pointer;
  margin-left: 10px;
}
.color-palette {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.color-box {
  width: 50px;
  height: 50px;
  margin: 0 5px;
  border-radius: 5px;
  cursor: pointer;
}

script.js

// JavaScript Document
// www.skrip.pl
let generatePalette = () => {
  const baseColorInput = document.getElementById("base-color");
  const colorPaletteContainer = document.getElementById("color-palette");
  const baseColor = baseColorInput.value;
  document.body.style.backgroundColor = baseColor;
  //Clear previous palette
  colorPaletteContainer.innerHTML = "";
  const palette = generateHarmoniousPalette(baseColor);
  palette.forEach((color) => {
    const colorBox = document.createElement("div");
    colorBox.style.backgroundColor = color;
    colorBox.className = "color-box";
    colorBox.addEventListener("click", copyCode);
    colorPaletteContainer.append(colorBox);
  });
};

function generateHarmoniousPalette(baseColor) {
  const numberOfColors = 5;
  const baseHue = extractHue(baseColor);
  const colorPalette = [];
  for (let i = 0; i < numberOfColors; i++) {
    const hue = (baseHue + (360 / numberOfColors) * i) % 360;
    const color = `hsl(${hue},70%,50%)`;
    colorPalette.push(color);
  }
  return colorPalette;
}

function extractHue(color) {
  const hex = color.slice(1);
  const rgb = parseInt(hex, 16);

  const r = (rgb >> 16) & 0xff;
  const g = (rgb >> 8) & 0xff;
  const b = (rgb >> 0) & 0xff;

  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);

  let hue;
  if (max === min) {
    hue = 0;
  } else {
    const d = max - min;
    switch (max) {
      case r:
        hue = ((g - b) / d + (g < b ? 6 : 0)) * 60;
        break;
      case g:
        hue = ((b - r) / d + 2) * 60;
        break;
      case b:
        hue = ((r - g) / d + 4) * 60;
        break;
    }
  }
  return hue;
}

function copyCode(e) {
  let input = document.createElement("input");
  input.type = "text";
  let text = e.target.style.backgroundColor;
  let hex = "#";
  let rgbcode = text.replace(/[rgb()]+/g, "") || rgbcode;
  rgbcode = rgbcode.split(",");
  rgbcode.forEach((value) => {
    value = parseInt(value).toString(16);
    hex += value.length == 1 ? "0" + value : value;
  });
  input.value = hex;
  document.body.appendChild(input);
  input.select();
  document.execCommand("copy");
  document.body.removeChild(input);
  alert("Kolor skopiowany: " + hex);
}

window.addEventListener("load", generatePalette);
document
  .getElementById("generate-btn")
  .addEventListener("click", generatePalette);

Top Stories

Jak nie zostać ofiarą oszustów. Sposób na rozpoznanie fałszywego maila

Wangiri scam – jak nie zostać ofiarą

Statystyki wyszukiwarki PornHub za 2024 rok

Generator palety harmonijnych kolorów Internetowych

Narzędzie Internetowe, które generuje harmonijne palety kolorów w oparciu o wybrany kolor bazowy.

Generator palety kolorów z JavaScript, HTML i CSS3

Generuj swoje kolory

Kody źródłowe

Jak wstawić generator na własną stronę?

Samodzielnie:

index.html

style.css

script.js

Gotowe pliki

Chmurka tagów

Zaprzyjaźniona strona

Najczęściej oglądane wpisy