HSL bir rengi insanların konuştuğu şekilde tanımlar: hangi ton, ne kadar doygun, ne kadar parlak. HEX kodunu HSL'ye çevirmek, rengi gerçekten ayarlayabileceğin—açmak, soldurmak veya ondan bir ölçek oluşturmak—en hızlı yoldur.
How HEX to HSL conversion works
- HEX kodunu RGB'ye çevir ve her kanalı 255'e böl, böylece üçü de 0 ile 1 arasında olur.
- Üç değerin en büyüğünü ve en küçüğünü bul. Bunların ortalaması ışıklılık L'dir.
- Aradaki fark doygunluk S'i belirler: açık renkler için bunu (2 − max − min)'e, koyu renkler için (max + min)'e böl.
- En yüksek değeri taşıyan kanal tonu H'yi belirler — kırmızı 0°, yeşil 120°, mavi 240° — ve diğer iki kanal tonu o segment içinde konumlandırır.
Çalışan örnek
Hesaplama teknik olarak kesin, ama HSL değerleri genelde derece ve yüzde olarak yuvarlanır. Geri çevirirken orijinale bir iki RGB adımı uzaklıkta sonuç çıkabilir — pratikte görünmez ama renkleri tekrar tekrar yuvarlıyorsan bilmeye değer.
HEX and HSL explained
HEX nedir?
HEX kodu, bir rengin kırmızı, yeşil ve mavi kanallarını başında # olan altı haneli on altılık bir sayı ile saklar. Her iki hane bir kanalı temsil eder, 00 (yok) ile FF (tam) arasındadır; bu da RGB ile aynı 16.7 milyon rengi çok daha kısa bir gösterimde verir. HEX, CSS, tasarım araçları ve marka kılavuzlarında varsayılandır.
- Sözdizimi:
- #RRGGBB
- Aralık:
- 00–FF her kanal için
- En uygun:
- CSS, tasarım teslimi, marka yönergeleri
HSL nedir?
HSL, bir rengi ton (renk çemberinde 0–360°), doygunluk (ne kadar renkli, 0–100%) ve açıklık (ne kadar parlak, 0–100%) olarak ayırır. Her parça insanların rengi tanımlama biçimine uyduğu için HSL, tonlar, gölgeler ve tutarlı paletler oluşturmayı — elle veya kodla — en kolay hale getirir.
- Sözdizimi:
- hsl(H, S%, L%)
- Aralık:
- 0–360°, 0–100%, 0–100%
- En uygun:
- paletler, tonlar ve gölgeler, temalandırma
HEX to HSL reference table
En yaygın CSS renkleri, HEX formatından HSL formatına dönüştürülmüş.
| Renk | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |