Co to jest HSL i dlaczego projektanci powinni to opanować

Kolor jest jednym z najpotężniejszych narzędzi w zestawie narzędzi projektanta, ale praca z tradycyjnymi systemami, takimi jak Hex i RGB, czasami czują się ograniczające. Te formaty działają, ale nie odzwierciedlają tego, jak faktycznie widzimy lub myśli o kolorze. Potrzebujesz jaśniejszego odcienia lub chcesz dopasować nasycenie w różnych odcieniach? Zostałeś zgadując.

W tym miejscu pojawiają się Hue, Nasycenie i Lekkość (HSL). Sprawia, że ​​regulacje kolorów są bardziej wizualne i przewidywalne, a Divi 5 obsługuje teraz natywnie dzięki jego względnej wersji i wydaniu funkcji HSL. Przejdźmy, jak to działa i dlaczego będziesz chciał to opanować.

Dlaczego większość projektantów zmaga się z wyborem kolorów

Narzędzia kolorystyczne często nie pasują do tego, jak naturalnie myślimy o kolorze. Widzisz odcień niebieskiego, który kochasz, ale jedynym sposobem na jego uchwycenie jest kod sześciokątny, taki jak #4A90E2. Te litery i liczby nic nie znaczą dla twojego mózgu.

Kolory sześciokątne są wytwarzane przez mieszanie wartości czerwonych, zielonych i niebieskich. Każda para (np. 4A, 90, E2) pokazuje, ile używanych jest każdego koloru, od 0 do 255. Razem tworzą końcowy kolor #4A90E2.

Możesz mieć problemy z ustaleniem, które liczby zmienić, gdy potrzebujesz lżejszej wersji swojej marki Blue. Czy powinieneś jednakowo zwiększyć wszystkie wartości RGB? Czy dostosuj tylko jeden kanał RGB (czerwony, zielony lub niebieski)? Liczby nie pasują do tego, czego oczekują twoje oczy, więc dostosowujesz i podgląd, aż poczuje się dobrze.

Tradycyjne systemy kolorów powodują większe problemy podczas pracy w różnych kontekstach. Tworzenie wariantów kolorów staje się czystym domysłem. Chcesz pięć odcieni, które działają razem, ale nie ma na to systemu. Lightening #4A90E2 do #6BA3E8 może wyglądać dobrze lub może wyglądać na wyprysk. Nie będziesz wiedział, dopóki tego nie zobaczysz.

Zdobycie odcieni poprzez zmianę kodów sześciokątnych nie jest proste. Nowe wartości sześciokątne ( #6BA3E8) są starannie wybrane po lewej stronie, aby stworzyć jaśniejszy odcień #4A90E2. Po prawej, samo wprowadzanie nominalnych zmian (#3B99E5) nie rozjaśnia koloru, ale całkowicie go zmienia.

Ten powolny, ręczny przepływ pracy zajmuje wiele godzin. Poprawisz wartości, sprawdzasz podgląd i ponownie poprawisz, walcząc z narzędziami zamiast projektowania. Twoja uwaga zostaje wciągnięta w szczegóły techniczne, gdy powinna skupić się na tym, jak kolory sprawiają, że ludzie się czują.

Wielu projektantów unika eksperymentów kolorów, ponieważ proces jest tak niezgrabny. Trzymasz się bezpiecznych wyborów lub kopiuj palety z innych stron. Narzędzia, które powinny pomóc Ci zbadać kreatywność kolorów, faktycznie to ograniczają.

Problem ze statycznymi wartościami RGB

Wartości RGB nie zawsze zachowują się, jak się spodziewasz. Zielony wydaje się znacznie jaśniejszy niż niebieski w tym samym ustawieniu, ale system traktuje je jednakowo. RGB (128, 128, 128) jest idealnym średnim szarym, ale sposób, w jaki wygląd może się różnić w zależności od ekranu, oświetlenia lub profilu kolorów.

Chcesz lżejszą wersję koloru marki? Możesz spróbować podnieść wartości RGB, a czasem dostajesz to, czego się spodziewałeś. Innym razem dostajesz coś, co wygląda na wyprysk i dziwnie. Nie ma sposobu, aby wcześniej stwierdzić.

Kolor niebieski marki z wartościami RGB wzrósł jednakowo o +50, co skutkuje umytym odcieniem, który nie jest oczekiwanym gładkim lżejszym tonem. To pokazuje, że dodanie tej samej ilości do każdego kanału RGB nie zawsze wytwarza przewidywalne lub zrównoważone odcienie kolorów.

Kolory RGB również zmieniają się między różnymi programami. Dzieje się tak z powodu różnic w profilach kolorów, silnikach renderowania i sposobu interpretacji tych wartości. Wybierz idealny odcień w Photoshopie, skopiuj kod sześciokątny do swojej witryny, a może nadal wyglądać nieco inaczej. Wytyczne marki stają się trudniejsze do egzekwowania, gdy ten sam kod kolorów wygląda nieco inaczej w przeglądarkach i narzędziach projektowych.

Każdy kolor zmienia się na swój sposób, gdy próbujesz go rozjaśnić lub przyciemnić. Ponieważ RGB nie reguluje kolorów równomiernie, niektóre odcienie zanikają szybciej lub zmieniają się w nieoczekiwany sposób. Niektóre odcienie desaturatują szybciej niż inne wraz ze wzrostem lekkości. Twój niebieski staje się szary, a czerwony pozostaje żywy. Twój fiolet staje się błotnisty, a pomarańcza pozostaje czysta.

Prace kolorów zamienia się w próbę i błąd zamiast celowego projektowania.

Jaki jest system odcienia, nasycenia i lekkości (HSL)?

Odcień, nasycenie i lekkość (HSL) rozbija kolor na trzy części, które pasują do tego, jak twój mózg faktycznie myśli o kolorze. Odcień wybiera kolor podstawowy z koła 360 opcji. Nasycenie kontroluje, jak żywy lub szary wygląda kolor. Lekkość decyduje, czy jest mroczny, jasny czy gdzieś pomiędzy.

Kiedy myślisz: „Chcę ciemnozielonego”, już myślisz o warunkach HSL. Wiesz, że chcesz zielonego (odcienia), prawdopodobnie dość bogatego (nasycenie) i po ciemniejszej stronie (lekkość).

Jak te trzy komponenty działają razem

Hue działa jak koło kolorów wycięte z widzialnego spektrum światła. Końce łączą czerwone z magenta, tworząc gładką pętlę każdego możliwego koloru. Chcesz idealnego pomarańczowego? Zacznij od czerwonego (0 stopni) i idź w kierunku żółtego około 30 stopni.

Nasycenie mierzy czystość kolorów jako procent. Zero procent usuwa cały kolor, pozostawiając szary. Sto procent daje możliwą możliwą wersję. Pomyśl o nasyceniu jako o różnicy między znakiem neonowym a stonowaną akwareną.

Jak działają kolory HSL, zainspirowane grafiką na Wikipedii na ten sam temat

Lekkość waha się od 0% (czysta czarna) do 50% (neutralna) do 100% (czysty biały). Większość użytecznych kolorów żyje od 20% do 80% lekkości. To pasuje do tego, jak naturalnie myślisz o uczynieniu kolorów lżejszym lub ciemniejszym.

Dlaczego budowniczowie stron zwykle unikają HSL

Większość budowniczych stron trzyma się kodów sześciokątnych i RGB z powodów praktycznych, a nie dlatego, że systemy te działają lepiej. Deweloperzy budownicze stoją w obliczu prawdziwych przeszkód technicznych. Użytkownicy już znają kody sześciokątne z Photoshopa i innych narzędzi projektowych. Przekształcenie między systemami kolorów wymaga dodatkowego przetwarzania.

Wspieranie HSL oznacza budowanie nowych interfejsów i edukowanie użytkowników na temat nieznanych pojęć, chyba że zbieracz kolorów HSL jest idealnie przybity. To konserwatywne podejście ma sens z perspektywy biznesowej, nawet jeśli ogranicza kreatywne możliwości.

Twórz idealne warianty kolorów za pomocą nowych elementów sterujących HSL Divi 5

HSL brzmi świetnie w teorii, ale teoria nie buduje stron internetowych. Potrzebujesz narzędzi, które wspierają to podejście. Większość budowniczych stron zmusza cię do kodów sześciokątnych i zgadywania RGB. Divi 5 zmienia wszystko o tym, jak pracujesz z kolorem. Ale najpierw:

Co to jest Divi?

Divi to konstruktor stron, który działa inaczej od innych budowniczych stron WordPress. Otrzymujesz narzędzia do projektowania wizualnego zmieszane z poważnymi elementami sterowania typografią. Redaktor na żywo natychmiast pokazuje twoje zmiany. Dostosuj rozmiary czcionek, ulepsz odstępy linii i obserwuj aktualizację strony.

Możesz upuścić ponad 200 modułów w dowolnym miejscu. Bloki tekstowe, nagłówki i specjalne elementy treści wszystko ładnie się razem odtwarzają.

Oto, co sprawia, że ​​Divi jest specjalny: ponad 2000 gotowych układów zbudowanych dla prawdziwych firm. Mówimy o prawdziwych projektach, a nie podstawowych szablonach startowych. Potrzebujesz czegoś do swojej restauracji? Jest na to układ. Prowadzisz studio fotograficzne? Mamy Cię objęte. Konsultanci i startupy technologiczne również otrzymują własne projekty.

Każdy układ zna twoją branżę. Kolory, odstępy i przepływ treści mają sens, w jaki sposób Twoi klienci myślą i przeglądają.

Weź pełną kontrolę witryny

Builder z motywami wkłada w ręce każdy element stylizacji tekstu witryny. Zbuduj niestandardowe nagłówki, które mówią w języku Twojej marki. Projektuj strony blogów, które sprawiają, że długie artykuły są łatwe do odczytania. Twoje strony 404 błędów mogą zachować te same czcionki i styl co reszta witryny.

Divi AI wprowadza sztuczną inteligencję prosto do twojego przepływu pracy. Wygeneruj nagłówki, które brzmią tak, jakbyś je napisałeś. Utwórz kopię produktu, która dokładnie pasuje do głosu marki.

Buduje całe sekcje stron, które rozumieją Twoją firmę.

Kiedy ich potrzebujesz, pisze fragmenty kodu.

Divi AI działa również z twoimi obrazami tuż w budowniczym. Opisz, co wymaga naprawy na dowolnym obrazie i jak wprowadza te zmiany.

Nawet wygeneruj zupełnie nowe zdjęcia na żądanie.

Pomiń problem z pustą stroną za pomocą Divi Quick Sites

Divi Quick Sites naprawia problem pustej strony, który zatrzymuje wiele projektów przed rozpoczęciem. Profesjonalne witryny startowe są wyposażone w konfigurację typografii. Nasz zespół projektowy buduje te szablony z unikalnymi obrazami i dziełami sztuki, których nie zobaczysz nigdzie indziej.

Szybkie witryny Divi z Divi AI mogą również budować niestandardowe układy na podstawie opisu firmy. Powiedz to o swojej praktyce konsultacyjnej lub restauracji, a tworzy odpowiednie strony z odpowiednią kopią dla Twojej branży.

To wykracza poza szkielet. Dostajesz prawdziwe nagłówki, kopię ciała i obrazy, które mają sens dla Twojej firmy. Możesz ustawić czcionki i kolory marki z góry lub pozwolić AI wybrać dla Ciebie.

Później wszystko pozostaje w pełni edytowalne, więc możesz udoskonalić typografię, aby pasować do Twojej wizji.

Co nowego w Divi 5?

Divi 5 to kolejna wersja konstruktora stron, obecnie w testowaniu alfa i gotowa na nowe projekty stron internetowych. Skoncentrowaliśmy się na praktycznych ulepszeniach, które przyspieszają codzienną pracę i sprawiają, że place budowlane są przyjemniejsze.

Najlepsze części Divi pozostały na miejscu podczas przebudowy wszystkiego innego. Fresh Interface Design spełnia lepszą wydajność pod maską. Nowoczesne praktyki kodowania zasilają teraz cały system.
Strony ładują się szybciej niż wcześniej. Kontrole reagują szybciej po kliknięciu. Typografia pozostaje spójna na całej witrynie bez dodatkowej pracy ręcznej.

Oto kilka najważniejszych punktów:

• Pełna framework Odbudowuje zrzucanie starego systemu kodów skrótów. Wszystko działa na nowoczesnej architekturze blokowej, którą przeglądarki radzą sobie znacznie lepiej.
• System FlexBox Divi 5 zapewnia bezpośrednią kontrolę nad budowaniem nowoczesnych, responsywnych układów, łatwego zarządzania wyrównaniem, odstępem i owijaniem bez niestandardowego kodu.
• System kolorów HSL przynosi sterowanie kolorami, które pasują do tego, jak myślą projektanci. Dostosuj odcień, nasycenie i lekkość zamiast zgadywania za pomocą kodów sześciokątnych.
• Siedem niestandardowych punktów przerwania zastępuje stary limit trzech rozmiarów. Twoja typografia wygląda idealnie na każdym urządzeniu, z którego korzystają odwiedzający.
• Wbudowane funkcje CSS oznacza calc (), clamp (), min () i max () działają bezpośrednio w edytorze wizualnym. Buduj responsywny tekst, który skaluje się naturalnie bez kodu.
• Globalne zmienne projektowe przechowują czcionki, kolory i odstępy w jednym miejscu. Zmień raz główna czcionka nagłówka. Każdy H1 w witrynie aktualizuje się automatycznie.
• Preprezentowany system projektowy zawiera ustawienia wstępne dla poszczególnych modułów oraz ustawienia o grupie opcji dla pełnych stylów typograficznych. Aby zachować spójność, używaj ich w różnych modułach.
• Nowy interfejs wizualnego budowniczego otrzymuje panele do dokania, okna z zakładkami, skróty klawiatury i lepszy widok warstw z bułką tartą. Nawigacja staje się znacznie łatwiejsza.
• Zagnieżdżone rzędy umieszczają wiersze w innych rzędach dla złożonych układów. Zbuduj zaawansowane ustalenia dotyczące układu bez specjalnych typów sekcji.
• Grupy modułów łączą różne elementy w pojedyncze jednostki. Ułatwia to zarządzanie złożonymi układami tekstowymi, a także możesz budować niestandardowe moduły.
• Multi Panel Workspace porusza panele wszędzie tam, gdzie działa najlepiej. Utrzymuj elementy sterujące typografii, regulując inne rzeczy projektowe.
• Atrybut Management Copies, paste i resetuje style typografii między elementami. Wybierz określone atrybuty do transferu zamiast kopiowania wszystkiego.
• Tryby interfejsu lekkiego/ciemnego zmniejszają odkształcenie oczu podczas długich sesji projektowych.
• Skalowanie na płótnie pokazuje, jak typografia wygląda na różnych rozmiarach ekranu bez opuszczania edytora.

Odkryj wszystkie wydania funkcji Divi 5

Jak tworzyć kolory HSL z Divi 5

Jak wspomniano, Divi 5 odbudowuje zbieracz kolorów od zera. Nowy interfejs spada kody sześciokątne dla elementów sterujących HSL, które działają tak, jak twój mózg myśli o kolorze. Trzy suwaki obsługują pracę:

• Hue akceptuje 0–360 stopni, a wartości ujemne owijają się (np. -60 staje się 300). Koło kolorów łączy się na obu końcach. Zero, 360 i negatywne 360 ​​dają ci ten sam czerwony. Potrzebujesz uzupełniającego się koloru? Ustaw odcień na 180 stopni od punktu początkowego.
• Nasycenie trwa od 0% do 100% i kontroluje, jak żywy kolor wygląda. Zero procentu usuwa całą intensywność kolorów, pozostawiając szare. Sto procent daje pełny kolor.
• Lekkość działa w tym samym zakresie procentowym. Zero sprawia, że ​​czarny, 100% tworzy biały, a 50% pokazuje czystą formę jakiegokolwiek odcienia, który wybrałeś.

Kontrola aktualizują na żywo podczas przeciągania. Zastosuj przyciski lub opóźnienia odświeżania nie przerywają twojego przepływu pracy.

1. Buduj względne kolory z globalnych kolorów

Względne kolory pozwalają tworzyć nowe kolory oparte na istniejących globalnych kolorach poprzez ulepszenie poszczególnych komponentów HSL. Zacznij od menedżera zmiennych projektowych, dodając nowy kolor.

Za pomocą zbieracza kolorów ustaw kolor podstawowy (może to być kolor marki), aby pasował do istniejącego podstawowego globalnego koloru.

Skonfigurujmy wtórne kolory, używając pierwotnej zmiany Hue, aby stworzyć uzupełniające się kolory. Weź swój podstawowy kolor, z lekkości ustawioną na 25%.

Możesz nawet bawić się z odcieniem lub nasyceniem, aby stworzyć nowy kolor jako kolor wtórny.

Próbki kolorów pokazują ważne informacje na pierwszy rzut oka. Możesz stwierdzić, czy coś używa zmiennej projektowej i zobaczyć, w jaki sposób filtry HSL modyfikują kolor podstawowy. Ta wizualna informacja zwrotna pomaga zrozumieć, co dzieje się z twoimi relacjami kolorystycznymi.

Podobnie, twórz ciemniejsze odcienie dla koloru tekstu nagłówka i tekstu nadwozia kolorów globalnych przy użyciu podstawowego koloru jako podstawy.

Możesz oczywiście stworzyć tutaj bardziej dekoracyjne kolory i nadal możesz ręcznie wprowadzać hex, rgb lub nazwane wartości kolorów.

2. Zarządzaj wielowarstwowymi relacjami z zmiennymi

Zmienne projektowe mogą się układać na sobie w celu uzyskania złożonych systemów kolorów. W oparciu o swoją podstawową możesz tworzyć dodatkowe kolory dekoracyjne, takie jak Burnt Moss. Następnie zmniejsz krycie spalonego mchu, aby zbudować kolor cienia.

Te zagnieżdżone relacje pokazują, w jaki sposób Divi 5 obsługuje złożone hierarchie kolorów. Po dostosowaniu koloru podstawowego, najpierw przypalony kolor Moss aktualizuje się, uruchamiając kolor cienia do aktualizacji. Cały łańcuch pozostaje połączony.

Takie podejście zmienia zarządzanie kolorami z losowego zgadywania w przewidywalny system. Paleta kolorów Twojej witryny pozostaje harmonijna bez ręcznych dostosowań w każdym elemencie.

3. Zastosuj kolory HSL do swojej witryny

Naciśnij dowolny moduł tekstowy i otwórz zbieracz kolorów. Twoje zapisane zmienne pokazują wskaźniki. Kliknij „Kolor wtórny”, a wypełni tło sekcji. Ten sam kolor działa na przyciski, tła i granice.

Typografia działa, gdy trzymasz się jednego odcienia, ale zmieniasz lekkość. Nagłówki mogłyby używać podstawowego koloru o -25% lekkości. Tekst nadwozia jest nieco jaśniejszy na poziomie -15%. Linki znajdują się na poziomie -45%. Wszystko dotyczy, ale pozostaje jasne.

Tła wymagają stonowania kolorów marki. Push Lightness do 95%. Nasycenie upuść do 15%. Teraz masz markowe pochodzenie, które nie walczą z treścią. Przyciski działają z pełnym nasyceniem. Ochody stwierdzają, że lekkość w dół. Ten sam kolor, inna intensywność.

Tekst lekki wymaga ciemnego tła. Liczby lekkości mówią ci, co działa. Tekst o 50% lekkości łączy się z tłem poniżej -30% lekkości.

Sekcje z ciemnym tekstem na lekkim tle odwracają wartości. Te same odcienie, takie same nasycenie. Wartości lekkości wymieniania i gotowe. I oczywiście wszystkie te kolory utrzymują swoje linki nawet po zastosowaniu. Zmień jedną zmienną i wszystko dostosowuje się. Łatwe!

4. Zapisz kolory HSL jako ustawienia wstępne wielokrotnego użytku

Po utworzeniu modułów i zastosowaniu zmiennych projektowania kolorów ustawiaj te kolory do stylów wielokrotnego użytku. Divi 5 oferuje dwa wstępne typy, które współpracują:

Grupa opcji Kontroluje określone aspekty projektowe we wszystkich modułach. Styl nagłówki za pomocą zmiennej kolorów tekstu nagłówka. Dodaj cienie do kolumny za pomocą spalonego mchu i 50% krycia. Wpadaj na ikonę modułu grupy opcji w dowolnym module, odpowiednio oznacz i zapisz.

To samo działa na tła, odstępy, animacje i tekst. Dodaj promień granicy za pomocą zmiennej projektowej liczby i skonfiguruj ustawione podanie odwołujące się do tej zmiennej liczby. Każda grupa opcji obsługuje własne terytorium projektowe i może być stosowana, tj. Promień graniczny kolumny można zastosować do twojego wezwania do działania.

Aby złożyć wniosek, przejdź do odpowiedniej opcji i wybierz ustawienie wstępne.

Presete elementów zapisują kompletne style modułu. Stycz moduł przycisku o wtórnym kolorze o 80% lekkości. Kliknij wstępnie ustawiony selektor w prawym górnym rogu ustawień modułu. Utwórz nowy ustawienie o nazwie „Brand Color Button”. Zapisuje to wszystkie ustawienia przycisku, w tym kolory HSL.

Teraz, gdy dodasz nowy przycisk, zastosuj ten ustawienie wstępne i dziedziczy on cały styl. Aby ograniczyć swoją pracę, weź dowolny niestandardowy ustawienie ustawień (grupa opcji lub element), którą utworzyłeś i kliknij ikonę gwiazdy obok niej. To ustawienie staje się domyślnie dla wszystkich nowych instancji tego elementu lub grupy opcji.

Twoje relacje HSL pozostają nienaruszone w ramach ustawień wstępnych. Po aktualizacji koloru każdy moduł i ustawienie ustawień również przy użyciu tego koloru aktualizuje się. Zbuduj wstępne biblioteki na lekkie sekcje, ciemne sekcje i specjalne momenty marki. Wartości HSL podróżują z każdym ustawieniem, utrzymując system kolorów spójny w różnych projektach.

Buduj systemy kolorów dla swoich stron internetowych z Divi 5

Prace kolorów, które zajmowały dni. Fiftowałbyś kody sześciokątne, kopiowałeś wartości między programami i modlisz się, żeby coś wyglądało przyzwoicie.

HSL sprawia, że ​​kolor działa znowu zabawa. Widzisz cień, który kochasz i wiesz dokładnie, jak go odtworzyć. Odcień wybiera kolor, nasycenie kontroluje, jak żywe jest, a lekkość sprawia, że ​​jest jaśniejszy lub ciemniejszy. Teraz odświeżenie marki zajmuje kilka minut zamiast godzin.

To jest prawdziwa kontrola projektu. Divi 5 sprawia, że ​​to się dzisiaj wydarzyło.