HSL'de renk seçmek rahat, ama stiller, tasarım teslimleri ve marka belgeleri hâlâ HEX kullanıyor. Bu dönüştürücü aradaki boşluğu kapatır ve herhangi bir ton, doygunluk ve ışıklılık kombinasyonu için altı haneli kodu verir.
How HSL to HEX conversion works
- Doygunluk ve ışıklılığı kesirlere çevir: %60 → 0.6 gibi.
- Kromayı hesapla C = (1 − |2L − 1|) × S — bu, rengin griye ne kadar uzak olduğunu gösterir.
- Kromayı kırmızı, yeşil ve mavi kanallara yerleştirmek için tonu kullan, sonra hepsini L − C/2 ile kaydır.
- Her kanalı 255 ile çarp, yuvarla ve iki hexadecimal basamak olarak yaz.
Çalışan örnek
Yuvarlama yalnızca son adımda, her kanal 0–255 tam değerine sabitlendiğinde yapılır. Sonuç, HSL girişine en yakın HEX kodudur ve genelde bir tasarım aracının gösterdiği ile aynıdır.
HSL and HEX explained
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 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 to HEX reference table
En yaygın CSS renkleri, HSL formatından HEX formatına dönüştürülmüş.
| Renk | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |