HSL birimini HEX birimine çevirin Hue Saturation Lightness ↔ Hexadecimal Ücretsiz Çevrimiçi Güvenli
HSL cinsinden bir değer yazın, karşılığını hemen HEX cinsinden okuyun. Hesap tarayıcınızda yapılır, hiçbir yere bir şey gönderilmez ve sonucun neye bağlı olduğu varsayılmak yerine aşağıda yazılıdır.
Hiçbir şey yüklenmez
Bu yazımlar nereden geliyor
Onaltılık ile RGB, iki kez yazılmış aynı şeydir. Ekran rengi üç sayıdır — ne kadar kırmızı, yeşil ve mavi ışık yayılacağı — her biri 0'dan 255'e, yani bir bayt; onaltılık yazım bu baytları yalnızca on altı tabanında yazar, böylece #FF8800 ile rgb(255, 136, 0) aynı piksele verilen aynı buyruktur. HSL, ikisi de insan gözüyle okunamadığı için icat edildi: renk tonunu renk çarkı üzerinde bir açı olarak, doygunluk ile açıklığı yüzde olarak verir; böylece bir tasarımcı üç sayıyı yeniden hesaplamadan bir şeyi açabilir. CMYK bambaşka bir dünyaya aittir — mürekkebe, ışığa değil. Çıkarmalıdır, dört baskı kalıbından kurulur ve bir ekranın verebildiği her renge erişemez; çünkü ekran ışık yayar, kâğıt ise yalnızca yansıtır.
Onlarla nerede karşılaşırsınız
Onaltılık, bir stil sayfasına yazdığınız ve bir tasarım aracının size uzattığı şeydir. RGB, bir rengin hesap istediği her yerde görünür: geçişler, saydamlık, bir tonu hesaplayan kod. HSL'ye, bir paleti elle ayarlarken başvurulur; çünkü istediğiniz değişiklikler çoğunlukla onun üç sayısından birinin değişmesidir. CMYK ise matbaanın istediğidir ve ona çevirmek, bir tasarımın ışık olmaktan çıkıp mürekkep olduğu andır.
Sık sorulan sorular
CMYK sonucum neden matbaanınkinden farklı çıkıyor?
Çünkü tek bir doğru çevrim yoktur. Bu sayfadaki hesap, aygıttan bağımsız olan yalın hesaptır; bir başlangıç noktası ya da kabaca bir karşılık gerektiğinde doğru yanıt odur. Matbaa ise belirli mürekkebi, kâğıdı ve makineyi hesaba katan bir renk profili üzerinden çevirir; aynı RGB rengi parlak kuşe kâğıtta, kuşesiz kâğıttakinden başka CMYK değerleri verir. Tam tutması gereken her şey için bir formüle güvenmek yerine matbaadan profilini isteyin.
Bazı ekran renkleri neden basılamıyor?
Çünkü ikisi aynı renklere erişemez. Ekran rengi ışık ekleyerek yapar ve mürekkebin hiçbir biçimde yetişemediği canlı, doygun bir camgöbeği ya da yeşil üretebilir; kâğıt rengi ışığı yutarak yapar ve ulaşabileceği en parlak şey sayfanın beyazıdır. Her birinin erişebildiği renkler kümesine gam denir; örtüşmedikleri yerde bir çevrim, elde bulunan en yakın rengi seçmek zorundadır. Ekranda parlak duran bir rengin baskıda çoğu kez biraz solgun görünmesinin sebebi budur.
Sonuç kesin mi?
İki birim birbirinden tam sayılarla tanımlanıyorsa evet — sayfa bunu rakamın üstünde söyler ve tek yuvarlama kaç basamak gösterildiğindedir. Oranın sonlu bir ondalığı yoksa sayfa on iki anlamlı basamak gösterir ve ilişkinin yaklaşık olduğunu söyler, başka türlüymüş gibi yapmaz.
Yazdıklarım cihazımdan çıkıyor mu?
Hayır. Hesap tarayıcınızda yapılır; hiçbir şey yüklenmez, zaten yükleyecek bir sunucu da yok. Sayfa bir kez açıldıktan sonra ağ kapalıyken de çalışır.
HSL'i neden HEX'e çevirirsiniz
Bir rengi HSL ile buldunuz, çünkü düşünebildiğiniz gösterim odur: ton 30, doygunluk %29, açıklık %28, mat bir kahverengi ve üzerine gelme durumu için %34'te daha soluk bir sürümü. Şimdi renk bir hex kodu isteyen bir yere gitmek zorunda: bir tasarım belirteci dosyası, bir marka föyü, hsl()'yi anlamayan bir araç, bir e-posta şablonu, bir meslektaşa mesaj. HSL'i HEX'e çevirmek, hakkında akıl yürüttüğünüz rengi alıp kısa, belirsizlik taşımayan ve her şey tarafından anlaşılan biçimde yazmaktır.
Dönüşüm, tasarımcıların ilk karşılaştığı yönün tersinde çalışır. İnsan dostu üç sayıdan başlar ve üç bayta varır. Her adım basit aritmetiktir, ama birkaç trigonometri benzeri durum ve yuvarlama içerir; insanların bunun kendileri için yapılmasını tercih etmesinin nedeni budur. Sayfa bunu tarayıcınızda yapar ve hiçbir şey yüklenmez. Aşağıda üç sayının altı hex basamağına nasıl dönüştüğünü, dönüşümün neyi koruduğunu, HSL'den geçmiş bir rengin başladığı yerden bir ya da iki adım uzağa neden düşebileceğini, tasarımcıların dönüşümü kullandığı yolları ve kaçınılacak tuzakları bulacaksınız.
Dönüşüm nasıl çalışır
Tondan, doygunluktan ve açıklıktan kırmızıya, yeşile ve maviye
Dönüştürücü önce rengin griden ne kadar uzak olduğunu veren renk yoğunluğunu hesaplar: doygunlukla büyür ve açıklık %50'den uzaklaştıkça küçülür. Sonra tonu renk tekerleğinin her biri 60 derece genişliğinde altı sektöründen birine yerleştirir ve sektörden üç kanaldan hangisinin en yüksekte, hangisinin en düşükte ve hangisinin arada olduğuna karar verir. Son olarak açıklığın doğru çıkması için bir sabit ekler, üç değeri 0 ile 1 aralığından 0 ile 255'e ölçekler ve her birini tam sayıya yuvarlar. Bu üç bayt, her biri iki basamak olarak on altı tabanında yazılır.
Sayılarla bir örnek
hsl(30, 29%, 28%) alın. Renk yoğunluğu (1 − |2 × 0,28 − 1|) × 0,29 = 0,56 × 0,29 = 0,1624'tür. 30 derecelik ton ilk sektörün yarısındadır; bu yüzden orta kanal renk yoğunluğunun yarısı olan 0,0812'dir. Eklenecek sabit 0,28 − 0,0812 = 0,1988'dir. Yani kırmızı 0,1624 + 0,1988 = 0,3612, yeşil 0,0812 + 0,1988 = 0,28 ve mavi 0,1988'dir. 255 ile çarpılıp yuvarlandığında bunlar 92, 71 ve 51'dir. Hex olarak bu #5C4733'tür.
Griler
Doygunluk %0 olduğunda renk ton ne olursa olsun bir gridir ve üç bayt eşittir. hsl(0, 0%, 50%), #808080'dir. Ton yok sayılır; bu yüzden herhangi bir ton sayısı aynı griyi verir.
Dönüşümün koruduğu ve koruyamadığı
Rengi sizin tarif ettiğiniz gibi korur
Sonuç, tonunu, doygunluğunu ve açıklığını verdiğiniz, bayt olarak yazılmış renktir. Yazdığınız üç sayı gözün sınıflandırdığı renktir: tekerlekte bir ton, ne kadar doygun olduğu, ne kadar açık olduğu. HSL'nin sahip olmaya değer olmasının nedeni budur ve dönüşüm seçiminizi hex'e sadakatle taşır.
Geri dönüşte aynı sayıları vaat edemez
İkisi de aynı renkleri tarif eder, ama HSL onlara farklı bir geometriyle ulaşır ve üç sayısı yazıldıklarında tam dereceye ve tam yüzdeye yuvarlanır. Bu yüzden HSL'e taşınıp geri gelen bir renk başladığı yerden bir ya da iki adım uzağa düşebilir: görsel olarak aynı, bayt bayt aynı değil. Örneğimizde #5A4632, HSL'i yaklaşık hsl(30, 29%, 28%) olan bir renkti; bu yuvarlanmış rakamları geri dönüştürmek kırmızıda iki adım uzakta olan #5C4733 verir. Tam baytlara ihtiyacınız varsa hex'i saklayın.
Yüzde ve derece işaretleri
Sayfa tonu derece olarak, doygunluğu ve açıklığı yüzde olarak okur. Onları işaretlerle ya da işaretsiz yazabilirsiniz. 360'ın üzerindeki ya da 0'ın altındaki bir ton tekerlek çevresinde sarılır; yani 390, 30 ile aynıdır.
Pratik kullanımlar
Bir tasarım belirteci dosyası yazmak
Bir tasarım sistemi renkleri belirteç olarak saklar. Birçok ekip renkleri HSL ile oluşturur, çünkü onlar hakkında akıl yürütebilir ve hex ile yayımlar, çünkü her araç onu okur. Her belirteç için bir kez HSL'i HEX'e çevirin ve yayımlanan dosya herkesin kullanabileceği bir şey olur.
hsl() okumayan araçlar için renk üretmek
E-posta istemcileri, bazı belge düzenleyiciler, eski grafik programları ve birçok grafik kütüphanesi yalnızca hex kabul eder. HSL ile bulduğunuz her şeyin kullanılabilmesi için dönüştürülmesi gerekir.
Üretilmiş bir paleti kontrol etmek
Tonu döndürerek palet üreten bir betik hsl() değerlerinin bir listesini verir. Onları bir stil sayfasına koyacağınız ya da bir tasarımcıya vereceğiniz kodlar olarak görmek için her birini hex'e çevirin. Ayrıca aynı koda yuvarlanan ve bu yüzden gerçekten farklı olmayan değerleri fark etmenizi sağlar.
Bir mesajda renk paylaşmak
Bir hex kodu kısadır, kopyalanabilir ve renkle çalışan hemen herkes tarafından anlaşılır. Bir hsl() değeri daha uzundur ve tasarımın dışında daha az tanıdıktır. Birine bir renk gönderdiğinizde hex nazik biçimdir.
HSL'i buradan HEX'e nasıl çevirirsiniz
hsl değerini yazın ya da yapıştırın
Rengi ilk alana hsl(30, 29%, 28%) biçiminde ya da yalnızca üç sayı olarak girin. Ton derece, doygunluk ve açıklık yüzdedir.
Hex kodunu okuyun
Yanıt hsl(30, 29%, 28%) = #5C4733 örneğindeki gibi hemen görünür. Büyük harflerle ve bir diyez işaretiyle yazılır.
Çalışmanıza kopyalayın
Kodu stil sayfanızda, belirteç dosyanızda ya da mesajınızda kullanın. Ters yön için HEX'ten HSL'e bir tık uzaktadır.
Bu gösterimler nereden gelir
Hex ve RGB iki kez yazılmış aynı şeydir
Bir ekran rengi üç sayıdır: ne kadar kırmızı, yeşil ve mavi ışık yayılacağı; her biri 0 ile 255 arasında, yani bir bayt. Hex bu baytları basitçe on altı tabanında yazar. Sayıları görmek için HEX'ten RGB'ye dönüştürün.
HSL ve CMYK
HSL, ikisi de bir insan tarafından okunamadığı için icat edildi: renk tekerleğinin çevresinde bir açı olarak ton, yüzde olarak doygunluk ve açıklık verir; böylece bir tasarımcı üç rakamı yeniden hesaplamadan bir şeyi daha açık yapabilir. CMYK tamamen farklı bir dünyaya aittir: ışık değil mürekkep. Çıkarmalıdır, dört baskı kalıbından oluşur ve bir ekranın ulaşabildiği her renge ulaşamaz, çünkü bir ekran ışık yayar, kâğıt ise yalnızca yansıtır.
HSL'i HEX'e çevirirken tuzaklar
Özgün kodun geri gelmesini beklemek
Bir hex kodundan başladıysanız, onu HSL'e çevirdiyseniz, hiçbir şeyi ayarlamadan geri çevirdiyseniz bir ya da iki adım uzakta farklı bir kod elde edebilirsiniz. Tek bir renk için görünmezdir. Bir tasarım sistemi için hangi biçimin ana dosya olduğuna karar verin ve diğerini türetilmiş sayın.
Doygunluk ile açıklığı karıştırmak
İkisini yanlışlıkla değiştirmek kolaydır: hsl(30, 28%, 29%), hsl(30, 29%, 28%) değildir. Sıra ton, doygunluk, açıklıktır. Ekrandaki renk beklediğiniz gibi görünmüyorsa onları tersine çevirmediğinizi kontrol edin.
Açıklığın parlaklık olmadığını unutmak
Aynı açıklığa sahip iki renk parlaklıkta farklı görünebilir. %50 açıklıktaki sarı, %50'deki maviden çok daha parlak görünür. Metin ve arka plan için renk seçiyorsanız kontrastlarını açıklık sayılarını karşılaştırarak değil, uygun bir araçla kontrol edin.
Aralık dışı değerler kullanmak
Doygunluk ve açıklık yüzde 0 ile 100 arasında sınırlıdır. Bu aralığın dışındaki değerler sınırlanır. %120'lik bir açıklık beyazdan daha parlak değildir; beyazdır.
Dönüştürmeden önce insanların sorduğu sorular
Hex'te hsl(0, 100%, 50%) nedir?
#FF0000, saf kırmızı.
Hex'te hsl(0, 0%, 100%) nedir?
#FFFFFF, beyaz.
Ondalık kullanabilir miyim?
Evet. hsl(30.5, 28.6%, 27.8%) kabul edilir. Sonuç tam baytlara yuvarlanır.
Dönüşüm kesin mi?
Yazdığınız sayılar için tam baytları verir; tam değerlere yuvarlanmış. Geri dönmek bir adım uzağa düşebilir, çünkü HSL sayıları yuvarlanmıştı.
Rengim yükleniyor mu?
Hayır. Aritmetik tarayıcınızda çalışır ve hiçbir yere hiçbir şey gönderilmez.
Nasıl geri dönerim?
HEX'ten HSL'e ile.
HSL'i HEX'e çevirirken akıllıca seçmek
Hangi biçimin ana dosya olduğuna karar verin
HSL ile tasarlıyorsanız HSL değerlerini kaynak olarak tutun ve hex'i çıktı olarak yayımlayın. Marka size hex veriyorsa onu tutun ve HSL'i yalnızca varyasyonlar için kullanın. İkisini eşit kaynaklar olarak karıştırmak kaymayı yaratan şeydir.
Varyasyon için HSL, sabitlemek için hex kullanın
Bir ton ailesine ihtiyacınız olduğunda HSL'de çalışın. Bir rengi her araçta özdeş olacak şekilde sabitlemeniz gerektiğinde onu hex olarak yazın.
Yazdığınız sayıları saklayın
HSL değerlerini palet notunuzda hex'in yanına kaydedin. Biri daha sonra daha soluk bir sürüm isterse zaten yuvarlanmış bir koddan değil, sizin sayılarınızdan başlayabilir.
Tekerleğin altı sektörü
Hangi kanal yüksek, hangisi düşük
Dönüşüm tekerleği 60 derecelik altı sektöre böler ve her birinde bir kanal en yüksekte, biri en düşükte ve üçüncüsü düzgünce değişir. 0'dan 60'a, kırmızı en yüksekte, mavi en düşükte ve yeşil yükselir: kırmızı sarıya döner. 60'tan 120'ye, yeşil en yüksekte ve kırmızı düşer: sarı yeşile döner. 120'den 180'e, yeşil yüksek kalır ve mavi yükselir: yeşil camgöbeğine döner. 180'den 240'a, mavi devralır ve yeşil düşer. 240'tan 300'e, mavi yüksek kalır ve kırmızı yükselir: mavi eflatuna döner. 300'den 360'a, kırmızı yeniden devralır ve mavi düşer. HSL'i HEX'e çevirirken tonunuzun hangi sektörde olduğunu bilmek yardımcı olur, çünkü yanıttaki üç çiftten hangisinin en büyük olacağını söyler.
Yanıt neden bir aile benzerliği taşır
Aynı ton ve doygunlukta ama farklı açıklıktaki renkler akraba gibi görünen hex kodları verir: hangi çiftin yüksek, hangisinin düşük olduğunun aynı deseni, yalnızca yukarı ya da aşağı ölçeklenmiş. #5C4733, #7A5F44 ve #A38461 hepsi aynı ailededir; kırmızı en büyük, sonra yeşil, sonra mavi. Bunu bir bakışta okumayı öğrenebilirsiniz ve bu hataları yakalamayı kolaylaştırır.
Bir açıklık rampası oluşturmak
Bir ton, dokuz adım
Dönüşümün çok pratik bir kullanımı, tek bir rengin çok soluktan çok koyuya bir rampasını, tasarım sistemlerinin 50, 100, 200 diye 900'e kadar etiketlediği türden bir ölçeği, oluşturmaktır. Bir ton ve bir doygunluk seçin ve açıklığı yüzde 96, 90, 80, 70, 60, 50, 40, 30 ve 20 gibi değerlerden geçirin. Her adım için HSL'i HEX'e çevirin ve birbirine ait dokuz kodunuz olur. Doygunluğu uçlarda, en soluk ve en koyu adımlarda birkaç puan biraz azaltmak, sabit tutmaktan çoğu zaman daha doğal görünür.
Adımları adlandırmak
Her adıma değerini değil, rolünü kaydeden bir ad verin: en soluk için yüzey, sonraki için kenarlık, en koyu için metin. Kodda ad, sonraki okuyucuya rengin ne için olduğunu söyler ve arkasındaki sayıyı onu kullanan kurallara dokunmadan değiştirebilirsiniz.
Açık ve koyu temalar
Rampayı aynalamak
Koyu tema çoğu zaman rampanın ters çevrildiği açık temadır: açık temada sayfa arka planı olan en soluk adım koyu temada en koyu olur. Rampayı HSL ile oluşturduysanız koyu tema size ikinci bir dönüşüm kümesinden başka bir şeye mal olmaz. Marka karakterini koruyan tonu sabit tutun ve doygunluğu biraz ayarlayın, çünkü doygun renkler koyu arka planlarda sert görünme eğilimindedir.
Her iki temayı kontrol etmek
Her iki temanın her metin ve arka plan çiftini kontrast için sınayın. Beyazda çalışan bir renk neredeyse siyahta başarısız olabilir ve kontrol, bir kontrast aracı ve az önce ürettiğiniz hex kodlarıyla bir dakika alır.
Rengin yalnızca kaba bir fikrine sahip olduğunuzda
Tekerlekten başlayın, sonra inceltin
Bazen hiç hex kodunuz yoktur, yalnızca bir fikriniz vardır: sakin bir mavi, sıcak bir turuncu, taze bir yeşil. HSL başlamak için iyi bir yerdir, çünkü tekerleğin yer işaretlerinden bir ton seçebilir, ılımlı bir doygunluk ve orta bir açıklık ayarlayabilir, sonra elinizde ne olduğunu görmek için HSL'i HEX'e çevirebilirsiniz. Çok gürültülü görünüyorsa doygunluğu düşürün; düz görünüyorsa açıklığı kaydırın. Her deneme saniyelere mal olur ve doğrudan bir stil sayfasına koyabileceğiniz bir hex koduyla bitirirsiniz.
İlgili dönüştürücüler
Aynı araç ailesi komşu dönüşümleri kapsar. Geri dönmek için HEX'ten HSL'e kullanın. Kodun arkasındaki sayılar için HEX'ten RGB'ye ve RGB'den HEX'e vardır, baskı için ise HEX'ten CMYK'ye ve CMYK'den HEX'e. Aynı stil sayfasındaki boyutlar için px'ten rem'e, bu sayfanın renkler için yaptığını uzunluklar için yapar.
Çalışılmış bir örnek
Bir uygulamanın başarı durumu için bir yeşil seçtiğinizi varsayın: hsl(145, 55%, 38%). Onu yazar ve #2C9658 okursunuz. Bu kodu belirteç dosyasında --success olarak kullanırsınız. Bir başarı bildiriminin arka planı için aynı tonu, hsl(145, 45%, 94%), alır ve #E9F7EF okursunuz. Kenarlık için #AEE0C3 okunan hsl(145, 45%, 78%). Üç kod, bir ton, hepsi bir dakikada türetilmiş ve her biri ekipteki herhangi bir aracın açabileceği düz bir hex kodu.
Kısa bir kontrol listesi
Dönüştürmeden önce
Üç sayının sırasını kontrol edin: ton, doygunluk, açıklık. Hangi biçimin ana dosyanız olduğuna karar verin.
Dönüştürürken
Değerleri yazın, hex'i okuyun ve diyez işaretiyle kopyalayın.
Dönüştürdükten sonra
Rengi ekranda bağlam içinde inceleyin ve daha sonrası için HSL değerlerini kodun yanına not edin.
Sık yapılan hatalar
Doygunluk ile açıklığı değiştirmek
Sıra ton, doygunluk, açıklıktır.
Eski hex'i geri almayı beklemek
Bir adım uzağa düşebilir. Önemliyse özgün olanı saklayın.
Kontrast yerine açıklığı karşılaştırmak
Metin ve arka plan için bir kontrast aracı kullanın.
Renkleriniz cihazınızda kalır
Hesap yerel olarak gerçekleşir. Değerleriniz kendi tarayıcınız tarafından kullanılır ve hiçbir yere hiçbir şey gönderilmez. Sonradan silinecek bir şey ve oluşturulacak bir hesap yoktur. HSL'i HEX'e çevirmenin sade yolu budur.
Özet
HSL'i buradan HEX'e çevirmek için tonu derece, doygunluğu ve açıklığı yüzde olarak yazın ve hex kodunu hemen okuyun. Dönüşüm rengi gözün sınıflandırdığı gibi korur: tekerlekteki bir ton, ne kadar doygun olduğu, ne kadar açık olduğu. İki gösterim aynı renkleri tarif eder, ama HSL onlara farklı bir geometriyle ulaşır ve üç sayısı tam dereceye ve tam yüzdeye yuvarlanır; bu yüzden HSL'e taşınıp geri gelen bir renk başladığı yerden bir ya da iki adım uzağa düşebilir. Tam baytlara ihtiyacınız varsa hex'i saklayın. Hiçbir şey yüklenmez.