Generator Palety Kolorów - Twórz Harmonijne Zestawy Kolorów

Czym jest generator palety kolorów?

Generator palety kolorów to narzędzie, które tworzy zestaw pasujących do siebie kolorów na podstawie jednego koloru wyjściowego, nazywanego kolorem podstawowym. Ten generator palety kolorów przyjmuje kolor podstawowy i typ harmonii, a następnie oblicza pozostałe kolory palety zgodnie z zasadami teorii koloru. Obsługuje cztery typy harmonii: dopełniającą, analogiczną, triadyczną i monochromatyczną.

Jak narzędzie tworzy paletę

Narzędzie konwertuje kolor podstawowy z kodu szesnastkowego (na przykład #3B82F6) do modelu kolorów HSL. Model HSL opisuje kolor za pomocą trzech liczb:

• Odcień: pozycja koloru na kole barw o 360 stopniach (0° oznacza czerwień, 120° zieleń, a 240° niebieski).
• Nasycenie: intensywność koloru, od 0% (szary) do 100% (czysty kolor).
• Jasność: stopień zbliżenia koloru do czerni lub bieli, od 0% (czarny) do 100% (biały).

Każdy typ harmonii zmienia odcień, jasność albo oba te parametry, a następnie konwertuje wynik z powrotem do kodu szesnastkowego.

Jak obliczać kolory dopełniające

Wzór:

$h' = (h + 180) \bmod 360$

gdzie h oznacza odcień koloru podstawowego w stopniach, a h′ — nowy odcień. Operacja modulo zawija wynik przekraczający pełny obrót z powrotem na koło barw.

Nasycenie i jasność pozostają bez zmian.

Przykład obliczenia: Czysty niebieski, #0000FF, ma odcień 240°, nasycenie 100% i jasność 50%. Dodanie 180° daje odcień 60°. Konwersja odcienia 60° z powrotem do kodu szesnastkowego, przy tym samym nasyceniu i jasności, daje #FFFF00, czyli żółty. Dlatego narzędzie łączy niebieski z żółtym, a nie z pomarańczowym.

Może to być mylące, ponieważ na zajęciach plastycznych często uczy się innego koła barw — koła pigmentów RYB (czerwony-żółty-niebieski), na którym kolorem przeciwstawnym do niebieskiego jest pomarańczowy. To narzędzie działa na kole HSL opartym na modelu RGB, używanym przez ekrany, dlatego jego pary dopełniające różnią się od par na kole mieszania farb.

Jak obliczać kolory analogiczne

Kolory analogiczne znajdują się na kole blisko koloru podstawowego. Narzędzie generuje dwa odcienie oddalone od odcienia podstawowego o 30° oraz dwa odcienie oddalone o 60°, wszystkie przy tym samym nasyceniu i jasności.

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

gdzie h oznacza odcień koloru podstawowego.

Przykład obliczenia: Niebieski, #0000FF (odcień 240°), daje odcień 270° (#8000FF), odcień 210° (#0080FF), odcień 300° (#FF00FF) oraz odcień 180° (#00FFFF). Razem z kolorem podstawowym paleta zawiera pięć kolorów.

Jak obliczać kolory triadyczne

Kolory triadyczne są oddalone od siebie na kole o 120°, tworząc równomiernie rozmieszczoną triadę wraz z kolorem podstawowym.

$h + 120^{\circ}, \qquad h + 240^{\circ}$

Przykład obliczenia: Czerwony, #FF0000 (odcień 0°), daje odcień 120° (#00FF00, zielony) oraz odcień 240° (#0000FF, niebieski). Zestaw trzech kolorów to czerwony, zielony i niebieski — te same trzy odcienie, które są używane jako barwy podstawowe na ekranach cyfrowych.

Jak obliczać kolory monochromatyczne

Kolory monochromatyczne zachowują ten sam odcień i nasycenie, a zmienia się tylko jasność. Narzędzie zmienia jasność o 15 i 30 punktów procentowych w obu kierunkach, ograniczając ją do zakresu od 5% do 95%.

$l \pm 15, \qquad l \pm 30$

gdzie l oznacza jasność koloru podstawowego, wyrażoną w punktach procentowych.

Przykład obliczenia: Niebieski, #0000FF (jasność 50%), daje jasność 65% (#4D4DFF), jasność 35% (#0000B3), jasność 80% (#9999FF) oraz jasność 20% (#000066).

Ze względu na ograniczenia do 5% i 95% kolor podstawowy, który jest już bardzo jasny lub bardzo ciemny, może dwukrotnie osiągnąć tę samą granicę. Czarny, #000000, daje jasność 15% (#262626), 5% (#0D0D0D), 30% (#4D4D4D) oraz ponownie 5% (#0D0D0D), więc jeden kolor się powtarza.

Korzystanie z narzędzia

1. Wybierz kolor podstawowy za pomocą próbnika kolorów albo wpisz kod szesnastkowy, taki jak #3B82F6.
2. Wybierz typ harmonii: dopełniającą, analogiczną, triadyczną albo monochromatyczną.
3. Odczytaj wygenerowaną paletę. Każda próbka koloru pokazuje swój kod szesnastkowy na przycisku.
4. Kliknij ten przycisk, aby skopiować kod szesnastkowy, albo użyj opcji „Copy All Colors”, aby skopiować całą paletę naraz.

Sprawdzanie kontrastu pod kątem dostępności

Każda próbka koloru zawiera dwie małe plakietki: jedną informującą o kontraście względem bieli i drugą informującą o kontraście względem czerni. Narzędzie oblicza współczynnik kontrastu za pomocą wzoru WCAG (Wytyczne dotyczące dostępności treści internetowych):

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

gdzie C oznacza współczynnik kontrastu.

L1 to względna luminancja jaśniejszego koloru, a L2 to względna luminancja ciemniejszego koloru. Luminancja wynika z wartości czerwonej, zielonej i niebieskiej danego koloru. Plakietka zawiera „AA”, gdy współczynnik wynosi 4,5 lub więcej, co stanowi minimum WCAG dla tekstu o normalnym rozmiarze. Zawiera „!”, gdy współczynnik jest niższy niż 4,5. Umieszczenie wskaźnika myszy nad plakietką pokazuje dokładny współczynnik. Czarny tekst na białym tle uzyskuje współczynnik 21, czyli najwyższą możliwą wartość.

Narzędzie używa tej samej reguły kontrastu do wyboru koloru przycisku kopiowania na każdej próbce. Porównuje kolor próbki z czernią i bielą, a następnie umieszcza ten z dwóch kolorów, który zapewnia lepszą czytelność. Zmiana następuje przy względnej luminancji około 0,179, czyli w punkcie, w którym oba współczynniki są równe.

Często zadawane pytania

Czym jest generator palety kolorów? To narzędzie, które na podstawie jednego koloru podstawowego i wybranej reguły harmonii tworzy zestaw współgrających ze sobą kolorów.

Dlaczego to narzędzie łączy niebieski z żółtym zamiast z pomarańczowym w przypadku kolorów dopełniających? Narzędzie obraca odcień o 180° na kole HSL, które opiera się na sposobie mieszania czerwonego, zielonego i niebieskiego światła przez ekrany. Koło farb czerwony-żółty-niebieski, którego uczy się na zajęciach plastycznych, daje inne pary dopełniające, ponieważ miesza pigmenty, a nie światło.

Ile kolorów tworzy każdy typ harmonii? Harmonia dopełniająca tworzy łącznie 2 kolory, wliczając podstawowy. Triadyczna tworzy 3. Analogiczna tworzy 5. Monochromatyczna tworzy 5.

Jakiego modelu kolorów narzędzie używa wewnętrznie? HSL (odcień, nasycenie, jasność). Konwertuje wejściowy kod szesnastkowy do HSL, wykonuje obliczenia, a następnie konwertuje wynik z powrotem do kodu szesnastkowego.

Czy narzędzie sprawdza, czy kolory są dostępne? Tak. Każda próbka pokazuje, czy ma wystarczający kontrast względem bieli i czerni, aby spełnić standard WCAG AA dla tekstu zwykłego, który wymaga współczynnika wynoszącego co najmniej 4,5.

Czy w jednym projekcie można użyć więcej niż jednego typu harmonii? Tak. Wiele projektów łączy różne typy harmonii, na przykład zestaw analogiczny dla głównych kolorów i jeden kolor dopełniający dla przycisku lub wyróżnienia.

Formatowanie kolorów

Narzędzie zapisuje każdy wygenerowany kolor jako sześciocyfrowy kod szesnastkowy poprzedzony znakiem # (na przykład #ff0000 dla czerwieni). Kody szesnastkowe bezpośrednio odwzorowują wartości czerwonego, zielonego i niebieskiego, z których każda mieści się w zakresie od 0 do 255. Kolor podstawowy jest wyświetlany dokładnie w takiej postaci, w jakiej go wpisano, więc trzycyfrowy skrót, taki jak #F00, pozostaje w krótkiej formie. Kody trzycyfrowe oznaczają ten sam kolor co forma sześciocyfrowa: każda cyfra jest powielana, więc #F00 to #FF0000. HSL to alternatywny sposób opisywania tych samych kolorów za pomocą odcienia, nasycenia i jasności zamiast ilości czerwieni, zieleni i niebieskiego.