HSL دا رەڭ تاللاش راھەت، ئەمما ستايل شېتلىرى، لايىھە ئۆتكۈزۈش ۋە براند ھۈججەتلىرى ھەممىسى تىنچە HEX غا تايىنىدۇ. بۇ ئايلاندۇردىگۇچ بۇ بوشلۇقنى تولدۇرۇپ، ھەر قانداق hue, saturation ۋە lightness ئۈچۈن 6 خانىلىق كودنى بېرىدۇ.
HSL دىن HEX غا ئايلاندۇرۇش قانداق ئىشلەيدۇ
- saturation ۋە lightness نى پەرەنتلەنگە ئايلاندۇر: 60% بولسا 0.6 بولىدۇ.
- chroma C = (1 − |2L − 1|) × S نى ھېسابلا — بۇ رەڭنى كۆلەمسىزلەردىن قاچىش ئېغىمىنى كۆرسىتىدۇ.
- ھۇيىنى ئىشلىتىپ بۇ chroma نى قىزىل، يېشىل ۋە كۆك چاناللارغا سېلىپ، ئاندىن ھەممىنى L − C/2 بىلەن سۈرۈش.
- ھەر بىر چانالنى 255 كە كۆپەيت، يېقىنلاشتۇر، ئىككى ھېكسادېسىمال رەقەم شەكلىدە يېزىپ چىقار.
ئىشلىگەن مىسال
يېقىنلاش پەقەت ئەڭ ئاخىرقى قەدەمدە، ھەر بىر چانالنى 0–255 بۈتۈن قىممەتھەكىگە سىقىپ قويغاندا بولىدۇ. نەتىجە سەننىڭ HSL كىرگۈزۈشىڭگە ئەڭ يېقىن HEX كودى ۋە ئادەتتە لايىھە قورالى كۆرستىدىگەن نەرسىگە ئاۋارىدەك ئوخشاش بولىدۇ.
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 (تۇلۇق) غىچە — بۇ RGB بىلەن ئوخشاش 16.7 مىليون رەڭنى قىسقاراق ئىپادىلەيدۇ. HEX CSS، لايىھە قوراللىرى ۋە ماركا كۆرسەتكۈچلىرىدە ئادەتتىكى تاللاش.
- سٶزلەپ ئېيتقاندا:
- #RRGGBB
- ئارىلىقى:
- ھەر بىر كانال ئۈچۈن 00–FF
- ئەڭ ياخشى قوللىنىلىدىغان جايى:
- CSS، لايىھە تاپشۇرۇش، ماركا كۆرسەتكۈچلىرى
HSL دىن HEX غا ئىشارەت جەدۋىلى
HSL دىن HEX غا ئايلاندۇرۇلغان ئەڭ كۆپ قوللىنىلىدىغان CSS رەڭلىرى.
| رەڭ | 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 |