Próbnik kolorów i generator palet

Każdy kolor na ekranie można opisać na trzy różne sposoby, a to narzędzie utrzymuje je wszystkie zsynchronizowane: HEX to skrót używany w CSS i narzędziach projektowych, RGB opisuje, ile czerwonego, zielonego i niebieskiego światła składa się na dany kolor, a HSL — barwa, nasycenie, jasność — opisuje go tak, jak o kolorze naprawdę myśli człowiek: jaki to odcień, jak intensywny i jak jasny lub ciemny. Przeciągnij natywną próbkę koloru, wpisz kod HEX albo zmień dowolne pole R/G/B lub H/S/L, a wszystkie pozostałe pola zaktualizują się natychmiast, więc możesz swobodnie przechodzić między sposobami myślenia o kolorze, bez własnych obliczeń.

Koło barw jest podstawą sześciu klasycznych reguł harmonii, generowanych automatycznie z wybranego koloru bazowego. Komplementarna zestawia kolor z jego przeciwieństwem dla maksymalnego kontrastu; analogiczna wybiera sąsiadów na kole dla spokojnego, spójnego wyglądu; triada i tetrada rozmieszczają trzy lub cztery kolory równomiernie na kole, dając żywą, a wciąż zrównoważoną paletę; komplementarna rozdzielona łagodzi parę komplementarną, używając dwóch kolorów obok przeciwieństwa zamiast niego samego; a monochromatyczna trzyma się jednej barwy, zmieniając tylko jasność — to często najbezpieczniejszy wybór dla interfejsu potrzebującego jednego spójnego koloru marki w kilku odcieniach.

Nie każda dobra paleta zaczyna się od teorii kolorów — czasem po prostu chcesz zobaczyć, co wyjdzie. Generator losowych palet (naciśnij spację lub kliknij Generuj) tworzy naraz pięć kolorów o barwach i jasności dobranych tak, by unikać mętnych lub zbyt pastelowych efektów. Kliknij ikonę kłódki na próbce, którą chcesz zachować, i generuj ponownie: zmieniają się tylko odblokowane kolory, więc paletę możesz budować stopniowo, tak jak w narzędziach w stylu Coolors. Kliknij dowolną próbkę, aby skopiować jej kod HEX, albo użyj przycisków pod paletą, by skopiować cały zestaw jako zmienne CSS, zmienne SCSS, fragment konfiguracji Tailwind lub tablicę JSON, a także wyeksportować plik próbek Adobe .ase dla Illustratora i Photoshopa. Możesz też wyodrębnić paletę z dowolnego zdjęcia (przetwarzanego lokalnie, nigdy nie wysyłanego) i zapisać ulubione palety w przeglądarce na później.

Wybranie ładnego koloru to nie to samo, co wybranie użytecznego — tekst w kolorze zbyt zbliżonym jasnością do tła może być nieczytelny, a wytyczne WCAG (Web Content Accessibility Guidelines) określają dla tego konkretne progi: współczynnik kontrastu co najmniej 4,5:1 dla zwykłego tekstu, aby spełnić poziom AA, i 7:1 dla surowszego poziomu AAA. Sprawdzacz kontrastu oblicza dokładny współczynnik między wybranym kolorem a tekstem białym i czarnym według tego samego wzoru luminancji względnej, który definiuje specyfikacja WCAG, i wskazuje, czy każda kombinacja go spełnia, dzięki czemu możesz wyłapać przycisk lub nagłówek o niskim kontraście przed publikacją, a nie po niej.