CodeKitHubCzym jest to narzędzie?
Rampa odcieni to seria wariacji jednego koloru na różnych poziomach jasności, używana w projektowaniu UI do rzeczy takich jak stany hover, stany nieaktywne, obramowania i tła, które muszą być powiązane z kolorem marki, ale nie identyczne.
To narzędzie konwertuje twój kolor bazowy na HSL, zachowuje stały odcień i nasycenie, a jasność zmienia od około 95% (tint bliski bieli) do około 10% (odcień bliski czerni), przy czym twój oryginalny kolor znajduje się w naturalnej pozycji w środku rampy.
Dlaczego warto go używać?
- Generuje rampę w stylu systemu projektowego (jak skala 50/100/200.../900 Tailwind) z dowolnego pojedynczego koloru, a nie tylko ze stałej palety predefiniowanej.
- Wybierz 7, 9 lub 11 kroków w zależności od tego, jak szczegółowa ma być rampa.
- Każdy krok pokazuje dokładny kod HEX i procent jasności — kliknij, aby skopiować.
- Zachowuje stały odcień i nasycenie w całej rampie, dzięki czemu wszystkie odcienie wyraźnie odnoszą się do koloru bazowego zamiast dryfować w kierunku szarości.
- Darmowe, natychmiastowe i w pełni lokalne.
Jak używać
- Wybierz kolor bazowy za pomocą selektora kolorów lub wpisując kod HEX.
- Wybierz liczbę kroków w rampie (7, 9 lub 11).
- Odczytaj kod HEX i procent jasności każdego odcienia bezpośrednio na jego próbce.
- Kliknij dowolną próbkę, aby skopiować jej kod HEX.
Przykład
Wejście
#3B82F6 (średni niebieski), 9 krokówWynik
9 odcieni od tintu bliskiego bieli (~95% jasności) do odcienia bliskiego czerni (~10% jasności), przy czym #3B82F6 znajduje się jako środkowy krokOdcień i nasycenie pozostają stałe przez wszystkie 9 kroków — zmienia się tylko jasność — dzięki czemu każdy odcień wyraźnie należy do tej samej rodziny kolorów.
Najczęściej zadawane pytania
Czy to ten sam system, którego Tailwind CSS używa dla swoich skal kolorów?
To ta sama podstawowa idea (stały odcień/nasycenie, zmienna jasność), ale nie dokładna replika konkretnej palety Tailwind — skale 50-900 Tailwind zostały ręcznie dostrojone przez projektantów, a nie wygenerowane pojedynczym wzorem. To narzędzie daje porównywalną strukturę wygenerowaną z dowolnego wybranego koloru, co jest przydatne, gdy twój kolor bazowy nie jest jednym z predefiniowanych kolorów Tailwind.
Dlaczego mój kolor wygląda niemal tak samo w dwóch sąsiednich krokach?
Może się to zdarzyć w pobliżu bardzo jasnego lub bardzo ciemnego końca rampy, gdzie postrzegana jasność zmienia się wolniej niż sugeruje wartość procentowa (znana właściwość ludzkiego postrzegania kolorów, nie specyficzna dla tego narzędzia). Wybranie mniejszej liczby kroków (7 zamiast 11) rozprasza wartości jasności dalej od siebie i zmniejsza liczbę niemal identycznych próbek.
Czy mogę użyć tych odcieni bezpośrednio jako niestandardowe właściwości CSS?
Tak — skopiuj każdy kod HEX i wklej go do zmiennych CSS (np. --color-brand-100 do --color-brand-900), dopasowując pozycję w rampie do dowolnej skali nazewnictwa używanej w twoim projekcie.
Powinienem użyć tego narzędzia czy Mieszacza kolorów?
Jeśli tworzysz jaśniejsze i ciemniejsze wersje jednego koloru — stany hover, subtelne tła, obramowania powiązane z kolorem marki — użyj tego generatora odcieni. Jeśli zamiast tego potrzebujesz koloru pomiędzy dwoma różnymi kolorami (powiedzmy, krok między twoim głównym niebieskim a drugorzędnym pomarańczowym), użyj Mieszacza kolorów, który interpoluje kanały RGB dwóch kolorów w dowolnej proporcji, zamiast zmieniać jasność jednego koloru.
Co się stanie, jeśli mój kolor bazowy jest już bardzo jasny lub bardzo ciemny?
Kolor bazowy zawsze znajduje się w środkowym wierszu, a tinty rosną do około 95% jasności powyżej niego, a odcienie schodzą do około 10% poniżej. Jeśli twój kolor bazowy jest już niemal biały, połowa tintów rampy zostaje skompresowana do wąskiego zakresu jasności (niemal identyczne wiersze), podczas gdy połowa odcieni rozciąga się szeroko — i odwrotnie dla bardzo ciemnego koloru bazowego. Dla najbardziej równomiernie rozłożonej rampy zacznij od wersji koloru o średniej jasności (mniej więcej 40-60% jasności).
Czy może generować również tony (kolor zmieszany z szarością)?
Nie — to narzędzie zmienia tylko jasność, zachowując stałe nasycenie, co daje tinty i odcienie, ale nie tony. Jeśli chcesz bardziej stonowaną rampę, najpierw zdesaturuj kolor bazowy (wybierz jego bardziej szarą wersję w selektorze kolorów) i wygeneruj rampę z niego; każdy krok odziedziczy niższe nasycenie.