HSL rəng seçmək üçün daha dostyana yoldu, RGB isə ekranların, canvas API-lərin və şəkil kodunun əslində istifadə etdiyi formadır. Bu çevirici hər hansı bir hue, saturation və lightness üçlüsünü dəqiq 0–255 kanallara çevirir.
Necə işləyir: HSL-dən RGB-ya çevirmə
- S və L-i kəsrlərə çevir və xromanı hesabla: C = (1 − |2L − 1|) × S.
- Hue-u 60-a bölərək onun rəng dairəsindəki seqmentini tap və ara dəyəri hesabla: X = C × (1 − |(H/60 mod 2) − 1|).
- O seqmentə görə C, X və 0-ı R, G və B yuvalarına təyin et.
- Bütün üç kanala lightness offseti L − C/2 əlavə et və 255-ə vur.
İş nümunəsi
Nəticə son yuvarlaqlaşdırmaya qədər dəqiqdir. Kəsrli hue və ya saturation dəyərləri dəstəklənir və sadəcə ən yaxın RGB üçlüsünə düşər.
HSL və RGB izahı
HSL nədir?
HSL rəngi üç hissəyə bölür: rəng tonu (0–360° rəng çarxında), doymalıq (rəngliliyi, 0–100%) və işıqlandırma (parlaqlıq, 0–100%). Hər hissə insanların rəngi təsvir etmə tərzinə uyğun olduğundan, HSL əl ilə və ya kodda tonlar, kölgələr və uyğun palitralar yaratmaq üçün ən asan formattır.
- Sintaksis:
- hsl(H, S%, L%)
- Aralıq:
- 0–360°, 0–100%, 0–100%
- Ən yaxşı üçün:
- palitralar, tonlar və kölgələr, mövzulaşdırma
RGB nədir?
RGB bir rəngi üç işıq kanalında təsvir edir — qırmızı, yaşıl və mavi — hər biri 0–255 intervalında. Bu, ekranların faktiki işini əks etdirir: hamısı 255 olduqda ağ, hamısı 0 olduqda qara alınır. RGB rənglə hesablamalar aparanda düzgün seçimdir, və rgba() şəffaflıq əlavə edir.
- Sintaksis:
- rgb(R, G, B)
- Aralıq:
- Hər kanal üçün 0–255
- Ən yaxşı üçün:
- kod, canvas, rgba() ilə şəffaflıq
HSL-dən RGB-ya istinad cədvəli
Ən çox istifadə olunan CSS rəngləri, HSL-dən RGB-ya çevrilib.
| Rəng | 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) |