HSL bir renk seçmenin dostane yolu; RGB ise ekranların, canvas API'lerinin ve görüntü kodunun gerçekten tükettiği format. Bu dönüştürücü herhangi bir hue, saturation ve lightness üçlüsünü kesin 0–255 kanallarına çevirir.
How HSL to RGB conversion works
- S ve L'yi kesirlere çevir ve kromayı hesapla C = (1 − |2L − 1|) × S.
- Rengi çemberindeki segmentini bulmak için hue'u 60'a böl ve ara değeri hesapla X = C × (1 − |(H/60 mod 2) − 1|).
- O segmente göre C, X ve 0'ı R, G ve B yuvalarına ata.
- Tüm üç kanala L − C/2 ışıklılık ofsetini ekle ve 255 ile çarp.
Çalışan örnek
Son tam kanallara yuvarlamaya kadar sonuç kesindir. Kesirli hue veya saturation değerleri desteklenir ve en yakın RGB üçlüsüne düşer.
HSL and RGB 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
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 to RGB reference table
En yaygın CSS renkleri, HSL formatından RGB formatına dönüştürülmüş.
| Renk | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |