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.