פּיקן אַ קאָליר אין HSL איז באַקוועם, אָבער סטיילשיטס, דיזיין‑האַנדאָפס און בראַנד־דאָקומענטן לאָפֿן נאָך אויף HEX. דער קאַנווערטער שירי אַז לאַק און געבט די זעקס־ציפֿריגע קאָוד פֿאַר יעדער קאָמבינאַציע פֿון הוי, סאַטוראַציע און ליכטיקייט.
ווי אַ HSL צו HEX קאָנוועזיע אַרבעט
- מאַך סאַטוראַציע און ליכטיקייט צו פֿראַקשאַנז: 60% ווערט 0.6.
- רעכענען די כראָמע C = (1 − |2L − 1|) × S — דאָס איז וויפֿל די קאָליר האָט פֿון גרײ.
- נוצ דאָס הוי צו פּלייסן די כראָמע אויף די רויט, גרין און בלוי כאַנעלס, דאַן שיפט אַלע דרײַ דורך L − C/2.
- מולטיפּלײַ יעדער כאַנעל מיט 255, ראָונד עס און שרייב עס ווי צוויי העקסאַדעצימאַלע ציפֿערן.
אַרבעטנדיקער ביישפּיל
ראָונדינג פּאַסירט איין מאָל, אין דעם לעצטן שריט, ווען יעדער כאַנעל ווערט געכאפט צו אַ גאנצען 0–255 נומער. דער רעזולטאַט איז דער נאָענטסטער HEX‑קאָוד צו דײַן HSL־אינפּוט און נאָרמאַלערווייז אידענטיש צום וואָס אַ דיזיין־טול ווײַזט.
HSL און HEX דערקלערט
וואס איז HSL?
HSL טיילט אַ קאָליר אַריין אין היו (0–360° אויף דער קאָליר־ראָד), סאַטוראַציע (ווי פֿארפֿול, 0–100%) און לייטנעס (ווי ברייט, 0–100%). ווײַל יעדער טייל ערקלערט וויאַזוי מענטשן באַשרײַבן קאָליר, HSL איז די גרינגסטע פֿאָרמאַט צו בויען טינטס, שיידז און קאַנסיסטענטע פּאַלעטעס — בלענדלעך אָדער אין קאָד.
- סינטאַקס:
- hsl(H, S%, L%)
- שעה:
- 0–360°, 0–100%, 0–100%
- בעסטער פֿאַר:
- פּאַלעטעס, טינטס און שיידז, טעמינג
וואס איז HEX?
אַ HEX־קאָד איז אַ זעקס־דיציט אַרבעטן־העקסאַדעצימאַל נומער וואָס סטאָרס די רויטע, גרינע און בלויע טשאַנעלס פון אַ קאָליר אַחורי אַ פֿירער #. יעדער פּאָר דיציט דעקן איין טשאַנעל — פֿון 00 (קיין) ביז FF (פול) — וואָס געבט די זעלבע 16.7 מיליאָן קאָלירן ווי RGB אין אַ פיל קורצער נאָטאציע. HEX איז דער פעליקער אין CSS, דיזיין־טולס און בראַנד־רולעס.
- סינטאַקס:
- #RRGGBB
- שעה:
- 00–FF פּער טשאַנעל
- בעסטער פֿאַר:
- CSS, דיזיין־האַנדאָף, בראַנד־גיידליינז
HSL צו HEX רעפֿערענץ טיש
די מערסט געוויינטלעך CSS קאָלירן, קאָנווערטירט פֿון HSL צו HEX.
| קאָליר | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |