CSS'te aynı renk en az üç farklı şekilde yazılabilir ve her biri farklı bir iş için kullanışlıdır — tasarımdan şeffaflık animasyonuna kadar.
HEX: kopyalayıp yapıştırmak için kompakt bir gösterim
#FF5733 gibi onaltılık gösterim, üç kanalı — kırmızı, yeşil, mavi — her biri için iki karakterle kodlar. Bu, tasarım mockup'larından kopyalamak için kullanışlı olan en kompakt formattır, ancak insan için neredeyse okunamaz: bir dizi rakamın hangi tonu temsil ettiğini bir bakışta anlamak zordur.
RGB: her kanala doğrudan erişim
rgb(255, 87, 51) aynı üç kanalı 0'dan 255'e kadar ondalık sayılar olarak yazar. Belirli bir kanalı programatik olarak değiştirmek gerektiğinde kullanışlıdır, örneğin bir JavaScript animasyonunda kırmızıyı kademeli olarak artırmak gibi.
HSL: sezgisel ton seçimi
HSL bir rengi ton (hue, 0–360°), doygunluk ve parlaklık üzerinden tanımlar. Bir rengi elle seçmek için en kullanışlı formattır: aynı tonun daha koyu bir versiyonunu elde etmek için, üç RGB kanalını sıfırdan yeniden hesaplamadan sadece parlaklığı azaltmak yeterlidir.
Şeffaflık için alfa kanalı
rgba() ve hsla() formatları dördüncü bir parametre ekler — 0 ile 1 arasında opaklık. Modern CSS ayrıca sonunda iki ekstra karakterle HEX'te şeffaflık ayarlamaya da izin verir, örneğin #FF573380 gibi.
Neden gerekli
- Bir tasarım mockup'ından alınan rengi hızlıca ihtiyaç duyulan CSS formatına dönüştürmek.
- HSL kullanarak aynı rengin daha koyu veya daha açık bir tonunu seçmek.
- Bir renge, temel tonunu değiştirmeden şeffaflık eklemek.
İznik mavisi: dijital ekrandan çok önce standartlaşan bir ton
Bu araçtaki HSL kaydırıcısıyla 190–200° civarına gelindiğinde karşılaşılan doygun turkuaz-mavi ton, 16. yüzyıl Osmanlı İznik çinilerinde ustaların kobalt oksitten elde ettiği ve günümüzde hâlâ "İznik mavisi" olarak anılan renkle çarpıcı bir yakınlık taşır. O dönemde çini ustaları bu tonu HEX kodu gibi sayısal bir standartla değil, ustadan çırağa aktarılan pigment karışım oranlarıyla —belirli miktarda kobalt, kuvars ve sırın belirli sıcaklıkta pişirilmesiyle— tutarlı biçimde yeniden üretebiliyordu. Bugün bir tasarımcı aynı tonu #0F6E9C gibi bir HEX koduyla saniyeler içinde herhangi bir ekranda birebir tekrarlayabilir; İznik ustaları için bu tutarlılığı elde etmek yıllar süren fırın ve karışım deneyimi gerektiriyordu.