Generator Harmonijnej palety kolorów CSS

Spis treści

Czym jest harmoniczna paleta kolorów?
Generator Kolorów Harmonijnych
Funkcjonalność
Do czego służy paleta kolorów?

Czym jest harmoniczna paleta kolorów?

Harmoniczna paleta kolorów to zestaw barw, które są ze sobą wizualnie zgodne i tworzą przyjemną dla oka kompozycję. Kolory w takich paletach są ze sobą powiązane poprzez określone relacje w kole kolorów.

Stosowanie harmonicznych palet w projektowaniu:

- Zwiększa atrakcyjność wizualną projektu
- Tworzy spójność i porządek
- Ułatwia odbiór i nawigację
- Wzmacnia przekaz i emocje

Generator Kolorów Harmonijnych

Wybierz kolor bazowy i wygeneruj harmonijną paletę kolorów

Kolor bazowy

#3498db

Wybierz kolor bazowy:

Podgląd kodu CSS:

Skopiowano do schowka!

Funkcjonalność

- Wybór koloru bazowego – za pomocą natywnego inputa color
- Generowanie palety – po kliknięciu przycisku generowane są 4 harmonijne kolory (analogiczne)
- Wyświetlanie kolorów – każdy kolor pokazany jest na oddzielnej karcie z kodem HEX
- Kopiowanie kolorów – przyciski do kopiowania kodów kolorów do schowka
- Eksport do CSS – pobieranie pliku CSS z definicją zmiennych dla wszystkich kolorów
- Responsywność – strona dostosowuje się do urządzeń mobilnych i tabletów

Do czego służy paleta kolorów?

Paleta kolorów w projekcie webowym:

- Buduje tożsamość wizualną – np. kolory marki
- Tworzy nastrój i emocje – ciepłe kolory są przyjazne, chłodne – profesjonalne
- Poprawia czytelność – kontrast między tekstem a tłem
- Ułatwia nawigację – kolory mogą wskazywać interaktywne elementy (np. przyciski)
- Zwiększa estetykę – dobrze dobrane kolory sprawiają, że strona wygląda profesjonalnie

Kody potrzebne do wstawienia generatora na stronę WWW.

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">
<!-- https://skrip.pl/ -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generator Harmonijnych Kolorów</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
  <header>
    <h1>Harmonijny Generator Kolorów</h1>
    <p>Wybierz kolor bazowy i wygeneruj harmonijną paletę kolorów</p>
  </header>
  <div class="color-picker-container">
    <div class="base-color-display" id="baseColorDisplay">
      <div class="base-color-label">Kolor bazowy</div>
      <span id="baseColorValue">#3498db</span> </div>
    <div class="controls">
      <div class="color-input-wrapper"> <span class="color-input-label">Wybierz kolor bazowy:</span>
        <input type="color" id="baseColorPicker" value="#3498db">
        <p>&nbsp;</p>
      </div>
      <button id="generateBtn">Generuj paletę</button>
    </div>
  </div>
  <div class="palette-container" id="paletteContainer"> 
    <!-- Tu zostaną wygenerowane kolory --> 
  </div>
  <div class="export-container">
    <h3>Podgląd kodu CSS:</h3>
    <pre class="css-preview" id="cssPreview"></pre>
    <button id="exportBtn">Eksportuj do pliku CSS</button>
    <p><a href="https://skrip.pl/" target="_blank">skrip.pl</a></p>
  </div>
</div>
<div class="notification" id="notification">Skopiowano do schowka!</div>
<script src="script.js"></script>
</body>
</html>

style.css

 :root {
   --primary-color: #3498db;
   --text-color: #333;
   --bg-color: #f8f9fa;
   --card-bg: #fff;
   --spacing: 1rem;
   --border-radius: 8px;
 }
 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 body {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   line-height: 1.6;
   color: var(--text-color);
   background-color: var(--bg-color);
   padding: var(--spacing);
 }
 .container {
   max-width: 1200px;
   margin: 0 auto;
 }
 header {
   text-align: center;
   margin-bottom: 2rem;
 }
 h1 {
   margin-bottom: 0.5rem;
   color: #2c3e50;
 }
 a:link {
   text-decoration: none;
   font-size: 0.8rem;
   color: #555;
 }
 a:visited {
   text-decoration: none;
 }
 a:hover {
   text-decoration: underline;
 }
 a:active {
   text-decoration: underline;
 }
 .color-picker-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--spacing);
   margin-bottom: 1rem;
 }
 .base-color-display {
   width: 100%;
   height: 200px;
   border-radius: var(--border-radius);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   color: white;
   font-weight: bold;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
   transition: background-color 0.3s ease;
   padding: 1rem;
   text-align: center;
 }
 .base-color-label {
   font-size: 1.2rem;
   margin-bottom: 0.5rem;
 }
 .controls {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing);
   justify-content: center;
   align-items: center;
   width: 100%;
   margin-top: 1rem;
 }
 .color-input-wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
 }
 .color-input-label {
   font-weight: bold;
   color: #2c3e50;
 }
 input[type="color"] {
   width: 80px;
   height: 50px;
   border: none;
   overflow: hidden;
   cursor: pointer;
 }
 button {
   padding: 0.75rem 1.5rem;
   background-color: var(--primary-color);
   color: white;
   border: none;
   border-radius: var(--border-radius);
   cursor: pointer;
   font-weight: bold;
   transition: all 0.3s ease;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 button:hover {
   background-color: #2980b9;
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }
 .palette-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: var(--spacing);
   margin-bottom: 2rem;
 }
 .color-card {
   border-radius: var(--border-radius);
   overflow: hidden;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
 }
 .color-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
 }
 .color-sample {
   height: 120px;
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
   font-weight: bold;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 }
 .color-info {
   padding: 0.75rem;
   background-color: var(--card-bg);
 }
 .color-value {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0.5rem;
 }
 .copy-btn {
   padding: 0.4rem 0.8rem;
   font-size: 0.8rem;
   background-color: #7f8c8d;
   border-radius: 4px;
 }
 .copy-btn:hover {
   background-color: #636e70;
 }
 .export-container {
   text-align: center;
   margin-top: 2rem;
   padding: 1.5rem;
   background-color: var(--card-bg);
   border-radius: var(--border-radius);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 .css-preview {
   width: 100%;
   height: 150px;
   margin: 1rem 0;
   padding: 1rem;
   background-color: #2c3e50;
   color: #ecf0f1;
   border-radius: var(--border-radius);
   font-family: 'Courier New', Courier, monospace;
   white-space: pre;
   overflow: auto;
   text-align: left;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 .notification {
   position: fixed;
   bottom: 20px;
   right: 20px;
   padding: 1rem 1.5rem;
   background-color: #2ecc71;
   color: white;
   border-radius: var(--border-radius);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   transform: translateY(100px);
   opacity: 0;
   transition: transform 0.3s ease, opacity 0.3s ease;
   z-index: 1000;
 }
 .notification.show {
   transform: translateY(0);
   opacity: 1;
 }
 @media (max-width: 768px) {
   .palette-container {
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   }
   .base-color-display {
     height: 180px;
   }
 }
 @media (max-width: 480px) {
   .controls {
     flex-direction: column;
     align-items: center;
   }
   .palette-container {
     grid-template-columns: 1fr;
   }
   .base-color-display {
     height: 160px;
     padding: 0.5rem;
   }
   .base-color-label {
     font-size: 1rem;
   }
   h1 {
     font-size: 1.5rem;
   }
 }

script.js

// JavaScript Document
// www.skrip.pl
document.addEventListener('DOMContentLoaded', function() {
            const baseColorPicker = document.getElementById('baseColorPicker');
            const baseColorDisplay = document.getElementById('baseColorDisplay');
            const baseColorValue = document.getElementById('baseColorValue');
            const generateBtn = document.getElementById('generateBtn');
            const paletteContainer = document.getElementById('paletteContainer');
            const exportBtn = document.getElementById('exportBtn');
            const notification = document.getElementById('notification');
            const cssPreview = document.getElementById('cssPreview');
            
            let baseColor = baseColorPicker.value;
            let harmoniousColors = [];
            
            // Aktualizacja koloru bazowego
            baseColorPicker.addEventListener('input', function() {
                baseColor = this.value;
                baseColorDisplay.style.backgroundColor = baseColor;
                baseColorValue.textContent = baseColor;
                
                // Aktualizacja kontrastu tekstu
                updateTextContrast(baseColorDisplay, baseColor);
            });
            
            // Generowanie harmonijnych kolorów
            generateBtn.addEventListener('click', generateHarmoniousColors);
            
            // Eksport do CSS
            exportBtn.addEventListener('click', exportToCSS);
            
            // Inicjalizacja
            baseColorDisplay.style.backgroundColor = baseColor;
            baseColorValue.textContent = baseColor;
            updateTextContrast(baseColorDisplay, baseColor);
            generateHarmoniousColors();
            
            function generateHarmoniousColors() {
                harmoniousColors = [];
                paletteContainer.innerHTML = '';
                
                // Konwersja koloru bazowego na HSL
                const baseHsl = hexToHsl(baseColor);
                
                // Generowanie 5 harmonijnych kolorów (analogicznych)
                for (let i = 0; i < 5; i++) {
                    // Obliczanie odcienia - różnica 30 stopni dla każdego kolejnego koloru
                    let hue = (baseHsl.h + (i - 2) * 30) % 360;
                    if (hue < 0) hue += 360;
                    
                    // Tworzenie koloru HSL
                    const color = hslToHex(hue, baseHsl.s, baseHsl.l);
                    harmoniousColors.push(color);
                    
                    // Tworzenie karty koloru
                    const colorCard = document.createElement('div');
                    colorCard.className = 'color-card';
                    colorCard.innerHTML = `
                        <div class="color-sample" style="background-color: ${color};">
                            ${color}
                        </div>
                        <div class="color-info">
                            <div class="color-value">
                                <span>${color}</span>
                                <button class="copy-btn" data-color="${color}">Kopiuj</button>
                            </div>
                        </div>
                    `;
                    
                    paletteContainer.appendChild(colorCard);
                    
                    // Aktualizacja kontrastu tekstu
                    const colorSample = colorCard.querySelector('.color-sample');
                    updateTextContrast(colorSample, color);
                }
                
                // Aktualizacja podglądu CSS
                updateCssPreview();
                
                // Dodanie nasłuchiwania na przyciski kopiowania
                document.querySelectorAll('.copy-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const colorToCopy = this.getAttribute('data-color');
                        copyToClipboard(colorToCopy);
                        showNotification('Skopiowano do schowka: ' + colorToCopy);
                    });
                });
            }
            
            function updateTextContrast(element, color) {
                // Funkcja określająca, czy tekst powinien być biały czy czarny
                // w zależności od jasności tła
                const rgb = hexToRgb(color);
                const brightness = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
                element.style.color = brightness > 128 ? 'black' : 'white';
                
                // Aktualizacja cienia tekstu dla lepszej czytelności
                element.style.textShadow = brightness > 128 ? 
                    '0 1px 2px rgba(0, 0, 0, 0.2)' : '0 1px 3px rgba(0, 0, 0, 0.7)';
            }
            
            function hexToHsl(hex) {
                // Konwersja HEX na RGB
                let r = 0, g = 0, b = 0;
                if (hex.length === 4) {
                    r = parseInt(hex[1] + hex[1], 16);
                    g = parseInt(hex[2] + hex[2], 16);
                    b = parseInt(hex[3] + hex[3], 16);
                } else if (hex.length === 7) {
                    r = parseInt(hex[1] + hex[2], 16);
                    g = parseInt(hex[3] + hex[4], 16);
                    b = parseInt(hex[5] + hex[6], 16);
                }
                
                // Konwersja RGB na HSL
                r /= 255;
                g /= 255;
                b /= 255;
                const max = Math.max(r, g, b);
                const min = Math.min(r, g, b);
                let h, s, l = (max + min) / 2;
                
                if (max === min) {
                    h = s = 0; // achromatic
                } else {
                    const d = max - min;
                    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
                    switch (max) {
                        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                        case g: h = (b - r) / d + 2; break;
                        case b: h = (r - g) / d + 4; break;
                    }
                    h /= 6;
                }
                
                return {
                    h: Math.round(h * 360),
                    s: Math.round(s * 100),
                    l: Math.round(l * 100)
                };
            }
            
            function hslToHex(h, s, l) {
                // Konwersja HSL na HEX
                h /= 360;
                s /= 100;
                l /= 100;
                let r, g, b;
                
                if (s === 0) {
                    r = g = b = l; // achromatic
                } else {
                    const hue2rgb = (p, q, t) => {
                        if (t < 0) t += 1;
                        if (t > 1) t -= 1;
                        if (t < 1/6) return p + (q - p) * 6 * t;
                        if (t < 1/2) return q;
                        if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
                        return p;
                    };
                    
                    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
                    const p = 2 * l - q;
                    
                    r = hue2rgb(p, q, h + 1/3);
                    g = hue2rgb(p, q, h);
                    b = hue2rgb(p, q, h - 1/3);
                }
                
                const toHex = x => {
                    const hex = Math.round(x * 255).toString(16);
                    return hex.length === 1 ? '0' + hex : hex;
                };
                
                return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
            }
            
            function hexToRgb(hex) {
                // Konwersja HEX na RGB
                let r = 0, g = 0, b = 0;
                if (hex.length === 4) {
                    r = parseInt(hex[1] + hex[1], 16);
                    g = parseInt(hex[2] + hex[2], 16);
                    b = parseInt(hex[3] + hex[3], 16);
                } else if (hex.length === 7) {
                    r = parseInt(hex[1] + hex[2], 16);
                    g = parseInt(hex[3] + hex[4], 16);
                    b = parseInt(hex[5] + hex[6], 16);
                }
                return { r, g, b };
            }
            
            function copyToClipboard(text) {
                // Kopiowanie tekstu do schowka
                navigator.clipboard.writeText(text).catch(err => {
                    console.error('Błąd podczas kopiowania: ', err);
                });
            }
            
            function showNotification(message) {
                // Pokazanie powiadomienia
                notification.textContent = message;
                notification.classList.add('show');
                setTimeout(() => {
                    notification.classList.remove('show');
                }, 2000);
            }
            
            function updateCssPreview() {
                // Aktualizacja podglądu CSS
                let cssContent = `/* Harmonijna paleta kolorów */\n:root {\n`;
                               harmoniousColors.forEach((color, index) => {
                    cssContent += `  --harmonious-color-${index + 1}: ${color};\n`;
                });
                
                cssContent += `}\n\n`;
                cssContent += `/* Przykład użycia:\n`;
                cssContent += `.element {\n`;
                cssContent += `  background-color: var(--base-color);\n`;
                cssContent += `  color: var(--harmonious-color-1);\n`;
                cssContent += `}`;
                
                cssPreview.textContent = cssContent;
            }
            
            function exportToCSS() {
                // Tworzenie i pobieranie pliku CSS
                let cssContent = `/* Harmonijna paleta kolorów wygenerowana ${new Date().toLocaleString()} */\n\n`;
                cssContent += `:root {\n`;
                cssContent += `  --base-color: ${baseColor};\n`;
                
                harmoniousColors.forEach((color, index) => {
                    cssContent += `  --harmonious-color-${index + 1}: ${color};\n`;
                });
                
                cssContent += `}\n\n`;
                cssContent += `/* Przykład użycia:\n`;
                cssContent += `.element {\n`;
                cssContent += `  background-color: var(--base-color);\n`;
                cssContent += `  color: var(--harmonious-color-1);\n`;
                cssContent += `} */`;
                
                const blob = new Blob([cssContent], { type: 'text/css' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'harmonijna-paleta.css';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }
        });

Top Stories

Kalkulator równań kwadratowych

Przelicznik Walut online – oparte na notowaniach NBP

Gra w wojnę – prosta gra w karty

Generator Harmonijnej palety kolorów CSS

Wybierz kolor bazowy i wygeneruj harmonijną paletę kolorów.

Czym jest harmoniczna paleta kolorów?

Generator Kolorów Harmonijnych

Wybierz kolor bazowy i wygeneruj harmonijną paletę kolorów

Podgląd kodu CSS:

Funkcjonalność

Do czego służy paleta kolorów?

Kody potrzebne do wstawienia generatora na stronę WWW.

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

Samodzielnie:

index.html

style.css

script.js

Chmurka tagów

Zaprzyjaźniona strona

Najczęściej oglądane wpisy

Top Stories

Kalkulator równań kwadratowych

Przelicznik Walut online – oparte na notowaniach NBP

Gra w wojnę – prosta gra w karty

Czym jest harmoniczna paleta kolorów?

Generator Kolorów Harmonijnych

Podgląd kodu CSS:

Funkcjonalność

Do czego służy paleta kolorów?

Kody potrzebne do wstawienia generatora na stronę WWW.

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

Samodzielnie:

index.html

style.css

script.js

Może Ci się spodobać:

Edytor Zdjęć Online – Darmowe Narzędzie do Edycji Obrazów

Bazarowa gra w Trzy kubki online

Prosty generator silnego hasła

Edytor Obrazów Online – Kadrowanie i Edycja Zdjęć