Generator odcieni i cieni
21 kolory
#ffffffrgb(255, 255, 255)#ebf3fergb(235, 243, 254)#d8e6fdrgb(216, 230, 253)#c4dafcrgb(196, 218, 252)#b1cdfbrgb(177, 205, 251)#9dc1fbrgb(157, 193, 251)#89b4fargb(137, 180, 250)#76a8f9rgb(118, 168, 249)#629bf8rgb(98, 155, 248)#4f8ff7rgb(79, 143, 247)#3b82f6rgb(59, 130, 246)#3575ddrgb(53, 117, 221)#2f68c5rgb(47, 104, 197)#295bacrgb(41, 91, 172)#234e94rgb(35, 78, 148)#1e417brgb(30, 65, 123)#183462rgb(24, 52, 98)#12274argb(18, 39, 74)#0c1a31rgb(12, 26, 49)#060d19rgb(6, 13, 25)#000000rgb(0, 0, 0)Szczegóły techniczne
Jak działa Generator Odcieni i Cieni
Co robi narzędzie
Generator Odcieni i Cieni tworzy jaśniejsze odcienie (mieszane z bielą) oraz ciemniejsze cienie (mieszane z czernią) z dowolnego koloru bazowego. Wprowadź kolor i wybierz liczbę kroków, aby wygenerować płynny gradient wariantów. Każdy krok wyświetla wartości HEX, RGB oraz procent mieszania, co ułatwia budowanie spójnych skal kolorów do projektowania UI, brandingu i wizualizacji danych.
Typowe zastosowania dla programistów
Programiści używają generatorów odcieni i cieni podczas budowania skal tokenów projektowych (np. blue-100 do blue-900), tworzenia stanów hover i active dla elementów interaktywnych, projektowania dostępnych hierarchii kolorów oraz uzyskiwania spójnych kolorów tła i powierzchni dla jasnych i ciemnych motywów. Narzędzie jest niezbędne do budowania niestandardowych palet kolorów w Tailwind CSS lub systemów kolorów Material Design.
Jak działają odcienie i cienie
Odcień (tint) powstaje przez zmieszanie koloru z bielą, co zwiększa jego jasność. Cień (shade) powstaje przez zmieszanie z czernią, co zmniejsza jasność. Wzór dla odcieni to: new = base + (255 - base) × factor. Dla cieni: new = base × (1 - factor). Kroki są równomiernie rozłożone między kolorem bazowym a czystą bielą (odcienie) lub czystą czernią (cienie), tworząc liniowy gradient wartości kolorów.
Typowe pułapki i przypadki brzegowe
Liniowe mieszanie z bielą lub czernią może dla niektórych odcieni dawać wyblakłe odcienie lub „błotniste” cienie. Żółcie mogą wyglądać na zielonkawe po przyciemnieniu, a błękity mogą tracić wyrazistość po rozjaśnieniu. Dla skal o jednolitej percepcji rozważ użycie przestrzeni barw OKLCH lub CIELAB. Zawsze weryfikuj, czy Twoje najjaśniejsze odcienie i najciemniejsze cienie zachowują wystarczający kontrast względem docelowych teł.
Kiedy używać tego narzędzia zamiast kodu
Używaj tego narzędzia w przeglądarce do szybkiej eksploracji i generowania skal kolorów podczas pracy projektowej. W produkcyjnych systemach projektowych generuj odcienie i cienie programowo, korzystając z bibliotek kolorów takich jak chroma.js lub culori, które wspierają przestrzenie barw o jednolitej percepcji i potrafią eksportować tokeny projektowe w dowolnym formacie.