# 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.

Twoja reklama tutaj?

[Napisz do nas](mailto:hi@dennn.is?subject=Reklama%20w%20OneClick%20Pro)

[Reklama Pakiet wtyczek gotowy do pracy z agentami dla WordPress.](https://sleekwp.com/?ref=oneclickpro)