RGB ekrana ne kadar ışık göndereceğini söyler; HSL ise rengin gerçekte nasıl göründüğünü anlatır. Üç kanalı ton, doygunluk ve ışıklılığa çevirmek, rengi elle ayarlamayı kolaylaştırır.
How RGB to HSL conversion works
- R, G ve B'yi 255'e böl, böylece her değer 0 ile 1 arasında olsun.
- Üçün en büyüğünü ve en küçüğünü al — bunların ortalaması ışıklılık L'dir.
- Eğer en büyük ve en küçük eşitse, renk gridir: ton ve doygunluk her ikisi de 0'dır.
- Aksi halde S'yi maksimum ile minimum arasındaki yayılmadan türet ve H'yi hangi kanal maksimumsa oradan oku.
Çalışan örnek
Prensipte kesin. Ancak H, S ve L genelde yuvarlanmış tam sayılar olarak gösterildiği için, geri çevirme bir kanalda bir iki adım kaydırma yapabilir.
RGB and HSL explained
RGB nedir?
RGB, bir rengi üç ışık kanalı olarak tanımlar — kırmızı, yeşil ve mavi — her biri 0 ile 255 arasında. Bu, ekranların nasıl çalıştığını yansıtır: hepsi 255 olursa beyaz, hepsi 0 olursa siyah elde edilir. RGB, bir renk ile hesaplama yapman gerektiğinde doğru tercihtir; rgba() ise şeffaflık ekler.
- Sözdizimi:
- rgb(R, G, B)
- Aralık:
- 0–255 her kanal için
- En uygun:
- kod, canvas, rgba() ile şeffaflık
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
RGB to HSL reference table
En yaygın CSS renkleri, RGB formatından HSL formatına dönüştürülmüş.
| Renk | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |