Paleta
Generator palet z harmonii barw, gradientów i mesh gradientów. Każdy kolor w dowolnym zapisie CSS Color 4, gotowe presety i podgląd na prawdziwym interfejsie – z kontrastem WCAG.
Presety palet
Podgląd na interfejsie
Kliknij dowolny element makiety, aby podświetlić kolor palety, z którego pochodzi.
- Start
- Oferta
- Projekty
- Kontakt
Kolory, które grają razem
Hero dostaje pierwszy gradient z palety, przyciski – najbardziej nasycone kolory, a tekst kolor o najlepszym kontraście z tłem.
Przyciski
-
Branding
Identyfikacja wizualna
Logo, typografia i paleta w jednym systemie.
Więcej -
Web
Strona produktu
Szybka, czytelna i dostępna na każdym ekranie.
Więcej -
Aplikacja
Panel klienta
Dane i akcje w zasięgu jednego kliknięcia.
Więcej
Kategorie są liczone z kolorów: ciemne / jasne – średnia jasność OKLab, vibrant / stonowane – średnie nasycenie (chroma OKLCH), kontrastowe – kontrast WCAG najciemniejszego i najjaśniejszego koloru ≥ 12:1. Wczytanie presetu zastępuje paletę – Ctrl+Z przywraca poprzednią.
Spacja – nowa paleta. Zablokuj kolory, które chcesz zachować. Pole wartości przyjmuje każdy zapis CSS (także nazwy kolorów i color-mix()). Ikona gradientu zamienia kartę w gradient z pełnym edytorem – gradienty nie losują się. Ctrl+Z / Ctrl+Y – cofnij i ponów. Paleta zapisuje się w tej przeglądarce.
O eksperymencie
Naciśnij spację, a paleta wylosuje się na nowo według wybranego schematu: triady, kolorów dopełniających, rozszczepionego dopełnienia, analogicznych, prostokąta, kwadratu albo odcieni jednej barwy. Kąty można liczyć na klasycznym kole HSL albo na percepcyjnym kole OKLCH, w którym równe odstępy naprawdę wyglądają na równe – koło barw pokazuje kolory palety i ramiona schematu, a przeciągając je, obracasz odcienie odblokowanych kolorów bez zmiany ich jasności i nasycenia. Kolory, które Ci się podobają, zablokuj – zostaną na miejscu i wyznaczą odcień bazowy. Paleta zaczyna się od pięciu kolorów, ale możesz dodawać kolejne bez limitu, wstawiać nowe pomiędzy istniejące, przeciągać je i usuwać.
Każdy kolor ma własny zapis CSS Color Module Level 4: HEX, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() albo color() w przestrzeniach srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020 i xyz. Zmiana zapisu nie zmienia koloru, a suwaki pozwalają go dostroić w kanałach wybranego zapisu. Generator pracuje w gamucie sRGB, Display P3 albo Rec. 2020 i ostrzega, gdy kolor nie mieści się w sRGB lub w danym zapisie.
Każdą kartę zamienisz w gradient z pełnymi opcjami CSS: liniowy, radialny albo stożkowy (także repeating-), kierunek lub kąt, kształt, rozmiar i środek, przestrzeń interpolacji z metodą odcienia oraz dowolna liczba punktów koloru z twardymi przejściami i środkami przejść. Mesh gradient to swobodnie rozmieszczone plamy koloru nad kolorem bazowym – punkty przeciągasz myszą albo strzałkami bezpośrednio na podglądzie, a wynik to czysty CSS działający w każdej nowoczesnej przeglądarce.
Na start możesz wczytać jeden z ponad dwudziestu presetów – jednolitych, z gradientami i mieszanych – filtrowanych według kategorii: ciemne, jasne, vibrant, kontrastowe i stonowane. Kategorie są liczone z jasności, nasycenia i kontrastu kolorów, a nie nadawane ręcznie, a każdy preset spełnia WCAG 2.2 AAA (co najmniej 7:1) dla tekstu, przycisku głównego i hero – w podglądzie jasnym i ciemnym. Podgląd pokazuje paletę na makiecie strony – z headerem i menu, hero, trzema typami przycisków w kilku rozmiarach, kartami i stopką – w wersji jasnej i ciemnej, z kontrastem WCAG liczonym w najgorszym miejscu gradientu. Tło eksperymentu przełączysz między białym a czarnym, a całą paletę skopiujesz jako zmienne CSS.