Softonic

Generator jasnych odcieni

Krok 1 / 2
Dalej

Jasny odcień powstaje przez zmieszanie koloru z bielą – z każdym krokiem staje się jaśniejszy. Generator bierze Twój kolor bazowy i tworzy drabinę stopniowo jaśniejszych odcieni, przydatną do zakresów palet w systemach projektowych (od 100 do 400), subtelnych wypełnień tła, stanów najechania na ciemne kolory podstawowe oraz teł odznak i alertów, gdzie kolor akcentowy musi być obecny, lecz stonowany.

Jak powstają odcienie

  1. 1

    Wybierz kolor bazowy

    Skorzystaj z próbnika kolorów, aby wybrać kolor bazowy. Najlepiej sprawdza się przy bazach o średniej jasności; bazy niemal białe mają niewielki zapas do rozjaśnienia.

  2. 2

    Wybierz liczbę kroków

    Od 3 do 20 kroków, domyślnie 10. 10 daje pełną skalę systemu projektowego; do szybkich prac w interfejsie wystarczy mniej.

  3. 3

    Mieszaj z bielą w rosnących proporcjach

    Przy 10 krokach pierwszy odcień miesza około 9% bieli, a ostatni około 91%. Interpolacja odbywa się bezpośrednio w przestrzeni RGB, więc wraz ze wzrostem jasności nasycenie maleje.

  4. 4

    Odczytaj wartości HEX

    Każdy próbnik pokazuje swoją wartość HEX. Przenieś je do zmiennych CSS, skali Tailwind lub mapy Sass.

Przykładowa skala odcieni z #3B82F6

Poniższa tabela pokazuje, co narzędzie generuje przy domyślnych 10 krokach:

Krok Hex Mieszanie Typowa rola
0 #3B82F6 Bazowy Główny kolor marki (niebieski-500)
1 #4C8DF6 9,1% bieli Jasny stan najechania na ciemnym tle
2 #5E98F7 18,2% bieli odpowiednik niebieskiego-400
3 #70A4F8 27,3% bieli
4 #82AFF9 36,4% bieli niebieski-300
5 #94BAFA 45,5% bieli
6 #A5C6FA 54,5% bieli
7 #B7D1FB 63,6% bieli
8 #C9DCFC 72,7% bieli Subtelne tło (niebieski-100/200)
9 #DBE8FD 81,8% bieli
10 #EDF3FE 90,9% bieli niebieski-50

Odcień jasny + ciemny = skala systemu projektowego

Połącz jasne odcienie (tint) i ciemne odcienie (shade) wokół jednej bazy, aby utworzyć pełną skalę:

  • 50, 100, 200, 300, 400: jasne odcienie (od najjaśniejszego do nieco jaśniejszego niż baza)
  • 500: baza
  • 600, 700, 800, 900: ciemne odcienie (od nieco ciemniejszego niż baza do najciemniejszego)

Odpowiada to systemom Tailwind, Material, Open Color, Radix UI oraz większości popularnych systemów projektowych. Skale z 10–11 kroków są normą.

Gdzie odcienie sprawdzają się w interfejsie

  • Tło alertów i odznak: tekst error-500 na tle error-50 = natychmiastowa rozpoznawalność bez wizualnego krzyku.
  • Stany najechania na ciemnym tle: przyciski na ciemnej powierzchni rozjaśniają się po najechaniu do jaśniejszego odcienia.
  • Sekwencyjne skale w wizualizacji danych: mapowanie wartości na kolor, w którym wysokie wartości są nasycone, a niskie zanikają w kierunku bieli.
  • Symbole zastępcze kategorii dla awatarów i wykresów: odcień koloru podstawowego, gdy brakuje obrazu lub danych.
  • Warstwy powierzchni: tło karty lekko zabarwione kolorem marki dla subtelnej obecności marki.

Dlaczego najjaśniejsze odcienie tracą nasycenie

Generator miesza bezpośrednio w przestrzeni RGB. Wraz z dodatkiem bieli nasycenie spada szybciej, niż rośnie postrzegana jasność, więc najwyższe stopnie wyglądają blado lub szaro. To normalne zachowanie mieszania w RGB:

  • Mieszanie RGB (to narzędzie): proste i przewidywalne. Nasycenie maleje równomiernie; bardzo jasne stopnie wyglądają na desaturowane.
  • Interpolacja OKLCH lub LAB: stosowana przez oprogramowanie projektowe, aby utrzymać chromę stabilniejszą podczas rozjaśniania. Ten generator nie oferuje tych modeli; jeśli potrzebujesz odcieni o stabilnej barwie, utwórz je w programie obsługującym OKLCH.
  • Rozjaśnianie w HSL: podnosi jasność bez mieszania bieli; wynik może wyglądać pastelowo, a nie jak farba.

Dolny próg odcieni dla użytecznego interfejsu

Bardzo jasne odcienie (krok 8+) zbliżają się do czystej bieli i stają się wizualnie nieodróżnialne na białym tle. Przydatne jako:

  • Subtelne podświetlenia zaznaczenia za tekstem.
  • Niemal niewidoczne paski wierszy w gęstych tabelach.

Nie nadają się jednak do przycisków ani etykiet, gdzie użytkownik musi zobaczyć wyraźny kolor. Łącz jasne odcienie z ciemniejszym elementem (obramowaniem, tekstem), aby je osadzić.

Najczęściej zadawane pytania

Generator miesza bezpośrednio w RGB, a interpolacja RGB obniża nasycenie wraz ze wzrostem jasności, przez co najwyższe stopnie dryfują w stronę bieli. Interpolacja w OKLCH lub LAB zachowuje natomiast widoczny ślad bazowej barwy; skorzystaj z programu obsługującego OKLCH, jeśli to ważne.

Podobne, ale nie identyczne. Mieszanie z bielą proporcjonalnie zmniejsza zarówno nasycenie, jak i jasność; regulacja jasności w HSL niezależnie podnosi wartość L. Jasne odcienie wydają się bardziej naturalne (jak farba), natomiast regulacja jasności HSL może prowadzić do nierealistycznych pasteli.

Tak – tryb ciemny zwykle wymaga innej „drabiny jasności”, ponieważ tła są już ciemne. Wiele systemów odwraca skalę (poziom 50 w trybie ciemnym to odpowiednik bieli na ciemnym tle z poziomu 900 w trybie jasnym).

Utwórz 5-stopniową drabinę jasnych odcieni (50–500) oraz 5-stopniową drabinę ciemnych odcieni (500–900) z tej samej bazy. Połącz je, aby uzyskać pełną skalę systemu projektowego z 10–11 stopni.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Generator losowych liter

Generuj losowe litery A-Z. Wybierz liczbę, wielkie litery, małe litery lub zapis mieszany i użyj wyniku w grach, zadaniach lub lekcjach.

Konwerter ASCII na binarny

Konwertuj dowolny ciąg ASCII na reprezentację binarną. Każdy znak staje się ośmioma bitami, rozdzielonymi spacjami, gotowymi do wklejenia w ślad protokołu albo zadanie domowe.

Konwerter binarnego na ósemkowy

Konwertuj binarny na ósemkowy, grupując bity po trzy. Przydatne przy uprawnieniach Unix, starszych systemach i kompaktowym zapisie liczb.

Próbnik kolorów HEX

Wybierz lub wpisz kolor HEX i sprawdź RGB, HSL, przybliżone CMYK, luminancję względną oraz kontrast z bielą i czernią.