HSL رەڭ تاللاشنىڭ دوستى، RGB بولسا ئېكرانلار، canvas API لۇرى ۋە رەسىم كودىنىڭ ھەقىقىي ئىشلىتىدىغانى. بۇ ئايلاندۇرغۇچ ھەر قانداق hue، saturation ۋە lightness ئۈچلىكىنى دەقىق 0–255 قاناللىرىغا ئايلاندۇرىدۇ.
HSL دىن RGB غا ئايلاندۇرۇش قانداق ئىشلەيدۇ
- S ۋە L نى فركسىيەگە ئايلاندۇرۇپ، chroma C = (1 − |2L − 1|) × S نى ھېسابلا.
- Hue نى 60 كە بۆلۈپ رەڭ تىگىدىكى سېگمېنتىنى تاپ ۋە ئارىلىق قىممەت X = C × (1 − |(H/60 mod 2) − 1|) نى ھېسابلا.
- ئۈندىكى سېگمېنتقا ئاساسەن C، X ۋە 0 نى R، G ۋە B ئورۇنلىرىغا تەيدىلە.
- ھەممە ئۈچ قانالغا lightness offset 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
- ئەڭ ياخشى قوللىنىلىدىغان جايى:
- كود، canvas، rgba() بىلەن شەفەپلىك
HSL دىن RGB غا ئىشارەت جەدۋىلى
HSL دىن RGB غا ئايلاندۇرۇلغان ئەڭ كۆپ قوللىنىلىدىغان CSS رەڭلىرى.
| رەڭ | 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) |