Generator kolorów RGB do wstawienia na stronę www

Spis treści

Generator kolorów RGB
Kolory RGB
Jak wstawić generator kolorów na własną stronę?

Generator kolorów RGB

R: 🔴 Czerwony: 0

G: 🟢 Zielony: 0

B: 🔵 Niebieski: 0

RGB(0, 0, 0)

HEX: #000000

Kolory RGB

Generator kolorów RGB to narzędzie, które pozwala tworzyć dowolne kolory poprzez manipulację trzema podstawowymi składnikami: Red (czerwony), Green (zielony) i Blue (niebieski). Każdy z tych kanałów może przyjmować wartość od 0 do 255, co daje aż 16 777 216 możliwych kombinacji kolorów.

Addytywne mieszanie kolorów: Kolory powstają przez dodawanie światła. Im więcej światła dodasz, tym jaśniejszy kolor uzyskasz.

Tworzenie kolorów:

- (0, 0, 0) = czarny
- (255, 0, 0) = czysty czerwony
- (0, 255, 0) = czysty zielony
- (0, 0, 255) = czysty niebieski
- (255, 255, 0) = żółty (czerwony + zielony)
- (0, 255, 255) = cyjan (zielony + niebieski)
- (255, 0, 255) = magenta (czerwony + niebieski)
- (255, 255, 255) = biały

Po stworzeniu właściwego koloru można go skopiować w formacie RGB lub HEX.

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

Można to zrobić ręcznie lub pobrać gotowe pliki i edytować je jak dusza zapragnie.

Samodzielnie:

Tworzymy nowy folder a w nim plik index.html.

I wklejamy poniższy kod źródłowy.

index.html

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Generator kolorów RGB</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      text-align: center;
      padding: 30px;
    }
    .color-box {
      width: 300px;
      height: 150px;
      margin: 20px auto;
      border: 2px solid #333;
      background-color: rgb(0, 0, 0);
    }
    .slider-container {
      margin: 10px 0;
    }
    input[type="range"] {
      width: 200px;
    }
    .output {
      font-weight: bold;
      margin-top: 10px;
    }
    .button {
      margin: 10px 5px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
    .copied {
      color: green;
      font-size: 14px;
      margin-top: 5px;
    }
  </style>
</head>
<body>

  <h1>🎨 Generator kolorów RGB</h1>

  <div class="color-box" id="colorBox"></div>

  <div class="slider-container">
    <label for="red">🔴 Czerwony: <span id="redVal">0</span></label><br>
    <input type="range" id="red" min="0" max="255" value="0">
  </div>

  <div class="slider-container">
    <label for="green">🟢 Zielony: <span id="greenVal">0</span></label><br>
    <input type="range" id="green" min="0" max="255" value="0">
  </div>

  <div class="slider-container">
    <label for="blue">🔵 Niebieski: <span id="blueVal">0</span></label><br>
    <input type="range" id="blue" min="0" max="255" value="0">
  </div>

  <div class="output" id="rgbOutput">RGB(0, 0, 0)</div>
  <button class="button" onclick="copyToClipboard(rgbOutput.textContent)">📋 Kopiuj RGB</button>

  <div class="output" id="hexOutput">HEX: #000000</div>
  <button class="button" onclick="copyToClipboard(hexOutput.textContent)">📋 Kopiuj HEX</button>

  <div class="copied" id="copiedMsg"></div>

  <button class="button" onclick="generateRandomColor()">🎲 Losowy kolor</button>

  <script>
    const redSlider = document.getElementById('red');
    const greenSlider = document.getElementById('green');
    const blueSlider = document.getElementById('blue');
    const colorBox = document.getElementById('colorBox');
    const rgbOutput = document.getElementById('rgbOutput');
    const hexOutput = document.getElementById('hexOutput');
    const copiedMsg = document.getElementById('copiedMsg');

    function updateColor() {
      const r = parseInt(redSlider.value);
      const g = parseInt(greenSlider.value);
      const b = parseInt(blueSlider.value);

      document.getElementById('redVal').textContent = r;
      document.getElementById('greenVal').textContent = g;
      document.getElementById('blueVal').textContent = b;

      const rgb = `rgb(${r}, ${g}, ${b})`;
      const hex = rgbToHex(r, g, b);

      colorBox.style.backgroundColor = rgb;
      rgbOutput.textContent = `RGB(${r}, ${g}, ${b})`;
      hexOutput.textContent = `HEX: ${hex}`;
    }

    function rgbToHex(r, g, b) {
      return "#" + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
    }

    function generateRandomColor() {
      redSlider.value = Math.floor(Math.random() * 256);
      greenSlider.value = Math.floor(Math.random() * 256);
      blueSlider.value = Math.floor(Math.random() * 256);
      updateColor();
    }

    function copyToClipboard(text) {
      navigator.clipboard.writeText(text).then(() => {
        copiedMsg.textContent = "✅ Skopiowano: " + text;
        setTimeout(() => copiedMsg.textContent = "", 2000);
      });
    }

    redSlider.addEventListener('input', updateColor);
    greenSlider.addEventListener('input', updateColor);
    blueSlider.addEventListener('input', updateColor);

    updateColor(); // inicjalizacja
  </script>

</body>
</html>

Top Stories

Kalkulator równań kwadratowych

Przelicznik Walut online – oparte na notowaniach NBP

Gra w wojnę – prosta gra w karty

Generator kolorów RGB do wstawienia na stronę www

Generator kolorów RGB to narzędzie, które pozwala tworzyć dowolne kolory poprzez manipulację trzema podstawowymi składnikami

Generator kolorów RGB