Generator tonów kolorów
Generuj odcienie koloru, mieszając go z neutralną szarością w równych krokach, co zmniejsza nasycenie, zachowując barwę. Wprowadź jeden kolor w dowolnym formacie CSS, wybierz od 2 do 20 kroków i przestrzeń mieszania, a otrzymasz tabelę z wartościami HEX, RGB, HSL i OKLCH dla każdego odcienia, zaczynając od koloru oryginalnego. Przydatne do tworzenia przygaszonych palet, stanów nieaktywnych, subtelnych powierzchni i spokojniejszych wariantów marki.
Najczęściej zadawane pytania
Czym jest odcień?
Odcień to kolor zmieszany z szarością. Zachowuje swoją barwę i staje się bardziej przygaszony, w przeciwieństwie do rozjaśnienia, które powstaje przez zmieszanie z bielą, lub przyciemnienia, które powstaje przez zmieszanie z czernią.
Jaka szarość jest używana?
Jest to średnia szarość sRGB #808080, rgb(128 128 128). Jasne kolory stają się więc nieco ciemniejsze, a ciemne nieco jaśniejsze w miarę zbliżania się do niej. Aby mieszać z inną szarością, użyj Miksera kolorów i podaj własną szarość.
Jak rozmieszczone są kroki?
Przy N krokach wiersz k miesza kolor z szarością w proporcji (k - 1) / N, więc 10 kroków daje 0%, 10%, 20% i tak dalej aż do 90%. Pierwszy wiersz zawsze przedstawia oryginalny kolor, a czysta szarość nigdy nie jest uwzględniana na liście.
Czym różni się odcień od zmniejszenia nasycenia HSL?
Zmniejszenie nasycenia HSL zachowuje jasność HSL, a mieszanie z szarością dodatkowo przesuwa jasność w kierunku środka skali. Odcienie wyglądają więc jak kolory oglądane przez szary filtr, dzięki czemu sprawdzają się na przygaszonych tłach i w stanach nieaktywnych.
Czym różni się mieszanie w sRGB od mieszania w OKLab?
Mieszanie sRGB uśrednia wartości kanałów zakodowane gamma — to klasyczne podejście stosowane w przypominających mieszanie farb tabelach odcieni i Sass mix(). Mieszanie OKLab odbywa się w przestrzeni percepcyjnej, dlatego chroma zmniejsza się bardziej równomiernie z każdym krokiem.
Jakich formatów danych wejściowych mogę użyć?
Kody hex z # lub bez, nazwy kolorów CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() i cmyk(). Wprowadź jeden kolor na każde uruchomienie.
Ile odcieni mogę wygenerować?
Od 2 do 20 w jednym uruchomieniu, domyślnie 10. Liczba obejmuje oryginalny kolor w pierwszym wierszu.
Jakie wartości pokazuje tabela?
Dla każdego kroku wyświetlany jest udział szarości, kod hex, rgb(), hsl() i oklch() w nowoczesnej składni CSS. Kanały RGB są liczbami całkowitymi, wartości procentowe HSL mają maksymalnie dwa miejsca po przecinku, a jasność i chroma OKLCH — maksymalnie cztery.
Co dzieje się z przezroczystymi kolorami i kolorami o szerokiej gamie?
Alfa wejściowa jest zachowywana dla każdego odcienia, więc kody hex mają wtedy 8 cyfr. Kolory spoza gamutu są odwzorowywane na sRGB algorytmem CSS Color 4 w kolumnach HEX, RGB i HSL, natomiast kolumna OKLCH zachowuje wartość bez odwzorowania.
Jak odtworzyć odcień w CSS?
Skopiuj wartość hex lub oklch() albo pozwól przeglądarce zmieszać kolor za pomocą color-mix(in oklab, var(--brand) 70%, #808080), aby uzyskać odcień o ustawieniu OKLab i 30% szarości. color-mix() działa we wszystkich aktualnych głównych przeglądarkach.