HSL איז דער פֿרײַנדלעכער וועג צו קלײַבן אַ קאָליר, RGB איז וואָס סקרינס, canvas APIs און בילד־קאָד טאַקע נוצן. דער קאָנווערטער מאַכט יעדן טריפּל פֿון טאָן, סאַטוראַציע און לייטנעס אין גענויע 0–255 קאַנאַלן.
ווי אַ HSL צו RGB קאָנוועזיע אַרבעט
- עקוויפֿיר S און L צו בראַקשן און רעכננ זיך די כראָמע C = (1 − |2L − 1|) × S.
- טייל דעם היין דורך 60 כדי געפֿינען זיין סעגמענט אויף דער קאָליר־וויל און רעכננ זיך דעם אינטערמיטלע ווערט X = C × (1 − |(H/60 mod 2) − 1|).
- צולייגן C, X און 0 צו די R, G און B סלאָץ לויט דעם סעגמענט.
- לייג דעם לייטנאַס־אָפּסעט L − C/2 צו אַלע דריי טשאַנאַלן און מאַלטיפֿלי דורך 255.
אַרבעטנדיקער ביישפּיל
די רעזולטאַט איז גענוי ביז די לעצטדיקע ראָונדינג צו גאַנץ־טשאַנאַלן. פרעקציאָנעלע היין אָדער סעראַטיישאַן ווערט שטיצט און דריקט צו די נאָענטסטע RGB־טרעפּל.
HSL און RGB דערקלערט
וואס איז HSL?
HSL טיילט אַ קאָליר אַריין אין היו (0–360° אויף דער קאָליר־ראָד), סאַטוראַציע (ווי פֿארפֿול, 0–100%) און לייטנעס (ווי ברייט, 0–100%). ווײַל יעדער טייל ערקלערט וויאַזוי מענטשן באַשרײַבן קאָליר, HSL איז די גרינגסטע פֿאָרמאַט צו בויען טינטס, שיידז און קאַנסיסטענטע פּאַלעטעס — בלענדלעך אָדער אין קאָד.
- סינטאַקס:
- hsl(H, S%, L%)
- שעה:
- 0–360°, 0–100%, 0–100%
- בעסטער פֿאַר:
- פּאַלעטעס, טינטס און שיידז, טעמינג
וואס איז RGB?
RGB באַשרײַבט אַ קאָליר ווי דרײַ ליכט־טשאַנעלס — רויט, גרין און בלו — יעדער פֿון 0 ביז 255. עס שפּיגלט ווי סקרינז אַרבעטן בפֿירוש: אַלע דרײַ בײַ 255 געבן ווייל, אַלע בײַ 0 געבן שוואַרץ. RGB איז ריכטיק ווען דו דאַרפֿסט רעכענען מיט אַ קאָליר — אַנאַמיישאַנז אויף איין טשאַנעל, מישן אין קאָד, אָדער צוגיין מיט פאַרטרענדקייט מיט rgba().
- סינטאַקס:
- rgb(R, G, B)
- שעה:
- 0–255 פּער טשאַנעל
- בעסטער פֿאַר:
- קאָד, קאַנוואַס, טראַנספּערענסי מיט rgba()
HSL צו RGB רעפֿערענץ טיש
די מערסט געוויינטלעך CSS קאָלירן, קאָנווערטירט פֿון HSL צו RGB.
| קאָליר | 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) |