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