RGB ئېكرانغا قانچە يورۇق چىقىرىشنى ئېيتىدۇ؛ HSL سەنگە رەڭنىڭ ئەمەلى كۆرۈنۈشىنى كۆرسىتىدۇ. ئۈچ چانالنى hue, saturation ۋە lightness غا ئايلاندۇرۇش رەڭنى قولدا ئاسانلا تەڭشەشنى تەمىنلەيدۇ.
RGB دىن HSL غا ئايلاندۇرۇش قانداق ئىشلەيدۇ
- R، G ۋە B نى 255 غا بۆل، شۇنداق قىلىپ ھەر بىر قىممەت 0 بىلەن 1 ئارىلىقىدا بولىدۇ.
- ئۇچلىقتىكى ئەڭ چوڭ ۋە ئەڭ كىچىكنى ئېلىپ، ئۇلارنىڭ ئوتتۇرىسى L (lightness) بولىدۇ.
- ئەگەر ئەڭ چوڭ بىلەن ئەڭ كىچىك ئالماشتۇرماسەك، رەڭ كۆك-قارا تۈسكە يېقىن: hue ۋە saturation ئىككىسىمۇ 0 بولىدۇ.
- بولمىسا S نى ئەڭ چوڭ ۋە ئەڭ كىچىك ئارلىقىدىن ھېسابلا، H نى ئەڭ چوڭ بولغان چانالدىن ئوقۇ.
ئىشلىگەن مىسال
مەنبەدە ئېنىق. H، S ۋە L ئادەتتە بۈتۈن سانلارغا ياقىنلاشتۇرۇلۇپ كۆرستىلگەنلىكى ئۈچۈن، قايتا ئايلاندۇرغاندا بىر-ئىككى چانال قەدىمىگە سىلجىشى مۇمكىن.
RGB ۋە HSL چۈشەندۈرۈلدى
RGB نېمە؟
RGB بىر رەڭنى ئۈچ يورۇق كانالى — قىزىل، يېشىل ۋە كۆك — ئارقىلىق 0 دىن 255 گىچە ئىپادىلەيدۇ. بۇ ئېكرانلارنىڭ ئۈلگىسىگە ماس كېلىدۇ: بارلىق كاناللار 255 بولسا ئاق، بارلىق 0 بولسا قارا. RGB سانلار بىلەن ھېسابلاش قىلىشقا ماس كېلىدۇ، rgba() بولسا ئۈستىگە شەفەپلىك قوشىدۇ.
- سٶزلەپ ئېيتقاندا:
- rgb(R, G, B)
- ئارىلىقى:
- ھەر بىر كانال ئۈچۈن 0–255
- ئەڭ ياخشى قوللىنىلىدىغان جايى:
- كود، canvas، rgba() بىلەن شەفەپلىك
HSL نېمە؟
HSL رەڭنى بۇرۇن (ھىيۇ، رنگ چۈشتە 0–360°)، تويالاش (نېچەچە رەڭلىك، 0–100%) ۋە يورۇقلۇق (قانچىلىك يورۇق، 0–100%) غا ئايرىدۇ. ھەر بىر قىسم ئادەملەر رەڭنى تەسۋىرلەش ئۇسۇلىغا ماس كېلىدىغانلىقىدىن HSL تونۇش، سۈندۈرمە ۋە مۇۋاپىق پايلەتلارنى قولدا ياكى كودتا قۇرۇشتىكى ئەڭ ئاسان فورمات.
- سٶزلەپ ئېيتقاندا:
- hsl(H, S%, L%)
- ئارىلىقى:
- 0–360°, 0–100%, 0–100%
- ئەڭ ياخشى قوللىنىلىدىغان جايى:
- پايلەتلار، تونۇش ۋە سۈندۈرمىلەر، تېما
RGB دىن HSL غا ئىشارەت جەدۋىلى
RGB دىن HSL غا ئايلاندۇرۇلغان ئەڭ كۆپ قوللىنىلىدىغان CSS رەڭلىرى.
| رەڭ | 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%) |