TL
Tool Lab
💰Donate
💰Donate

Generator Odcieni

Generuje jaśniejsze tinty i ciemniejsze shadesys z dowolnego koloru bazowego. Zbuduj kompletną skalę kolorów dla systemu projektowania.

Kolor bazowy
Poziomy
Odcienie jasne (jasniejsze — zmieszane z bialym)
#EBF3FE10%
#C4DAFC30%
#9DC1FB50%
#76A8F970%
#4F8FF790%
Bazowy
#3B82F6Bazowy
Odcienie ciemne (ciemniejsze — zmieszane z czarnym)
#3575DD90%
#295BAC70%
#1E417B50%
#12274A30%
#060D1910%
Pelna skala (najjasniejszy do najciemniejszego)

O tym narzędziu

Generator odcieni i cieni tworzy jaśniejsze i ciemniejsze warianty z dowolnego koloru bazowego. Odcienie jasne powstają przez mieszanie koloru bazowego z białym (dodawanie jasności), a cienie przez mieszanie z czarnym (zmniejszanie jasności).

Narzędzie generuje do 5 poziomów jasnych odcieni i 5 poziomów cieni oraz oryginalny kolor bazowy, tworząc 11-stopniową paletę wokół wybranego odcienia. Kliknij dowolny wzornik, aby skopiować jego kod hex.

Jak używać

  1. Wybierz kolor bazowy za pomocą próbnika kolorów lub wpisz kod hex.
  2. Użyj przycisków próbek, aby szybko wypróbować predefiniowane kolory.
  3. Dostosuj liczbę poziomów (3-5), aby kontrolować szerokość palety.
  4. Kliknij dowolny wzornik, aby skopiować kod hex. Użyj Kopiuj wszystko dla pełnej skali.

Przypadki użycia

Systemy projektowe wymagają systematycznej skali kolorów dla każdego koloru marki. Projektanci UI generują stany najechania, aktywny i wyłączony z jednego koloru akcji. Programiści frontend tworzą spójne warianty kolorów.

Często zadawane pytania

  • Jaka jest różnica między odcieniem jasnym a ciemnym?Odcień jasny miesza kolor z białym (jaśniejszy); cień miesza z czarnym (ciemniejszy). Ton miesza z szarym i nie jest tutaj generowany.
  • Jak są obliczane poziomy?Każdy poziom miesza kolor bazowy z białym lub czarnym w proporcjach 10%, 30%, 50%, 70% i 90%, zapewniając spójne kroki wizualne.
  • Czy mogę stąd uzyskać zmienne CSS?Wyjście to kody hex. Możesz je wkleić do CSS jako --color-500, --color-400 itd.