HEX birimini HSL birimine çevirin Hexadecimal ↔ Hue Saturation Lightness Ücretsiz Çevrimiçi Güvenli
HEX cinsinden bir değer yazın, karşılığını hemen HSL 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.
HEX'i neden HSL'e çevirirsiniz
#5A4632 gibi bir hex kodu bir rengi saklamanın güzel, düşünmenin zayıf bir yoludur. Basamaklardaki hiçbir şey size rengin bir kahverengi olduğunu, ne kadar parlak olduğunu ya da biraz daha soluk bir sürümünün nasıl görüneceğini söylemez. HSL bunu düzeltmek için icat edildi. Bir rengi insanların onun hakkında konuşma eğiliminde olduğu gibi tarif eder: hangi ton olduğu, ne kadar canlı olduğu ve ne kadar açık olduğu. HEX'i HSL'e çevirmek, bir rengi tasarım aracının size verdiği biçimden, akıl yürütebileceğiniz biçime çevirmektir: hsl(30, 29%, 28%) koyu, mat bir turuncu kahverengidir ve son sayıyı yükseltmenin onu daha soluk yapacağını hemen görebilirsiniz.
Tasarımcıların ve ön yüz geliştiricilerinin dönüşümü kullanmasının gerçek nedeni budur. Hex olarak bir marka renkleri vardır ve ilişkili renklerden oluşan bir aileye ihtiyaç duyarlar: üzerine gelme durumu için daha açık bir renk, basılı düğme için daha koyu bir renk, arka plan tonu için çok soluk bir renk, devre dışı bir denetim için doygunluğu azaltılmış bir renk. Hex'te bunların her biri üç basamak çiftinin yeni bir avıdır. HSL'de her biri tek bir sayının değişmesidir. Renk aynı renktir; daha yararlı bir mercekten görülür.
Bu sayfa tarayıcınızda dönüştürür ve hiçbir şey yüklenmez. Aşağıda HSL'nin üç sayısının hex basamaklarından nasıl hesaplandığını, dönüşümün neyi koruduğunu ve nerede yuvarladığını, tonun, doygunluğun ve açıklığın pratikte ne anlama geldiğini, tasarımcıların paletler ve durumlar oluşturmak için HSL'yi nasıl kullandığını ve HEX'i HSL'e ilk kez çevirenleri yakalayan tuzakları bulacaksınız.
HSL neyi tarif eder
Ton: renk tekerleğindeki konum
Ton, bir renk tekerleği çevresinde 0 ile 360 derece arasında bir açıdır. Kırmızı 0'da, sarı 60'ta, yeşil 120'de, camgöbeği 180'de, mavi 240'ta ve eflatun 300'dedir; 360'ta yeniden kırmızıdasınız. 30'luk bir ton kırmızı ile sarı arasındadır; bu da turuncudur. Sayı hangi renk ailesinde olduğunuzu söyler ve ne kadar parlak ya da soluk olduğu hakkında hiçbir şey söylemez.
Doygunluk: ne kadar canlı
Doygunluk bir yüzdedir. %100'de renk tonun izin verdiği kadar saftır; %0'da tüm rengini kaybetmiştir ve bir gridir. Örnek kahverengimizdeki gibi %29'luk bir doygunluk mat, toprak bir renktir. Doygunluğu düşürmek, gürültülü bir rengi karakterini değiştirmeden sakinleştirmenin en hızlı yoludur.
Açıklık: ne kadar soluk ya da koyu
Açıklık da bir yüzdedir. %0'da renk ton ve doygunluk ne olursa olsun siyahtır; %100'de beyazdır; %50'de tam, normal renktir. %28'deki kahverengimiz koyu tarafta. Sayıyı yükseltmek aynı rengin daha soluk bir sürümünü, düşürmek daha koyu bir sürümünü verir; tasarımcıların en sık istediği değişiklik tam olarak budur.
Neden hex'ten daha kolay
Hex'te bir rengi daha soluk yapmak, tonun kaymaması için üç çiftin hepsini farklı miktarlarda artırmak demektir; bu gözle yapılması neredeyse imkânsızdır. HSL'de tek bir rakamı değiştirmek ve diğer ikisine dokunmamak demektir.
Dönüşüm nasıl çalışır
Üç bayttan bir açıya ve iki yüzdeye
Dönüştürücü önce hex basamaklarını her biri 0 ile 255 arasında olan kırmızı, yeşil ve mavi değerleri olarak okur ve onları 0 ile 1 arasına ölçekler. Üçünün en büyüğünü ve en küçüğünü bulur. Açıklık, ikisinin ortalamasıdır. Doygunluk, açıklığa göre aralarının ne kadar uzak olduğuna bağlıdır. Ton, hangi kanalın en büyük olduğuna ve diğer ikisinin nasıl karşılaştırıldığına bağlıdır. Üçü de eşitse renk gridir, doygunluk sıfırdır ve tonun anlamı yoktur; dönüştürücü bu durumda onun için 0 gösterir.
Örnek
#5A4632 için baytlar 90, 70 ve 50'dir. Kırmızı 0,353 ile en büyük, mavi 0,196 ile en küçüktür. Açıklık, toplamlarının yarısı olan 0,275'tir; yaklaşık %28. Aralık 0,157'dir; bu yüzden doygunluk 0,157'nin 0,549 toplamına bölünmesidir; yaklaşık %29. Kırmızı en büyük kanaldır ve yeşil arasındadır; bu tonu 30 dereceye koyar. Sonuç hsl(30, 29%, 28%)'dir.
Tam sayılar
Üç sayı yazıldıklarında tam dereceye ve tam yüzdeye yuvarlanır. Bu, insanların kullandığı ve CSS'in gündelik işte beklediği biçimdir, ama sonraki bölümün açıkladığı gibi son basamakta bazı bilgilerin düştüğü anlamına gelir.
Dönüşümün koruduğu ve koruyamadığı
Rengi gözün sınıflandırdığı gibi korur
Sonuç, gözün sınıflandırdığı renktir: tekerlekteki bir ton, ne kadar doygun olduğu, ne kadar açık olduğu. HSL'nin sahip olmaya değer olmasının nedeni budur. Bir rengi tek bir sayıyı değiştirerek daha soluk ya da bir ton daha koyu yapabilirsiniz; bu hex'te neredeyse imkânsızdır.
Aynı baytların geri geleceğini 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. Tam baytların geri gelmesine ihtiyacınız varsa hex'i saklayın. Bir renkle çalışmak için HEX'i HSL'e çevirin ve hex'i ana dosya olarak tutun.
Grilerin tonu yoktur
Üç bayt eşit olduğunda ton hakkında söylenecek bir şey yoktur. Dönüştürücü 0 tonu ve %0 doygunluk verir ve gri yalnızca açıklıkla tarif edilir. 0'dan hiçbir anlam çıkarmayın.
HSL'yi pratikte kullanmak
Bir ton ailesi oluşturmak
hsl(30, 29%, 28%) temel rengini alın. Üzerine gelme için daha açık bir ton hsl(30, 29%, 34%)'tür. Arka plan için çok soluk bir ton hsl(30, 29%, 94%)'tür. Basılı durumlar için daha koyu bir ton hsl(30, 29%, 22%)'dir. Ton ve doygunluk yerinde kalır; bu yüzden renkler açıkça birbirine aittir. Aynısını hex'te yapmak birkaç deneme alırdı ve yine de biraz yanlış görünürdü.
Temalar ve karanlık mod
Bir tema çoğu zaman aynı paletin açık ve koyu bir sürümüne ihtiyaç duyar. HSL ile tonu tutar, açıklığı ve doygunluğu ayarlarsınız: açık tema için arka planları açar ve metni koyulaştırır, koyu tema için tersini yaparsınız. Tonu özel bir özellik olarak tanımlamak ve yalnızca açıklığı değiştirmek bunu yapmanın yaygın ve düzenli bir yoludur.
Palet üretmek
Bir temelle uyumlu renkleri bulmak için tonu döndürün. Her iki yana otuz derece benzer renkleri, 180 tamamlayıcıyı, 120 ya da 240 bir üçlüyü verir. Doygunluğu ve açıklığı sabitleyin, tonu değiştirin ve renkler tekdüze bir his taşır. Rastgele görünmeyen bir palete başlamanın hızlı bir yoludur.
Erişilebilir kontrast
Açıklık, kontrast için ana denetimdir. Renkli bir arka plan üzerindeki metin okunması zorsa çözüm genellikle ikisi arasındaki açıklık farkını artırmaktır ve HSL bunu her iki tarafta bir sayıyı ayarlama meselesi yapar.
HEX'i buradan HSL'e nasıl çevirirsiniz
Hex kodunu yazın ya da yapıştırın
Rengi ilk alana, diyez işaretiyle ya da onsuz girin. Üç ve altı basamaklı biçimler kabul edilir ve saydamlıklı sekiz basamaklı biçim de okunur.
hsl değerini okuyun
Yanıt #5A4632 = hsl(30, 29%, 28%) örneğindeki gibi hemen görünür. Üç sayı derece olarak ton ve yüzde olarak doygunluk ve açıklıktır.
Stil sayfanıza kopyalayın
Sonucu olduğu gibi, color: hsl(30, 29%, 28%) gibi bir kuralda kullanın. Rengi ayarlamak için son rakamı değiştirin. Ters yön için araç HSL'den HEX'e dönüştürücüsüdü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.
HEX'i HSL'e çevirirken tuzaklar
Mükemmel bir gidiş dönüş beklemek
Yuvarlama nedeniyle geri dönüştürmek özgünden bir ya da iki adım uzak bir kod verebilir. Tek bir renk için görünmezdir. Birçok rengin ileri geri dönüştürüldüğü bir tasarım sistemi için birikebilir. Hex'i kaynak olarak tutun.
Eşit açıklığın eşit parlaklık demek olduğunu varsaymak
Aynı HSL açıklığına sahip iki renk parlaklıkta epey farklı görünebilir: %50'deki bir sarı, %50'deki bir maviden çok daha parlak görünür. HSL açıklığı kullanışlı bir sayıdır, algılanan parlaklığın ölçüsü değildir. Kontrast kontrolleri için uygun bir kontrast aracı kullanın.
Yüzde işaretlerini unutmak
CSS'te hsl() içindeki doygunluk ve açıklık yüzde işareti taşır ve ton düz bir sayı ya da deg'li bir sayıdır. İşaretleri atlamak klasik bir hatadır.
Bir griden fazla anlam çıkarmak
Bir grinin tonu yoktur. Dönüştürücü onun için 0 gösteriyorsa bu onun kırmızımsı olduğu anlamına gelmez.
Dönüştürmeden önce insanların sorduğu sorular
HSL'de #FF0000 nedir?
hsl(0, 100%, 50%), saf kırmızı.
HSL'de #FFFFFF nedir?
hsl(0, 0%, 100%), beyaz. Ton beyaz için anlamsızdır ve dönüştürücü 0 gösterir.
HSL her yerde destekleniyor mu?
Tüm güncel tarayıcılar hsl() ve hsla()'yı anlar. Uzun yıllardır CSS'tedir.
Dönüşüm kesin mi?
Aynı rengi tarif etmek anlamında kesindir, ama sayılar tam dereceye ve yüzdeye yuvarlanır; bu yüzden geri dönmek bir adım uzağa düşebilir.
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?
HSL'den HEX'e ile.
HEX'i HSL'e çevirirken akıllıca seçmek
Çalışmak için HSL'yi, saklamak için hex'i kullanın
Ana paleti belirsizliğin olmadığı hex'te tutun ve varyasyon oluşturmak istediğinizde HSL kullanın. Gidiş dönüşler biraz kaybeder; ana dosya kaybetmez.
Daha yeni renk uzaylarını düşünün
CSS artık eşit açıklığın gerçekten eşit göründüğü oklch() ve benzeri gösterimler sunuyor. Yeni tasarım sistemleri için öğrenmeye değerler. HSL, hemen herkesin anladığı ve her aracın desteklediği gösterim olmaya devam eder.
Özel özellikleri kullanın
--hue, --sat ve --light tanımlayın ve renkleri onlardan oluşturun: hsl(var(--hue) var(--sat) var(--light)). Bir tema o zaman birkaç sayıyı düzenleyerek değişir.
HSL'yi güvenle okumak ve yazmak
Hatırlanacak bazı yer işaretleri
Birkaç sayı HSL'yi okumayı kolaylaştırır. 60'ın katları olan tonlar saf renklerdir: 0 kırmızı, 60 sarı, 120 yeşil, 180 camgöbeği, 240 mavi, 300 eflatun. 100 doygunlukla 50 açıklık herhangi bir tonun en saf sürümünü verir ve 95 ya da üzeri açıklık, arka plan olarak işleyecek kadar soluk bir tondur. HEX'i HSL'e çevirip bu yer işaretlerinden birine yakın bir ton gördüğünüzde renk ailesini bir bakışta adlandırabilirsiniz.
Aileler arasında geçmek
Bir tona 180 eklemek tekerlekte karşıdaki rengi, yani tamamlayıcıyı verir ve genellikle en güçlü kontrasttır. 30 eklemek ya da çıkarmak, özgünün yanında rahatça duran bir komşu verir. Tasarımcılar bu adımları bir marka rengiyle uyuşan vurgular seçmek için tahmin yürütmeden kullanır.
Dönüştürülen değerlerin notunu tutmak
Bir palet için HEX'i HSL'e çevirdiğinizde sonuçları yanlarında özgün hex ile bir tabloya yazın. Tablo renklerin birbiriyle nasıl ilişkili olduğunu gösterir ve bir ton ya da açıklık diğerleriyle uyumsuzsa tuhaflık hemen görünür. Ayrıca ekibinize ortak bir başvuru verir.
Gerçek ekranlarda test etmek
Kalibre edilmiş bir monitörde dengeli görünen renkler güneşte bir telefonda ya da ucuz bir dizüstünde farklı görünebilir. Bitmiş paleti en az iki cihazda kontrol edin ve soluk tonlar birinde kayboluyorsa açıklığı biraz ayarlayın.
İlgili dönüştürücüler
Aynı araç ailesi komşu dönüşümleri kapsar. Geri dönmek için HSL'den HEX'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 ve px'ten em'e, bu sayfanın renkler için yaptığını uzunluklar için yapar.
Çalışılmış bir örnek
Marka renginizin #1E7A5C olduğunu varsayın. HEX'i HSL'e çevirir ve hsl(160, 61%, 30%) okursunuz. Üzerine gelme durumu için biraz daha açık hsl(160, 61%, 36%) yazarsınız. Basılı durum için hsl(160, 61%, 24%). Bir bildirimin arkasındaki çok soluk bir arka plan için hsl(160, 40%, 95%). Devre dışı bir düğme için hsl(160, 12%, 60%), rengin çoğu alınmış aynı ton. Beş renk, bir ton, bir dakikada yazıldı ve hepsi birbirine aitmiş gibi görünür. Marka rengi değiştiğinde ton sayısını bir kez değiştirirsiniz.
Kısa bir kontrol listesi
Dönüştürmeden önce
Rengi ne yapmak istediğinize karar verin: değiştirmek, tema yapmak ya da yalnızca okumak.
Dönüştürürken
Hex'i yapıştırın, hsl'i okuyun ve üç sayıyı not edin.
Dönüştürdükten sonra
Varyasyonları her seferinde bir sayıyı değiştirerek yapın ve gerçek arka planda bakın.
Sık yapılan hatalar
Yuvarlanmış sayıları kesin saymak
Onlar tam sayılardır. Hex'i ana dosya olarak tutun.
Açıklığı parlaklıkla eşitlemek
Aynı açıklıktaki iki renk ne kadar parlak göründükleri bakımından büyük ölçüde farklı olabilir.
Yüzde işaretlerini atlamak
Doygunluk ve açıklık CSS'te onlara ihtiyaç duyar.
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. HEX'i HSL'e çevirmenin sade yolu budur.
Özet
HEX'i buradan HSL'e çevirmek için hex kodunu yazın ya da yapıştırın ve hsl değerini 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. HSL'nin sahip olmaya değer olmasının nedeni budur, çünkü bir rengi tek bir sayıyı değiştirerek daha soluk ya da bir ton daha koyu yapabilirsiniz; bu hex'te neredeyse imkânsızdır. İkisi de 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 baytların geri gelmesine ihtiyacınız varsa hex'i saklayın. Hiçbir şey yüklenmez.