Generator rozjaśnień kolorów
Generuj jaśniejsze rozjaśnienia koloru, mieszając go z bielą 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 rozjaśnienia, począwszy od koloru oryginalnego. Mieszanie w sRGB odpowiada klasycznym narzędziom do generowania rozjaśnień i Sass, a OKLab zapewnia równomierne percepcyjnie kroki. Idealne do teł, stanów najechania i skal.
Najczęściej zadawane pytania
Czym jest rozjaśnienie?
Rozjaśnienie to kolor zmieszany z bielą. Zachowuje swój ton, staje się jaśniejszy i bledszy, w przeciwieństwie do odcienia, który uzyskuje się przez zmieszanie z czernią, lub tonu, który powstaje przez zmieszanie z szarością.
Jak rozmieszczone są kroki?
Przy N krokach wiersz k miesza kolor z bielą 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 biel 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 bielą i większość klasycznych generatorów rozjaśnień. Mieszanie w OKLab odbywa się w przestrzeni percepcyjnej, dzięki czemu kroki jasności wyglądają na bardziej równomierne, a jasny koniec skali nie traci tak szybko nasycenia.
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 rozjaśnień 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ł bieli, 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 rozjaśnienia, ponieważ biel 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ć rozjaśnień w CSS?
Skopiuj wartości hex lub oklch() do własnych właściwości, takich jak --brand-100 i --brand-200. Aby mieszać kolory w przeglądarce, użyj color-mix(in oklab, var(--brand) 80%, white), co daje takie samo rozjaśnienie z 20% bieli jak ustawienie OKLab.
Czy mogę umieścić biały tekst na jasnym rozjaśnieniu?
Zazwyczaj nie, ponieważ jasne rozjaśnienia mają niski kontrast względem bieli. Używaj ciemnego tekstu na jasnych rozjaśnieniach i sprawdzaj każdą parę za pomocą narzędzia do sprawdzania kontrastu; zwykły tekst wymaga co najmniej 4.5:1, aby spełnić WCAG AA.