Was ist HSL und warum Designer es meistern sollten

Farbe ist eines der leistungsstärksten Werkzeuge im Toolkit eines Designers, aber die Arbeit mit traditionellen Systemen wie Hex und RGB kann sich manchmal einschränkend anfühlen. Diese Formate funktionieren, aber sie reflektieren nicht, wie wir Farbe tatsächlich sehen oder überlegen. Benötigen Sie einen leichteren Farbton oder möchten Sie die Sättigung über verschiedene Farbtöne übereinstimmen? Du bist raten.

Hier kommen Farbton, Sättigung und Leichtigkeit (HSL) ins Spiel. Es macht die Farbanpassungen visueller und vorhersehbarer und unterstützt es nun dank seiner relativen Farben & HSL -Funktionen nativ. Lassen Sie uns untersuchen, wie es funktioniert und warum Sie es beherrschen möchten.

Warum die meisten Designer mit Farbauswahl zu kämpfen haben

Farbwerkzeuge entsprechen oft nicht, wie wir natürlich über Farbe denken. Sie sehen einen Blauschatten, den Sie lieben, aber die einzige Möglichkeit, ihn zu erfassen, ist durch einen Hex -Code wie #4A90E2. Diese Buchstaben und Zahlen bedeuten nichts für Ihr Gehirn.

Sechskantfarben werden durch Mischen von Rot-, Grün- und blauen Werten hergestellt. Jedes Paar (wie 4A, 90, E2) zeigt, wie viel von jeder Farbe von 0 bis 255 verwendet wird. Zusammen erstellen sie die endgültige Farbe Nr. 4A90E2.

Möglicherweise haben Sie Probleme, herauszufinden, welche Zahlen sich ändern sollen, wenn Sie eine leichtere Version Ihrer Marke Blue benötigen. Sollten Sie alle RGB -Werte gleichermaßen erhöhen? Oder nur einen RGB -Kanal (rot, grün oder blau) einstellen? Die Zahlen stimmen nicht überein, was Ihre Augen erwarten, sodass Sie sich anpassen und vorschauten, bis sie sich richtig anfühlt.

Traditionelle Farbsysteme verursachen größere Probleme, wenn Sie in verschiedenen Kontexten arbeiten. Das Erstellen von Farbvariationen wird zu reinem Vermutung. Sie möchten fünf Farben, die zusammenarbeiten, aber es gibt kein System dafür. Das Aufhellen #4A90E2 bis #6ba3e8 mag richtig aussehen oder es könnte ausgewaschen aussehen. Sie werden es nicht wissen, bis Sie es sehen.

Es ist nicht einfach, Schattierungen durch Ändern von Hex -Codes zu bekommen. Neue Hex -Werte ( #6ba3e8) werden links sorgfältig ausgewählt, um einen leichteren Farbton von #4A90E2 zu erzeugen. Auf der rechten Seite, nur nominelle Änderungen vorzunehmen (#3B99E5), wird die Farbe nicht erleichtert, sondern sie vollständig verändert.

Dieser langsame, manuelle Workflow dauert Stunden. Sie optimieren Werte, überprüfen die Vorschau und optimieren Sie erneut, um die Tools zu bekämpfen, anstatt zu entwerfen. Ihre Aufmerksamkeit wird in technische Details gesaugt, wenn sie sich darauf konzentrieren sollte, wie Farben Menschen fühlen.

Viele Designer vermeiden Farbversuche, weil sich der Prozess so klobig anfühlt. Sie bleiben bei sicheren Auswahlmöglichkeiten oder kopieren Paletten von anderen Websites. Die Tools, die Ihnen helfen sollten, Farbkreativität zu erforschen, beschränken sie tatsächlich.

Das Problem mit statischen RGB -Werten

RGB -Werte verhalten sich nicht immer, wie Sie es erwarten. Green erscheint bei derselben Umgebung viel heller als blau, aber das System behandelt sie gleichermaßen. RGB (128, 128, 128) ist ein perfektes mittelgroßes Grau, aber wie es aussieht, kann je nach Bildschirm, Beleuchtung oder Farbprofil variieren.

Möchten Sie eine leichtere Version Ihrer Markenfarbe? Sie können versuchen, die RGB -Werte zu verbessern, und manchmal erhalten Sie das, was Sie erwartet haben. In anderen Fällen bekommt man etwas, das aussieht, das aussieht und seltsam aussieht. Es gibt keine Möglichkeit, vorher zu sagen.

Die brandblaue Farbe mit RGB-Werten erhöhte sich gleichermaßen um +50, was zu einem ausgewaschenen Farbton führt, was nicht der erwartete glatte, hellere Ton ist. Dies zeigt, dass das Hinzufügen der gleichen Menge zu jedem RGB -Kanal nicht immer vorhersehbare oder ausgewogene Farbtöne erzeugt.

Die RGB -Farben verschieben sich auch zwischen verschiedenen Programmen. Dies geschieht aufgrund von Unterschieden in Farbprofilen, den Rendern von Motoren und wie Browser diese Werte interpretieren. Wählen Sie einen perfekten Farbton in Photoshop aus, kopieren Sie den Hex -Code in Ihre Website und er sieht möglicherweise noch etwas anders aus. Markenrichtlinien werden schwerer zu erzwingen, wenn der gleiche Farbcode in Browsern und Design -Tools etwas anders aussieht.

Jede Farbe ändert sich auf ihre eigene Weise, wenn Sie versuchen, sie aufzuhellen oder zu verdunkeln. Da RGB die Farben nicht gleichmäßig anpasst, verblassen einige Farbtöne schneller oder verschieben sich auf unerwartete Weise. Einige Farbtöne entlasten schneller als andere, wenn die Leichtigkeit zunimmt. Ihr Blau wird grau, während Ihr Rot lebendig bleibt. Ihr Lila wird schlammig, während Ihr Orange sauber bleibt.

Farbarbeit wird in Versuch und Irrtum statt absichtliches Design.

Was ist das HSL -System des Farbton, der Sättigung und der Helligkeit (Hellnessnessness)?

Farbton, Sättigung und Leichtigkeit (HSL) unterbrechen die Farbe in drei Teile, die zu der Art und Weise entsprechen, wie Ihr Gehirn tatsächlich über Farbe denkt. Hue wählt die Grundfarbe aus einem Rad mit 360 Optionen. Die Sättigung steuert, wie lebendig oder grau diese Farbe aussieht. Leichtigkeit entscheidet, ob es dunkel, hell oder irgendwo dazwischen ist.

Wenn Sie denken: „Ich möchte ein dunkles Grün“, denken Sie bereits über HSL -Begriffe nach. Sie wissen, dass Sie grün (Farbton), wahrscheinlich ziemlich reich (Sättigung) und auf der dunkleren Seite (Leichtigkeit).

Wie die drei Komponenten zusammenarbeiten

Hue funktioniert wie ein Farbrad, das aus dem sichtbaren Lichtspektrum geschnitten wurde. Die Enden verbinden rot mit Magenta und erzeugen eine glatte Schleife jeder möglichen Farbe. Willst du die perfekte Orange? Beginnen Sie bei rot (0 Grad) und bewegen Sie sich etwa 30 Grad in Richtung Gelb.

Sättigung misst die Farbreinheit als Prozentsatz. Null Prozent entfernen alle Farbe und lassen grau. Einhundert Prozent verleiht die lebendigste Version möglich. Stellen Sie sich die Sättigung als den Unterschied zwischen einem Neonzeichen und einem gedämpften Aquarell vor.

Wie HSL -Farben funktionieren, inspiriert von der Grafik auf Wikipedia über das gleiche Thema

Die Leichtigkeit reicht von 0% (reinem Schwarz) über 50% (neutral) bis 100% (rein weiß). Die meisten nutzbaren Farben leben zwischen 20% und 80%. Dies entspricht der Art und Weise, wie Sie natürlich darüber nachdenken, Farben leichter oder dunkler zu machen.

Warum Seitenbauer normalerweise HSL vermeiden

Die meisten Seitenbauer bleiben aus praktischen Gründen bei HEX -Codes und RGB, nicht weil diese Systeme besser funktionieren. Builder -Entwickler stehen vor echten technischen Hürden. Benutzer kennen bereits Hex -Codes aus Photoshop und anderen Design -Tools. Die Konvertierung zwischen Farbsystemen erfordert eine zusätzliche Verarbeitung.

Die Unterstützung von HSL bedeutet, neue Schnittstellen aufzubauen und Benutzer über unbekannte Konzepte aufzuklären, es sei denn, der HSL -Farbwähler ist perfekt genagelt. Dieser konservative Ansatz ist aus geschäftlicher Sicht sinnvoll, auch wenn er die kreativen Möglichkeiten einschränkt.

Erstellen Sie perfekte Farbvariationen mit den neuen HSL -Kontrollen von Divi 5 von Divi 5

HSL klingt theoretisch großartig, aber Theorie baut keine Websites auf. Sie benötigen Tools, die diesen Ansatz unterstützen. Die meisten Seitenbauer zwingen Sie wieder in Hex -Codes und RGB -Vermutungen. Divi 5 verändert alles daran, wie Sie mit Farbe arbeiten. Aber zuerst:

Was ist Divi?

Divi ist ein Seitenbauer, der anders funktioniert als andere WordPress -Seitenbauer. Sie erhalten visuelle Design -Tools, die mit ernsthaften Typografiesteuerungen gemischt werden. Der Live -Editor zeigt Ihre Änderungen sofort. Passen Sie die Schriftgrößen an, den Abstand von Optimierungen an und sehen Sie sich Ihre Seite genau dort aktualisieren.

Sie können mehr als 200 Module überall dort fallen lassen, wo Sie möchten. Textblöcke, Schlagzeilen und spezielle Inhaltsstücke spielen alle gut zusammen.

Folgendes macht Divi besonders zu speziell: 2000+ Vorgefertigte Layouts für echte Unternehmen. Wir sprechen über tatsächliche Designs, keine grundlegenden Startervorlagen. Benötigen Sie etwas für Ihr Restaurant? Dafür gibt es ein Layout. Ein Fotostudio ausführen? Wir haben Sie überdacht. Berater und Tech -Startups erhalten auch ihre eigenen Designs.

Jedes Layout kennt Ihre Branche. Die Farben, der Abstand und der Content -Fluss sind sinnvoll dafür, wie Ihre Kunden denken und durchsuchen.

Übernehmen

Der Themenbauer legt jedes Stück des Textstylings Ihrer Website in Ihre Hände. Erstellen Sie benutzerdefinierte Header, die die Sprache Ihrer Marke sprechen. Design -Blog -Seiten, auf denen lange Artikel einfach zu lesen sind. Ihre 404 -Fehlerseiten können die gleichen Schriftarten und den gleichen Stil wie der Rest Ihrer Website aufbewahren.

Divi Ai bringt künstliche Intelligenz direkt in Ihren Workflow. Generieren Sie Schlagzeilen, die so klingen, als hätten Sie sie geschrieben. Erstellen Sie eine Produktkopie, die genau Ihrer Markenstimme entspricht.

Es erstellt ganze Seitenabschnitte, die Ihr Geschäft verstehen.

Schreibt Code -Snippets, wenn Sie sie benötigen.

Die Divi -KI arbeitet auch mit Ihren Bildern direkt im Baumeister. Beschreiben Sie, was in jedem Bild repariert werden muss und wie sich diese Änderungen vornehmen müssen.

Erstellen Sie sogar völlig neue Bilder auf Nachfrage.

Überspringen Sie das Problem mit leerem Seiten mit Divi -Schnellseiten

Divi Quick Sites behebt das leere Seitenproblem, das viele Projekte beendet, bevor sie beginnen. Professionelle Starter -Sites werden bereits eingerichtet. Unser Designteam erstellt diese Vorlagen mit einzigartigen Bildern und Kunstwerken, die Sie nirgendwo anders sehen.

Divi Quick -Websites mit Divi AI können auch kundenspezifische Layouts basierend auf Ihrer Geschäftsbeschreibung erstellen. Erzählen Sie es von Ihrer Beratungspraxis oder Ihrem Restaurant, und es schafft relevante Seiten mit geeigneter Kopie für Ihre Branche.

Dies geht über einen Drahtgitter hinaus. Sie erhalten echte Schlagzeilen, Körperkopien und Bilder, die für Ihr Unternehmen sinnvoll sind. Sie können Ihre Markenschriften und Farben im Voraus einstellen oder die KI für Sie auswählen lassen.

Danach bleibt alles voll bearbeitet, sodass Sie die Typografie so verfeinern können, dass Sie Ihrer Vision entsprechen.

Was ist neu in Divi 5?

Divi 5 ist die nächste Version des Page Builder, derzeit in Alpha -Tests und bereit für neue Website -Projekte. Wir haben uns auf praktische Verbesserungen konzentriert, die Ihre tägliche Arbeit beschleunigen und Baustellen angenehmer machen.

Die besten Teile des aktuellen Divi blieben, während wir alles andere wieder aufgebaut haben. Das frische Schnittstellendesign trifft eine verbesserte Leistung unter der Motorhaube. Moderne Codierungspraktiken führen jetzt das gesamte System mit.
Seiten laden schneller als zuvor. Steuerelemente reagieren schneller, wenn Sie sie klicken. Die Typografie bleibt auf Ihrer gesamten Website ohne zusätzliche manuelle Arbeiten konsistent.

Hier sind einige Highlights:

• Komplette Framework -Umbau Dumps das alte Shortcode -System. Alles läuft auf moderner blockbasierter Architektur, das Browser viel besser verarbeiten.
• Das FlexBox -System von Divi 5 bietet Ihnen eine direkte Kontrolle, um moderne, reaktionsschnelle Layouts zu erstellen, die Ausrichtung, den Abstand und das Wickeln ohne benutzerdefinierten Code leicht zu verwalten.
• Das HSL -Farbsystem bringt Farbsteuerungen mit, die dem Denken von Desigern entsprechen. Passen Sie den Farbton, die Sättigung und die Leichtigkeit an, anstatt mit Hex -Codes zu erraten.
• Sieben benutzerdefinierte Haltepunkte ersetzen die alte dreigroße Grenze. Ihre Typografie sieht auf jedem Gerät, das Ihre Besucher verwenden, perfekt aus.
• Die integrierten CSS-Funktionen können calc (), clamp (), min () und max () richtig im visuellen Editor funktionieren. Erstellen Sie einen reaktionsschnellen Text, der auf natürliche Weise ohne Code skaliert wird.
• Globale Designvariablen speichern Schriftarten, Farben und Abstand an einem Ort. Ändern Sie einmal Ihre Hauptschrift. Jeder H1 auf Ihrer Website aktualisiert automatisch.
• Das voreingestellte Designsystem enthält Elementvoreinstellungen für einzelne Module und Optionsgruppen-Voreinstellungen für komplette Typografiestile. Um die Dinge gleichmäßig zu halten, verwenden Sie diese über verschiedene Module hinweg.
• Eine neue Visual Builder -Schnittstelle erhält Dockable -Panels, Tabellenfenster, Tastaturverknüpfungen und eine bessere Schichtenansicht mit Brotkrumen. Die Navigation wird viel einfacher.
• Verschachtelte Reihen setzen Zeilen in andere Reihen für komplexe Layouts. Erstellen Sie fortgeschrittene Layout -Arrangements ohne spezielle Abschnittstypen.
• Modulgruppen kombinieren verschiedene Elemente in einzelne Einheiten. Dies erleichtert das Verwalten komplexer Textlayouts und Sie können auch benutzerdefinierte Module erstellen.
• Multi-Panel-Arbeitsbereich bewegt Panels, wo immer am besten funktioniert. Halten Sie die Typografiesteuerungen offen, während Sie andere Designmaterial anpassen.
• Attributverwaltung kopiert, Pasten und setzt Typografiestile zwischen Elementen zurück. Wählen Sie spezifische Attribute aus, um zu übertragen, anstatt alles zu kopieren.
• Helle/dunkle Schnittstellenmodi reduzieren die Augenbelastung während langer Konstruktionssitzungen.
• Canvas Scaling zeigt, wie die Typografie in verschiedenen Bildschirmgrößen aussieht, ohne den Editor zu verlassen.

Entdecken Sie alle Divi 5 -Feature -Releases

So erstellen Sie HSL -Farben mit Divi 5

Wie bereits erwähnt, baut Divi 5 den Farbwähler von Grund auf neu auf. Die neue Schnittstelle lässt Hex -Codes für HSL -Steuerelemente fallen, die wie Ihr Gehirn funktionieren. Drei Schieberegler kümmern sich um die Arbeit:

• Hue akzeptiert 0–360 Grad und negative Werte wickeln sich um (z. B. -60 werden zu 300). Das Farbrad wird an beiden Enden verbunden. Null, 360 und negativ 360 geben Ihnen alle das gleiche Rot. Benötigen Sie eine komplementäre Farbe? Stellen Sie den Farbton auf 180 Grad von Ihrem Startpunkt aus.
• Die Sättigung läuft von 0% bis 100% und steuert, wie lebendig Ihre Farbe aussieht. Null Prozent streift alle Farbintensität aus und bleibt grau. Einhundertprozentig gibt eine volle Farbe.
• Leichtigkeit funktioniert im gleichen Prozentbereich. Zero macht Schwarze, 100% erzeugt Weiß, und 50% zeigt die reine Form des von Ihnen ausgewählten Farbtons.

Die Steuerelemente aktualisieren live, während Sie ziehen. Tasten anwenden oder Verzögerungen aktualisieren, unterbrochen Ihren Workflow nicht.

1. Erstellen Sie relative Farben aus globalen Farben

Mit relativen Farben können Sie neue Farben erstellen, die auf vorhandenen globalen Farben basieren, indem Sie einzelne HSL -Komponenten optimieren. Beginnen Sie im Designvariablenmanager, indem Sie eine neue Farbe hinzufügen.

Stellen Sie mit dem Farbwähler Ihre Grundfarbe (dies könnte die Markenfarbe sein) so ein, dass sie der vorhandenen primären globalen Farbe entsprechen.

Lassen Sie uns die sekundären Farben mit Ihrem primären Farbtonschicht einrichten, um komplementäre Farben zu erstellen. Nehmen Sie Ihre Primärfarbe mit einer Leichtigkeit auf 25%.

Sie können sogar mit dem Farbton oder der Sättigung herumspielen, um eine neue Farbe als sekundäre Farbe zu erstellen.

Farbmuster zeigen Ihnen wichtige Informationen auf einen Blick. Sie können feststellen, ob etwas eine Designvariable verwendet und feststellen, wie HSL -Filter die Grundfarbe ändern. Dieses visuelle Feedback hilft Ihnen zu verstehen, was mit Ihren Farbbeziehungen passiert.

Erstellen Sie auch dunklere Farbtöne für die Farbfarbe der Kopftätigkeit und die Körperfarbe der Körpertext mit der Grundfarbe als Basis.

Natürlich können Sie hier dekorativere Farben erstellen und können immer noch hex, rgb oder benannte Farbwerte manuell eingeben.

2. Verwalten

Designvariablen können über komplexe Farbsysteme aufeinander stapeln. Basierend auf Ihrer Primäranlage können Sie zusätzliche dekorative Farben wie Burnt Moos erstellen. Reduzieren Sie dann die Deckkraft des verbrannten Moos, um eine Schattenfarbe zu bauen.

Diese verschachtelten Beziehungen zeigen, wie Divi 5 komplexe Farbhierarchien behandelt. Wenn Sie die Primärfarbe einstellen, aktualisieren die gebrannten Moosfarbe zuerst aktualisiert, wodurch die Schattenfarbe aktualisiert wird. Die gesamte Kette bleibt in Verbindung.

Dieser Ansatz verändert das Farbmanagement von zufälliger Vermutung in ein vorhersehbares System. Die Farbpalette Ihrer Website bleibt ohne manuelle Anpassungen in jedem Element harmonisch.

3. Wenden Sie HSL -Farben auf Ihre Website an

Drücken Sie ein beliebiges Textmodul und öffnen Sie den Farbwähler. Ihre gespeicherten Variablen werden mit Indikatoren angezeigt. Klicken Sie auf "Sekundärfarbe" und füllt den Hintergrund eines Abschnitts aus. Die gleiche Farbe funktioniert für Schaltflächen, Hintergründe und Grenzen.

Die Typografie funktioniert, wenn Sie sich an einen Farbton halten, aber die Leichtigkeit ändern. Überschriften könnten Primärfarbe bei -25% Leichtigkeit verwenden. Der Körpertext wird bei -15%etwas leichter. Links liegen bei -45%. Alles bezieht sich, bleibt aber klar.

Hintergründe müssen Ihre Markenfarben abgeschwächt werden. Schieben Sie die Helligkeit auf 95%. Sättigung auf 15%fallen. Jetzt haben Sie Markenhintergründe, die keinen Inhalt bekämpfen. Knöpfe funktionieren mit voller Sättigung. Schwebezustände stupsen die Helligkeit in einer Stufe an. Gleiche Farbe, unterschiedliche Intensität.

Helles Text braucht dunkle Hintergründe. Die Leichtigkeitsnummern sagen Ihnen, was funktioniert. Text bei 50% Leichtigkeit Paare mit Hintergründen unter -30% der Leichtigkeit.

Abschnitte mit dunklem Text auf leichten Hintergründen kehren die Werte um. Gleiche Farben, gleiche Sättigung. Tauschen Sie die Werte der Helligkeit aus und Sie sind fertig. Und natürlich behalten all diese Farben ihre Verbindungen auch nach der Anwendung bei. Ändern Sie eine Variable und alles passt sich an. Einfach so!

4. Speichern Sie Ihre HSL -Farben als wiederverwendbare Voreinstellungen

Sobald Sie Ihre Module erstellt und die Farbdesignvariablen angewendet haben, stellen Sie diese Farben in wiederverwendbare Stile ein. Divi 5 bietet zwei voreingestellte Typen, die zusammenarbeiten:

Option Group Voreinscheinungen steuern spezifische Designaspekte in allen Modulen. Stylen Sie Ihre Überschriften mit der Variablen zur Farbdesign von Heading Text. Fügen Sie Ihre Spalte mit Burnt Moos und 50% Deckkraft zu Schatten hinzu. Bewegen Sie das Symbol für das Optionsgruppenmodul in jedem Modul, kennzeichnen Sie entsprechend und speichern Sie.

Gleiches gilt für Hintergründe, Abstand, Animationen und Text. Fügen Sie einen Grenzradius über eine Zahlen -Designvariable hinzu und richten Sie die voreingestellte Referenz auf diese Zahlenvariable ein. Jede Optionsgruppe behandelt ihr eigenes Designgebiet und kann gekreuzt werden, dh der Grenzradius einer Spalte kann auf Ihre Handlungsaufforderung angewendet werden.

Um sich zu bewerben, gehen Sie zur entsprechenden Option und wählen Sie die Voreinstellung aus.

Elementvoreinstellungen speichern komplette Modulstile. Stylen Sie ein Knopfmodul mit Ihrer sekundären Farbe bei 80% Leichtigkeit. Klicken Sie oben rechts in den Moduleinstellungen auf den voreingestellten Selektor. Erstellen Sie eine neue Voreinstellung namens "Markenfarbe". Dies spart alle Einstellungen der Schaltflächen, einschließlich Ihrer HSL -Farben.

Wenn Sie nun eine neue Schaltfläche hinzufügen, wenden Sie diese Voreinstellung an und erbt den gesamten Stil. Um Ihre Arbeit für Sie zu verkürzen, nehmen Sie eine benutzerdefinierte Voreinstellung (Optionsgruppe oder Element), die Sie erstellt haben, und klicken Sie auf das Sternsymbol daneben. Diese Voreinstellung wird zum Standard für alle neuen Instanzen dieses Elements oder der Option Gruppe.

Ihre HSL -Beziehungen bleiben in Voreinstellungen intakt. Wenn Sie eine Farbe aktualisieren, jedes Modul und jedes voreingestellte Voreinstellung mit diesen Farbaktualisierungen. Bauen Sie voreingestellte Bibliotheken für helle Abschnitte, dunkle Abschnitte und spezielle Markenmomente. Die HSL -Werte reisen mit jeder voreingestellten Voreinstellung und halten Ihr Farbsystem über Projekte konsistent.

Erstellen Sie Farbsysteme für Ihre Websites mit Divi 5

Die Farbarbeiten dauern Tagen. Sie würden mit Hex -Codes zappeln, Werte zwischen Programmen kopieren und etwas anständig aussahen.

HSL macht Farbfarb wieder Spaß. Sie sehen einen Farbton, den Sie lieben, und wissen genau, wie Sie ihn neu erstellen können. Hue wählt die Farbe, die Sättigung steuert, wie lebendig sie ist, und die Leichtigkeit macht sie heller oder dunkler. Jetzt dauert die Markenauffrischung Minuten statt Stunden.

Dies ist eine echte Designkontrolle. Divi 5 lässt es heute geschehen.