Skip to content

14. Generator palet kolorów

This content is not available in your language yet.

Generator palet kolorów dla designerów i developerów — losowanie harmonijnych palet, blokowanie kolorów i kopiowanie wartości HEX/RGB/HSL.

// Konwersja HSL -> HEX
function hslToHex(h, s, l) {
l /= 100;
const a = (s * Math.min(l, 1 - l)) / 100;
const f = (n) => {
const k = (n + h / 30) % 12;
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
return Math.round(255 * color).toString(16).padStart(2, '0');
};
return `#${f(0)}${f(8)}${f(4)}`;
}
// Generowanie harmonijnej palety (analogous)
function generateAnalogousPalette(baseHue) {
const hues = [baseHue, (baseHue + 30) % 360, (baseHue + 60) % 360,
(baseHue + 330) % 360, (baseHue + 300) % 360];
return hues.map((h) => hslToHex(h, 70, 55));
}
  • 5 kolorowych bloków z wartościami HEX
  • Spacja/przycisk losuje nową paletę
  • Kliknięcie koloru kopiuje HEX do schowka
  • Blokowanie poszczególnych kolorów (nie losują się)
Ocena: 3.0

Powodzenia!

Generator palet to projekt wizualnie piękny i technologicznie ciekawy. Konwersje HSL/HEX/RGB wymagają matematyki — nie musisz jej znać na pamięć, możesz wzorować się na MDN. Spacja jako skrót do generowania nowej palety to obowiązkowy feature!