HSL nedir ve tasarımcılar neden ustalaşmalı

Renk, bir tasarımcının araç setindeki en güçlü araçlardan biridir, ancak Hex ve RGB gibi geleneksel sistemlerle çalışmak bazen sınırlayıcı hissedebilir. Bu formatlar işe yarar, ancak renk hakkında gerçekten nasıl gördüğümüzü veya düşündüğümüzü yansıtmazlar. Daha hafif bir gölgeye mi ihtiyacınız var veya doygunluğu farklı tonlarda eşleştirmek mi istiyorsunuz? Tahmin etmeye bırakıldı.

Hue, doygunluk ve hafiflik (HSL) burada devreye giriyor. Renk ayarlamalarını daha görsel ve öngörülebilir hale getiriyor ve Divi 5, göreceli renkleri ve HSL özellik sürümü sayesinde artık onu doğal olarak destekliyor. Nasıl çalıştığını ve neden ustalaşmak isteyeceğinizi keşfedelim.

Neden çoğu tasarımcı renk seçimleriyle mücadele ediyor?

Renk aletleri genellikle renk hakkında doğal olarak nasıl düşündüğümüzle eşleşmez. Sevdiğiniz bir mavi gölge görüyorsunuz, ancak bunu yakalamanın tek yolu #4A90E2 gibi bir altıgen kodu. Bu harfler ve sayılar beyniniz için hiçbir şey ifade etmiyor.

Onaltılık renkler kırmızı, yeşil ve mavi değerlerin karıştırılmasıyla yapılır. Her çift (4A, 90, E2 gibi) her rengin ne kadarının 0 ila 255 arasında kullanıldığını gösterir. Birlikte, #4A90E2 son rengi oluştururlar.

Marka mavisinin daha hafif bir versiyonuna ihtiyacınız olduğunda hangi sayıların değişeceğini bulmakta sorun yaşayabilirsiniz. Tüm RGB değerlerini eşit olarak artırmalı mısınız? Veya sadece bir RGB kanalını (kırmızı, yeşil veya mavi) ayarlayın? Sayılar gözlerinizin beklediği şeyle eşleşmez, bu nedenle doğru hissedene kadar ayarlar ve önizlersiniz.

Geleneksel renk sistemleri farklı bağlamlarda çalışırken daha büyük sorunlar yaratır. Renk varyasyonları yaratmak saf bir tahmin haline gelir. Birlikte çalışan beş ton istiyorsunuz, ancak bunun için bir sistem yok. #4A90E2 ila #6BA3E8 aydınlatma doğru görünebilir veya yıkanmış görünebilir. Görene kadar bilemezsin.

Hex kodlarını değiştirerek gölgeler almak basit değildir. #4A90E2 daha hafif bir gölge oluşturmak için solda yeni onaltılık değerler ( #6BA3E8) dikkatle seçilmiştir. Sağda, sadece nominal değişiklikler yapmak (#3B99E5) rengi hafifletmez, ancak tamamen değiştirir.

Bu yavaş, manuel iş akışının tamamlanması saatler sürer. Değerleri değiştirirsiniz, önizlemeyi kontrol edin ve tasarım yapmak yerine araçlarla savaşarak tekrar ince ayar yapıyorsunuz. Renklerin insanları nasıl hissettirdiğine odaklanması gerektiğinde dikkatiniz teknik detaylara çekilir.

Birçok tasarımcı renk deneylerinden kaçınır çünkü süreç çok tıknaz hisseder. Diğer sitelerden güvenli seçimlere veya paletleri kopyala yapıyorsunuz. Renk yaratıcılığını keşfetmenize yardımcı olacak araçlar aslında onu sınırlar.

Statik RGB değerleriyle ilgili sorun

RGB değerleri her zaman nasıl beklediğiniz gibi davranmaz. Yeşil aynı ortamda maviden çok daha parlak görünüyor, ancak sistem onlara eşit davranıyor. RGB (128, 128, 128) mükemmel bir orta gridir, ancak nasıl göründüğü ekrana, aydınlatmaya veya kullanılan renk profiline bağlı olarak değişebilir.

Marka renginizin daha hafif bir versiyonunu ister misiniz? RGB değerlerini artırmaya çalışabilirsiniz ve bazen beklediğinizi elde edersiniz. Diğer zamanlarda, yıkanmış ve garip görünen bir şey elde edersiniz. Önceden anlatmanın bir yolu yok.

RGB değerlerine sahip marka mavi renk +50 arttı, bu da yıkanmış bir gölgeye neden oldu, bu da beklenen pürüzsüz hafif tonu değil. Bu, her RGB kanalına aynı miktarın eklenmesinin her zaman öngörülebilir veya dengeli renk tonları üretmediğini gösterir.

RGB renkleri de farklı programlar arasında değişir. Bu, renk profillerindeki farklılıklar, oluşturma motorları ve tarayıcıların bu değerleri nasıl yorumladığından kaynaklanır. Photoshop'ta mükemmel bir gölge seçin, onaltılık kodunu web sitenize kopyalayın ve yine de biraz farklı görünebilir. Aynı renk kodu tarayıcılar ve tasarım araçları arasında biraz farklı göründüğünde marka yönergelerinin uygulanması zorlaşır.

Her renk, hafifletmeye veya karartmaya çalıştığınızda kendi yolunda değişir. RGB renkleri eşit olarak ayarlamadığından, bazı tonlar daha hızlı soluyor veya beklenmedik şekillerde kayıyor. Hafiflik arttıkça bazı tonlar diğerlerinden daha hızlı daha hızlı. Kırmızınız canlı kalırken maviniz gri olur. Portakalınız temiz kalırken morunuz çamurlu olur.

Renk çalışması kasıtlı tasarım yerine deneme yanılma haline gelir.

Ton, doygunluk ve hafiflik (HSL) sistemi nedir?

Hue, doygunluk ve hafiflik (HSL), rengi beyninizin renk hakkında düşündüğü gibi eşleşen üç parçaya ayırır. Hue, taban rengini 360 seçeneği bir tekerlekten alır. Doygunluk, bu rengin ne kadar canlı veya gri göründüğünü kontrol eder. Hafiflik, karanlık, parlak veya aralarında bir yerde olup olmadığına karar verir.

“Koyu yeşil istiyorum” diye düşündüğünüzde, zaten HSL terimlerini düşünüyorsunuz. Yeşil (renk tonu), muhtemelen oldukça zengin (doygunluk) ve daha karanlık tarafta (hafiflik) istediğinizi biliyorsunuz.

Üç bileşen nasıl birlikte çalışır?

Hue, görünür ışık spektrumundan kesilmiş bir renk tekerleği gibi çalışır. Uçlar kırmızı kırmızı macenta bağlar ve mümkün olan her renkte pürüzsüz bir döngü oluşturur. Mükemmel portakal ister misin? Kırmızıdan (0 derece) başlayın ve 30 derece civarında sarı doğru hareket edin.

Doygunluk, renk saflığını yüzde olarak ölçer. Yüzde sıfır tüm rengi giderir ve gri bırakır. Yüzde yüz mümkün olan en canlı versiyonu verir. Doygunluğu neon işareti ile sessiz bir suluboya arasındaki fark olarak düşünün.

HSL Renkleri Nasıl Çalışır, Wikipedia'daki grafikten esinlenerek aynı konu hakkında

Hafiflik% 0 (saf siyah) ile% 50 (nötr) ila% 100 (saf beyaz) arasında değişir. Çoğu kullanılabilir renkler% 20 ila% 80 hafiflik yaşar. Bu, doğal olarak renkleri daha hafif veya daha koyu hale getirmeyi nasıl düşündüğünüzle eşleşir.

Sayfa oluşturucular neden genellikle HSL'den kaçınır?

Çoğu sayfa oluşturucu, bu sistemler daha iyi çalıştığı için değil, pratik nedenlerle HEX kodlarına ve RGB'ye bağlı kalır. İnşaatçı geliştiriciler gerçek teknik engellerle karşı karşıya. Kullanıcılar zaten Photoshop ve diğer tasarım araçlarından HEX kodlarını biliyorlar. Renk sistemleri arasında dönüşüm ekstra işlem gerektirir.

HSL renk seçicisi mükemmel bir şekilde çivilenmedikçe, HSL'yi desteklemek yeni arayüzler oluşturmak ve kullanıcıları tanıdık olmayan kavramlar hakkında eğitmek anlamına gelir. Bu muhafazakar yaklaşım, yaratıcı olasılıkları sınırlasa bile iş perspektifinden mantıklıdır.

Divi 5'in yeni HSL kontrolleriyle mükemmel renk varyasyonları oluşturun

HSL teoride harika geliyor, ancak teori web siteleri oluşturmuyor. Bu yaklaşımı destekleyen araçlara ihtiyacınız var. Çoğu sayfa oluşturucu sizi altıgen kodlara ve RGB tahminlerine zorlar. Divi 5 renkle nasıl çalıştığınızla ilgili her şeyi değiştirir. Ama önce:

Divi nedir?

Divi, diğer WordPress sayfa oluşturucularından farklı çalışan bir sayfa oluşturucudur. Ciddi tipografi kontrolleri ile karıştırılmış görsel tasarım araçları elde edersiniz. Canlı editör değişikliklerinizi anında gösterir. Yazı tipi boyutlarını ayarlayın, çizgi satır aralığını ayarlayın ve sayfanızı orada izleyin.

İstediğiniz her yere 200+ modül bırakabilirsiniz. Metin blokları, başlıklar ve özel içerik parçaları birlikte güzel oynar.

Divi'yi özel kılan şey: 2000+ gerçek işletmeler için hazırlanmış hazır düzenler. Temel başlangıç ​​şablonları değil, gerçek tasarımlardan bahsediyoruz. Restoranınız için bir şeye mi ihtiyacınız var? Bunun için bir düzen var. Bir fotoğraf stüdyosu mı çalıştırıyorsunuz? Seni örtbas ettik. Danışmanlar ve teknoloji girişimleri de kendi tasarımlarını alırlar.

Her düzen endüstrinizi bilir. Renkler, boşluk ve içerik akışı, müşterilerinizin nasıl düşündüğü ve göz attığı konusunda anlamlıdır.

Tam Site Kontrolü Alın

Tema oluşturucu, sitenizin metin stilinin her parçasını elinize koyar. Markanızın dilini konuşan özel başlıklar oluşturun. Uzun makaleleri okumayı kolaylaştıran blog sayfaları tasarlayın. 404 hata sayfanız, sitenizin geri kalanıyla aynı yazı tiplerini ve stili tutabilir.

Divi AI, yapay zekayı doğrudan iş akışınıza getirir. Onları yazdığınız gibi görünen başlıklar oluşturun. Marka sesinizle tam olarak eşleşen bir ürün kopyası oluşturun.

İşletmenizi anlayan tüm sayfa bölümlerini oluşturur.

İhtiyacınız olduğunda kod parçacıkları yazar.

Divi AI, görüntülerinizle de oluşturucunun içinde çalışır. Herhangi bir görüntüde neyin düzeltilmesi gerektiğini ve bu değişiklikleri nasıl yaptığını açıklayın.

Hatta talep üzerine tamamen yeni resimler üretiyor.

Divi hızlı sitelerle boş sayfa problemini atlayın

Divi Quick Sites, birçok projeyi başlamadan önce durduran boş sayfa problemini giderir. Profesyonel başlangıç ​​siteleri zaten kurulmuş tipografi ile birlikte gelir. Tasarım ekibimiz bu şablonları başka hiçbir yerde görmeyeceğiniz benzersiz görüntüler ve sanat eserleri ile oluşturur.

Divi AI ile Divi Hızlı Siteler, iş tanımınıza göre özel düzenler de oluşturabilir. Danışmanlık uygulamanız veya restoranınızdan bahsedin ve sektörünüz için uygun bir kopya ile ilgili sayfalar oluşturur.

Bu sadece bir tel çerçevenin ötesine geçer. Gerçek manşetler, vücut kopyası ve işletmeniz için mantıklı görüntüler elde edersiniz. Marka yazı tiplerinizi ve renklerinizi önceden ayarlayabilir veya AI'nın sizin için seçmesine izin verebilirsiniz.

Daha sonra, her şey tamamen düzenlenebilir kalır, böylece tipografiyi vizyonunuza uyacak şekilde rafine edebilirsiniz.

Divi 5'te yenilikler neler?

Divi 5, şu anda Alpha Testing ve yeni web sitesi projelerine hazır olan sayfa oluşturucunun bir sonraki sürümüdür. Günlük işinizi hızlandıran ve inşaat alanlarını daha keyifli hale getiren pratik iyileştirmelere odaklandık.

Biz diğer her şeyi yeniden inşa ederken mevcut Divi'nin en iyi parçaları kaldı. Taze arayüz tasarımı, kaputun altında gelişmiş performansı karşılıyor. Modern kodlama uygulamaları şimdi tüm sistemi güçlendiriyor.
Sayfalar eskisinden daha hızlı yüklenir. Onları tıkladığınızda kontroller daha hızlı yanıt verir. Tipografi, ekstra manuel çalışma olmadan tüm sitenizde tutarlı kalır.

İşte bazı önemli noktalar:

• Tam Framework Yeniden Oluşturma Eski Kısa Kod Sistemini Döker. Her şey, tarayıcıların çok daha iyi işlediği modern blok tabanlı mimaride çalışır.
• Divi 5'in FlexBox sistemi, modern, duyarlı düzenler oluşturmak için doğrudan kontrol sağlar, kolayca hizalama, aralık ve özel kod olmadan sarma.
• HSL renk sistemi, tasarımcıların nasıl düşündüğüne uyan renk kontrolleri getirir. Onaltılık kodlarla tahmin etmek yerine renk tonu, doygunluk ve hafifliği ayarlayın.
• Yedi özel kesme noktası eski üç boyutlu sınırın yerini alır. Tipografiniz ziyaretçilerinizin kullandığı her cihazda mükemmel görünüyor.
• CSS Fonksiyonları Yerleşik Calc (), Clamp (), Min () ve Max () 'nin hemen görsel düzenleyicide çalışması anlamına gelir. Kod olmadan doğal olarak ölçeklendirilen duyarlı metin oluşturun.
• Global tasarım değişkenleri yazı tiplerini, renkleri ve aralığı tek bir yerde saklar. Ana başlık yazı tipinizi bir kez değiştirin. Sitenizdeki her H1 otomatik olarak güncellenir.
• Önceden ayarlanmış tasarım sistemi, tek tek modüller için öğe ön ayarları ve tam tipografi stilleri için seçenek grup ön ayarlarını içerir. İşleri tutarlı tutmak için bunları farklı modüllerde kullanın.
• Yeni bir görsel oluşturucu arayüzü , yerleştirilebilir paneller, sekmeli pencereler, klavye kısayolları ve ekmek kırıntıları ile daha iyi katmanlar görüntülenir. Navigasyon çok daha kolay hale gelir.
• İç içe satırlar, karmaşık düzenler için diğer satırların içine satırlar koyar. Özel bölüm türleri olmadan gelişmiş düzen düzenlemeleri oluşturun.
• Modül grupları farklı öğeleri tek birimlerde birleştirir. Bu, karmaşık metin düzenlerini yönetmeyi kolaylaştırır ve ayrıca özel modüller de oluşturabilirsiniz.
• Çok Panel Çalışma Alanı Panelleri En İyi İşe Alınır. Diğer tasarım şeylerini ayarlarken tipografi kontrollerini açık tutun.
• Öznitelik yönetimi kopyaları, macunlar ve tipografi stillerini öğeler arasında sıfırlar. Her şeyi kopyalamak yerine aktarmak için belirli özellikleri seçin.
• Işık/koyu arayüz modları, uzun tasarım seansları sırasında göz zorluğunu azaltır.
• Tuval ölçeklendirme, tipografinin editörden ayrılmadan farklı ekran boyutlarında nasıl göründüğünü gösterir.

Tüm Divi 5 özellik sürümlerini keşfedin

Divi 5 ile HSL renkleri nasıl oluşturulur

Belirtildiği gibi, Divi 5 renk seçicisini sıfırdan yeniden inşa eder. Yeni arayüz, beyninizin renk hakkında düşündüğü gibi çalışan HSL kontrolleri için hex kodlarını bırakıyor. Üç kaydırıcı işi ele alır:

• Hue 0-360 derece kabul eder ve negatif değerler etrafa sarılır (örneğin -60 300 olur). Renk tekerleği her iki uçta da bağlanır. Sıfır, 360 ve negatif 360 size aynı kırmızıyı verir. Tamamlayıcı bir renge mi ihtiyacınız var? Tonunu başlangıç ​​noktanızdan 180 dereceye ayarlayın.
• Doygunluk% 0'dan% 100'e kadar uzanır ve rengin ne kadar canlı göründüğünü kontrol eder. Yüzde sıfır, tüm renk yoğunluğunu çıkarır ve gri bırakır. Yüzde yüz tam patlama renk veriyor.
• Hafiflik aynı yüzde aralığında çalışır. Sıfır siyah yapar,% 100 beyaz yaratır ve% 50'si seçtiğiniz renk tonunun saf formunu gösterir.

Siz sürüklerken kontroller canlı olarak güncellenir. Düğmeler uygulayın veya gecikmeleri yenileyin iş akışınızı kesintiye uğratmaz.

1. Global renklerden göreceli renkler oluşturun

Göreli renkler, ayrı ayrı HSL bileşenlerini değiştirerek mevcut küresel renklere dayalı yeni renkler oluşturmanıza olanak tanır. Yeni bir renk ekleyerek tasarım değişkeni yöneticisinde başlayın.

Renk seçicisini kullanarak, mevcut birincil global rengine uyacak şekilde taban renginizi (bu marka rengi olabilir) ayarlayın.

Tamamlayıcı renkler oluşturmak için birincil ton kaydırmanızı kullanarak ikincil renkleri ayarlayalım. Hafiflik%25'e ayarlanmış birincil renginizi alın.

İkincil renk olarak yeni bir renk oluşturmak için ton veya doygunluk ile bile oynayabilirsiniz.

Renk örneği size bir bakışta önemli bilgiler gösterir. Bir şeyin bir tasarım değişkeni kullanıp kullanmadığını ve HSL filtrelerinin temel rengini nasıl değiştirdiğini görebilirsiniz. Bu görsel geri bildirim, renk ilişkilerinizde neler olduğunu anlamanıza yardımcı olur.

Benzer şekilde, taban olarak birincil rengi kullanarak başlık rengi ve gövde metni global renkler için daha koyu tonlar oluşturun.

Elbette burada daha dekoratif renkler oluşturabilirsiniz ve yine de hex, rgb veya adlandırılmış renk değerlerini manuel olarak girebilirsiniz.

2. Çok katmanlı tasarım değişken ilişkilerini yönetin

Tasarım değişkenleri karmaşık renk sistemleri için üst üste istifleyebilir. Birincilinize dayanarak, yanmış yosun gibi ek dekoratif renkler oluşturabilirsiniz. Ardından, yanmış yosunun gölge rengi oluşturma opaklığını azaltın.

Bu iç içe ilişkiler, Divi 5'in karmaşık renk hiyerarşilerini nasıl ele aldığını göstermektedir. Birincil rengi ayarladığınızda, önce yanmış yosun rengi güncellenir ve güncelleme için gölge rengini tetikler. Tüm zincir bağlı kalır.

Bu yaklaşım renk yönetimini rastgele tahmin etmekten öngörülebilir bir sisteme dönüştürür. Web sitenizin renk paleti, her öğede manuel ayarlamalar olmadan uyumlu kalır.

3. Sitenize HSL renkleri uygulayın

Herhangi bir metin modülüne basın ve renk seçicisini açın. Kaydedilen değişkenleriniz göstergelerle ortaya çıkar. “İkincil Renk” i tıklayın, bir bölümün arka planını dolduracaktır. Aynı renk düğmeler, arka planlar ve sınırlar için de çalışır.

Tipografi bir tona sadık kaldığınızda, ancak hafifliği değiştirdiğinizde çalışır. Başlıklar% -25 hafiflikte birincil rengi kullanabilir. Vücut metni%-15 ile biraz daha hafif gidiyor. Bağlantılar%-45'te oturuyor. Her şey ilgilidir, ancak açık kalır.

Arka planların marka renklerinizin tonlanması gerekir. Hafiflik%95'e kadar. Doygunluğu%15'e düşürün. Artık içerikle savaşmayan markalı geçmişleriniz var. Düğmeler tam doygunluk ile çalışır. Hover, hafifliği bir çentik aşağı doğru dürtüyor. Aynı renk, farklı yoğunluk.

Hafif metin koyu arka planlara ihtiyaç duyar. Hafiflik numaraları size neyin işe yaradığını söyler. % 50 hafiflikte metin, hafifliğin% -30'unun altında arka planlar olan çiftler.

Işık arka planlarında koyu metin bulunan bölümler değerleri tersine çevirir. Aynı tonlar, aynı doygunluk. Hafiflik değerlerini değiştirin ve bitti. Ve elbette, tüm bu renkler uygulandıktan sonra bile bağlantılarını korur. Bir değişkeni değiştirin ve her şey uyum sağlar. Bu kadar kolay!

4. HSL renklerinizi yeniden kullanılabilir ön ayarlar olarak kaydedin

Modüllerinizi oluşturduktan ve renk tasarımı değişkenlerini uyguladıktan sonra, bu renkleri yeniden kullanılabilir stiller halinde önceden ayarlayın. Divi 5 birlikte çalışan iki önceden ayarlanmış tür sunar:

Seçenek grubu ön ayarları tüm modüllerde belirli tasarım yönlerini kontrol eder. Başlıklarınızı başlık metni renk tasarım değişkeni ile şekillendirin. Yanmış yosun ve% 50 opaklık kullanarak sütununuza gölgeler ekleyin. Herhangi bir modülde opsiyon grubu modülü simgesinin üzerine gelin, uygun şekilde etiketleyin ve kaydedin.

Aynı şey arka planlar, boşluk, animasyonlar ve metin için de geçerlidir. Bir sayı tasarım değişkeni aracılığıyla bir sınır yarıçapı ekleyin ve bu sayı değişkeni referansını ayarlayın. Her seçenek grubu kendi tasarım bölgesini işler ve çapraz uygulanabilir, yani bir sütunun sınır yarıçapı harekete geçirici mesajınıza uygulanabilir.

Uygulamak için uygun seçeneğe gidin ve ön ayarı seçin.

Eleman Önsözleri Tam Modül Stilleri Kaydet. % 80 hafiflikte ikincil renginizle bir düğme modülü stil. Modül ayarlarının sağ üst kısmındaki ön ayar seçicisini tıklayın. “Marka Renk Düğmesi” adlı yeni bir ön ayar oluşturun. Bu, HSL renkleriniz de dahil olmak üzere tüm düğmenin ayarlarını kaydeder.

Şimdi, yeni bir düğme eklediğinizde, bu ön ayarları uygulayın ve tüm stili devralır. Çalışmanızı sizin için kesmek için, oluşturduğunuz özel ön ayarları (seçenek grubu veya öğe) alın ve yanındaki yıldız simgesini tıklayın. Bu ön ayar, o öğenin veya seçenek grubunun tüm yeni örnekleri için varsayılan olur.

HSL ilişkileriniz ön ayarlarda sağlam kalır. Bir rengi güncellediğinizde, bu renk güncellemelerini kullanarak her modül ve önceden ayarlanmıştır. Işık bölümleri, karanlık bölümler ve özel marka anları için önceden ayarlanmış kütüphaneler oluşturun. HSL değerleri her bir ön ayarla seyahat ederek renk sisteminizi projeler arasında tutarlı tutar.

Divi 5 ile web siteleriniz için renk sistemleri oluşturun

Renk işleri günler alırdı. Hex kodları ile kıpır kıpır, programlar arasında değerleri kopyalarsınız ve bir şeylerin iyi göründüğü için dua edersiniz.

HSL, renk çalışmasını tekrar eğlenceli hale getirir. Sevdiğiniz bir gölge görüyorsunuz ve tam olarak nasıl yeniden yaratacağınızı biliyorsunuz. Hue rengi seçer, doygunluk ne kadar canlı olduğunu kontrol eder ve hafiflik onu daha parlak veya daha koyu hale getirir. Şimdi, marka yenileme saatler yerine dakikalar sürüyor.

Bu gerçek tasarım kontrolü. Divi 5 bugün gerçekleşiyor.