# Generator odcieni kolorów

Generuj ciemniejsze odcienie koloru, mieszając go z czernią w równych krokach. 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, począwszy od koloru oryginalnego. Mieszanie w sRGB odpowiada klasycznym narzędziom do generowania odcieni i Sass, a OKLab zapewnia równomierne percepcyjnie kroki. Idealne do tworzenia skal kolorów UI.

## Najczęściej zadawane pytania

### Czym jest odcień?

Odcień to kolor zmieszany z czernią. Zachowuje swój ton i staje się ciemniejszy, w przeciwieństwie do rozjaśnienia, które uzyskuje się przez zmieszanie z bielą, lub tonu, który powstaje przez zmieszanie z szarością.

### Jak rozmieszczone są kroki?

Przy N krokach wiersz k miesza kolor z czernią w proporcji (k - 1) / N, więc 10 kroków daje 0%, 10%, 20% i tak dalej aż do 90%. Pierwszy wiersz zawsze zawiera oryginalny kolor, a czysta czerń nigdy nie trafia na listę.

### Czym różni się mieszanie w sRGB od mieszania w OKLab?

Mieszanie w sRGB uśrednia wartości kanałów zakodowane z użyciem korekcji gamma, tak jak robią to Sass mix() mieszające z czernią i większość klasycznych generatorów odcieni. Mieszanie w OKLab odbywa się w przestrzeni percepcyjnej, dzięki czemu kroki wyglądają na bardziej równomierne pod względem jasności, a ciemniejsze odcienie zachowują więcej koloru.

### 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: udział czerni, kod hex, rgb(), hsl() i oklch() w nowoczesnej składni CSS. Kanały RGB to liczby całkowite, wartości procentowe HSL mają maksymalnie dwa miejsca po przecinku, a jasność i chroma OKLCH maksymalnie cztery.

### Co dzieje się z przezroczystymi kolorami?

Przezroczystość koloru wejściowego jest zachowywana dla każdego odcienia, ponieważ czerń jest mieszana z tym samym poziomem przezroczystości. Kody hex mają wtedy 8 cyfr, a funkcje CSS kończą się przezroczystością po ukośniku.

### Co dzieje się z kolorami spoza sRGB?

Mieszanie wykorzystuje pełny kolor, ale HEX, RGB i HSL obsługują tylko sRGB, więc w tych kolumnach kroki spoza gamy są mapowane do sRGB za pomocą algorytmu Color 4 CSS. Kolumna OKLCH zachowuje wartość bez mapowania.

### Jak używać odcieni w CSS?

Skopiuj wartości hex lub oklch() do własnych właściwości, takich jak --brand-600 i --brand-700. Aby mieszać kolory w przeglądarce, użyj color-mix(in oklab, var(--brand) 80%, black), co daje taki sam odcień z 20% czerni jak ustawienie OKLab.

### Czy ciemniejsze odcienie są automatycznie dostępne?

Nie. Sprawdź kontrast tekstu na każdym odcieniu za pomocą narzędzia do sprawdzania kontrastu, ponieważ ciemny na pozór odcień może nie osiągać wartości 4.5:1 względem innego ciemnego koloru lub kolorowego tekstu.

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)