Generator Palet Kolorów

Generuj komplementarne, analogiczne, triadyczne i tetradyczne palety kolorów z dowolnego koloru bazowego

Wypróbuj przykład

Kolor bazowy

Schemat kolorów

Wygenerowana paleta

Czym jest paleta kolorów?

Paleta kolorów to zestaw barw dobranych tak, aby harmonijnie współpracowały w projekcie. Kiedy wybierasz jeden kolor bazowy dla marki, strony internetowej lub ilustracji, potrzebujesz kolorów towarzyszących, które dobrze wyglądają obok niego. Generowanie palet kolorów automatyzuje ten wybór, stosując reguły teorii koloru — konkretnie geometryczne zależności na standardowym kole barw HSL.

Koło barw HSL (Hue, Saturation, Lightness) rozmieszcza odcienie w okręgu o 360 stopniach. Czerwony leży przy 0 stopniach, zielony przy 120, a niebieski przy 240. Każdy schemat harmonii kolorów działa przez wybranie odcieni w określonych odległościach kątowych od koloru bazowego. Para komplementarna na przykład używa dwóch kolorów oddalonych o 180 stopni. Schemat analogiczny wybiera kolory w zakresie 30 stopni po każdej stronie. Te geometryczne reguły dają zrównoważone kombinacje, ponieważ wybrane odcienie rozkładają się na kole zamiast skupiać w jednym obszarze.

Narzędzie przyjmuje dowolny kolor w formacie hex, przekształca go do HSL, obraca odcień o kąty określone przez wybrany schemat i przelicza wyniki z powrotem do hex. Obsługuje sześć schematów: komplementarny, analogiczny, triadyczny, split-komplementarny, tetradyczny i monochromatyczny. Każdy schemat generuje od 2 do 5 kolorów wyjściowych.

Dlaczego warto używać tego generatora palet?

Dobieranie kolorów metodą prób i błędów jest powolne i niespójne. Generator palet natychmiast stosuje reguły teorii koloru, dając matematycznie zrównoważone wyniki z dowolnego punktu startowego.

Natychmiastowe generowanie palety
Wybierz kolor bazowy i typ schematu — paleta pojawia się natychmiast. Bez przesyłania formularzy, bez ekranów ładowania. Zmień kolor bazowy, a wynik aktualizuje się w czasie rzeczywistym.
🎨
Sześć schematów harmonii
Wybierz spośród schematów komplementarnego, analogicznego, triadycznego, split-komplementarnego, tetradycznego i monochromatycznego. Każdy schemat daje inny efekt wizualny — od par o wysokim kontraście po subtelne gradienty jednego odcienia.
🔒
Przetwarzanie z poszanowaniem prywatności
Wszystkie obliczenia kolorów są wykonywane w przeglądarce. Żadne dane o kolorach nie są wysyłane na żaden serwer. Narzędzie działa offline po załadowaniu strony.
📋
Eksport jednym kliknięciem
Skopiuj pojedyncze kody hex lub całą paletę jednym kliknięciem. Wklej bezpośrednio do CSS, Figma, konfiguracji Tailwind lub dowolnego narzędzia projektowego obsługującego wartości hex.

Zastosowania generatora palet kolorów

Tworzenie motywu interfejsu
Programiści frontendowi budujący nową aplikację mogą zacząć od koloru marki i wygenerować pełną paletę dla tokenów primary, secondary i accent. Schematy triadyczne lub tetradyczne dostarczają wystarczającej różnorodności dla przycisków, linków, alertów i teł.
Tokeny kolorów w systemie projektowania
Inżynierowie systemów projektowania używają palet monochromatycznych do wygenerowania skali jasności dla jednego odcienia marki, a następnie przypisują każdy stopień do nazwanego tokenu (np. blue-100 przez blue-900).
Wizualizacja danych
Inżynierowie i analitycy danych potrzebują odrębnych kolorów dla serii na wykresach, które nie kolidują ze sobą. Paleta analogiczna lub triadyczna daje wystarczające zróżnicowanie dla 3–6 serii, zachowując spójność wizualną wykresu.
Strony docelowe kampanii marketingowych
Projektanci tworzący strony kampanii zaczynają od głównego koloru marki i używają schematu split-komplementarnego, aby znaleźć kolory akcentujące dla przycisków CTA i wyróżnionych sekcji — bez kolizji z logotypem.
Testowanie dostępności parowania kolorów
Inżynierowie QA testujący zgodność z WCAG parują kolory z wygenerowanej palety i sprawdzają je przez narzędzie do pomiaru kontrastu. Schematy komplementarne i split-komplementarne często dają pary o wysokim kontraście luminancji.
Nauka teorii koloru
Studenci uczący się projektowania mogą przełączać się między wszystkimi sześcioma schematami dla tego samego koloru bazowego i obserwować, jak każda geometria rozmieszcza odcienie na kole. Wizualny efekt sprawia, że abstrakcyjne kąty stają się namacalne.

Porównanie schematów harmonii kolorów

Każdy schemat harmonii dobiera kolory na podstawie kątów obrotu odcienia od koloru bazowego na kole HSL. Poniższa tabela zawiera każdy schemat, liczbę generowanych kolorów, kąty obrotu odcienia oraz kontekst projektowy, w którym sprawdza się najlepiej.

SchematKoloryKąty odcieniaNajlepsze do
Complementary2180High contrast, call-to-action buttons
Analogous3-30, 0, +30Harmonious, low-tension backgrounds
Triadic30, 120, 240Balanced variety, dashboards
Split-Complementary30, 150, 210Softer contrast than complementary
Tetradic (Rectangle)40, 90, 180, 270Rich palettes, complex UIs
Monochromatic5Same hue, varied lightnessSubtle, single-brand pages

Jak działa obrót na kole barw HSL

Całe generowanie palet w tym narzędziu opiera się na modelu kolorów HSL. Zrozumienie jego trzech osi pomaga przewidzieć, jak kolor bazowy przekształci się w każdym schemacie.

Odcień (0–360)
Pozycja na kole barw w stopniach. 0 to czerwony, 60 żółty, 120 zielony, 180 cyjan, 240 niebieski, 300 magenta. Schematy palet obracają tę wartość, zachowując stałe nasycenie i jasność.
Nasycenie (0–100%)
Intensywność koloru. 100% to pełne nasycenie; 0% to odcień szarości. Schematy palet zachowują nasycenie koloru bazowego, tak aby wszystkie generowane kolory miały tę samą intensywność.
Jasność (0–100%)
Jasność koloru. 0% to czerń, 50% to czysty odcień, 100% to biel. Schematy monochromatyczne zmieniają jasność, tworząc skalę tonalną; wszystkie pozostałe schematy utrzymują jasność na stałym poziomie.

Przykłady kodu

Generuj palety kolorów programowo, używając konwersji HSL i obrotu odcienia.

JavaScript
// Generate a complementary color by rotating hue 180 degrees
function hexToHsl(hex) {
  let r = parseInt(hex.slice(1,3), 16) / 255;
  let g = parseInt(hex.slice(3,5), 16) / 255;
  let b = parseInt(hex.slice(5,7), 16) / 255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h = 0, s = 0, l = (max + min) / 2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
    else if (max === g) h = ((b - r) / d + 2) / 6;
    else h = ((r - g) / d + 4) / 6;
  }
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

function hslToHex(h, s, l) {
  s /= 100; l /= 100;
  const a = s * Math.min(l, 1 - l);
  const f = n => {
    const k = (n + h / 30) % 12;
    return Math.round(255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))));
  };
  return '#' + [f(0), f(8), f(4)].map(v => v.toString(16).padStart(2, '0')).join('');
}

const base = '#6366f1';
const [h, s, l] = hexToHsl(base);
const comp = hslToHex((h + 180) % 360, s, l);
console.log(comp); // → "#f1ee63"
Python
import colorsys

def hex_to_hsl(hex_color: str):
    r, g, b = (int(hex_color[i:i+2], 16) / 255 for i in (1, 3, 5))
    h, l, s = colorsys.rgb_to_hls(r, g, b)
    return round(h * 360), round(s * 100), round(l * 100)

def hsl_to_hex(h: int, s: int, l: int) -> str:
    r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100)
    return '#{:02x}{:02x}{:02x}'.format(round(r * 255), round(g * 255), round(b * 255))

def complementary(hex_color: str) -> str:
    h, s, l = hex_to_hsl(hex_color)
    return hsl_to_hex((h + 180) % 360, s, l)

def triadic(hex_color: str) -> list[str]:
    h, s, l = hex_to_hsl(hex_color)
    return [hex_color, hsl_to_hex((h + 120) % 360, s, l), hsl_to_hex((h + 240) % 360, s, l)]

print(complementary('#6366f1'))  # → #f1ee63
print(triadic('#6366f1'))        # → ['#6366f1', '#66f163', '#f16366']
Go
package main

import (
	"fmt"
	"math"
)

func hexToHSL(hex string) (float64, float64, float64) {
	var r, g, b uint8
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, l * 100
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf:
		h = (gf - bf) / d
		if gf < bf { h += 6 }
	case gf:
		h = (bf-rf)/d + 2
	case bf:
		h = (rf-gf)/d + 4
	}
	return h * 60, s * 100, l * 100
}

func hslToHex(h, s, l float64) string {
	s /= 100; l /= 100
	a := s * math.Min(l, 1-l)
	f := func(n float64) uint8 {
		k := math.Mod(n+h/30, 12)
		return uint8(255 * (l - a*math.Max(-1, math.Min(math.Min(k-3, 9-k), 1))))
	}
	return fmt.Sprintf("#%02x%02x%02x", f(0), f(8), f(4))
}

func main() {
	h, s, l := hexToHSL("#6366f1")
	comp := hslToHex(math.Mod(h+180, 360), s, l)
	fmt.Println(comp) // → #f1ee63
}

Najczęściej zadawane pytania

Jaka jest różnica między schematem komplementarnym a split-komplementarnym?
Schemat komplementarny używa dwóch kolorów dokładnie 180 stopni od siebie na kole barw, dając maksymalny kontrast odcienia. Split-komplementarny zastępuje bezpośrednie przeciwieństwo dwoma kolorami w odległości 150 i 210 stopni od koloru bazowego, zapewniając silny kontrast przy mniejszym napięciu wizualnym. Split-komplementarny jest łatwiejszy w użyciu w projektowaniu interfejsów, ponieważ żaden z kolorów akcentujących nie stoi w bezpośredniej opozycji do koloru bazowego.
Ile kolorów powinna mieć paleta interfejsu?
Większość systemów projektowania używa 3–5 głównych odcieni: primary, secondary, neutralnego i jednego lub dwóch akcentów. Każdy główny odcień ma następnie skalę jasności (100 do 900). Zacznij od schematu triadycznego lub tetradycznego dla głównych odcieni, a następnie wygeneruj skale monochromatyczne dla każdego z nich.
Czy te palety można używać z Tailwind CSS?
Tak. Skopiuj wartości hex i dodaj je do obiektu colors w pliku tailwind.config.js lub tailwind.config.ts. Dla skali monochromatycznej przypisz każdy odcień do klucza numerycznego (50, 100, 200 itd.), zgodnie z konwencją nazewnictwa Tailwind.
Dlaczego niektóre wygenerowane kolory wyglądają matowo lub brudno?
Jeśli kolor bazowy ma niskie nasycenie lub ekstremalną jasność (bardzo bliską 0% lub 100%), obrócone odcienie również będą przytłumione. Generator zachowuje wartości nasycenia i jasności koloru bazowego. Aby uzyskać wyraziste palety, wybierz kolor bazowy z nasyceniem powyżej 50% i jasnością między 30% a 70%.
Jaka jest różnica między HSL a HSV/HSB?
HSL i HSV oba używają odcienia jako osi kołowej, ale inaczej definiują jasność. W HSL jasność 50% to czysty odcień, a 100% to biel. W HSV (zwanym też HSB) wartość 100% to czysty odcień i nie można osiągnąć bieli bez zmniejszenia nasycenia. Większość generatorów palet używa HSL, ponieważ jego oś jasności bardziej intuicyjnie odpowiada temu, jak postrzegamy jasność kolorów.
Jaki jest związek schematów harmonii z dostępnością?
Harmonia kolorów i kontrast WCAG to odrębne zagadnienia. Para komplementarna ma maksymalny kontrast odcienia, ale nie gwarantuje to wystarczającego kontrastu luminancji dla czytelności tekstu. Po wygenerowaniu palety przetestuj każdą parę pierwszego planu i tła pod kątem WCAG AA (stosunek 4,5:1 dla tekstu normalnego). Kolory o podobnej jasności nie spełnią wymagań niezależnie od wzajemnej relacji odcieni.
Czy HSL jest tym samym co funkcja CSS hsl()?
Tak. Funkcja CSS hsl() przyjmuje trzy argumenty: odcień w stopniach (0–360), nasycenie jako procent i jasność jako procent. CSS Color Level 4 obsługuje też wartość alpha oddzieloną ukośnikiem: hsl(240 60% 50% / 0.8). Model HSL używany przez ten generator dokładnie odpowiada specyfikacji CSS, więc możesz wklejać wartości odcienia, nasycenia i jasności bezpośrednio do arkuszy stylów.