HSL рд╕реЗ RGB рдХрдиреНрд╡рд░реНрдЯрд░ рдХреНрдпрд╛ рд╣реИ?
рдпрд╣ рдЯреВрд▓ HSL рдореЙрдбрд▓ тАФ рдпрд╛рдиреА Hue (рд╣реНрдпреВ), Saturation (рд╕реИрдЪреБрд░реЗрд╢рди) рдФрд░ Lightness (рд▓рд╛рдЗрдЯрдиреЗрд╕) тАФ рдореЗрдВ рджрд░реНрд╢рд╛рдП рдЧрдП рдХрд┐рд╕реА рд░рдВрдЧ рдХреЛ рдЙрд╕ RGB рдореЙрдбрд▓ рдореЗрдВ рдмрджрд▓ рджреЗрддрд╛ рд╣реИ, рдЬрд┐рд╕рдХрд╛ рдЗрд╕реНрддреЗрдорд╛рд▓ рд╕реНрдХреНрд░реАрди, CSS рдФрд░ рдЗрдореЗрдЬ рдлрд╝рд╛рдЗрд▓реЛрдВ рдореЗрдВ рд╣реЛрддрд╛ рд╣реИред рдбрд┐рдЬрд╝рд╛рдЗрдирд░реЛрдВ рдХреЗ рд▓рд┐рдП HSL рд╕рдордЭрдирд╛ рдЖрд╕рд╛рди рд╣реЛрддрд╛ рд╣реИ, рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ "рд░рдВрдЧ" (рд╣реНрдпреВ) рдХреЛ рдЗрд╕ рдмрд╛рдд рд╕реЗ рдЕрд▓рдЧ рд░рдЦрддрд╛ рд╣реИ рдХрд┐ рд╡рд╣ рдХрд┐рддрдирд╛ рдЧрд╣рд░рд╛ (рд╕реИрдЪреБрд░реЗрд╢рди) рдФрд░ рдХрд┐рддрдирд╛ рдЪрдордХреАрд▓рд╛ (рд▓рд╛рдЗрдЯрдиреЗрд╕) рд╣реИред рд╡рд╣реАрдВ RGB рдЙрд╕реА рд░рдВрдЧ рдХреЛ рд▓рд╛рд▓, рд╣рд░реЗ рдФрд░ рдиреАрд▓реЗ рдкреНрд░рдХрд╛рд╢ рдХреА рдорд╛рддреНрд░рд╛ рдХреЗ рд░реВрдк рдореЗрдВ рдмрддрд╛рддрд╛ рд╣реИред рдпрд╣ рдХрдиреНрд╡рд░реНрдЬрд╝рди рдкреВрд░реА рддрд░рд╣ рд╕рдЯреАрдХ рд╣реЛрддрд╛ рд╣реИ рдФрд░ рдХрд┐рд╕реА рднреА рд╡реИрдз HSL рдЗрдирдкреБрдЯ рдкрд░ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред
рдЗрд╕рдХрд╛ рдЙрдкрдпреЛрдЧ рдХреИрд╕реЗ рдХрд░реЗрдВ
рд╣реНрдпреВ рдХреЛ рдбрд┐рдЧреНрд░реА рдореЗрдВ (0тАУ360), рд╕реИрдЪреБрд░реЗрд╢рди рдХреЛ рдкреНрд░рддрд┐рд╢рдд рдореЗрдВ (0тАУ100) рдФрд░ рд▓рд╛рдЗрдЯрдиреЗрд╕ рдХреЛ рдкреНрд░рддрд┐рд╢рдд рдореЗрдВ (0тАУ100) рджрд░реНрдЬ рдХрд░реЗрдВред рдХреИрд▓рдХреБрд▓реЗрдЯрд░ рдЗрд╕рдХреЗ рдмрд░рд╛рдмрд░ rgb(r, g, b) рдорд╛рди рд▓реМрдЯрд╛рддрд╛ рд╣реИ, рдЬрд┐рдирдореЗрдВ рд╕реЗ рд╣рд░ рдорд╛рди 0 рд╕реЗ 255 рдХреЗ рдмреАрдЪ рд╣реЛрддрд╛ рд╣реИред рд╕рд╛рде рд╣реА рдПрдХ рд▓рд╛рдЗрд╡ рдХрд▓рд░ рд╕реНрд╡реИрдЪ рднреА рджрд┐рдЦрддрд╛ рд╣реИ, рддрд╛рдХрд┐ рдЖрдк рдирддреАрдЬреЗ рдХреЛ рдЖрдБрдЦреЛрдВ рд╕реЗ рддреБрд░рдВрдд рдЬрд╛рдБрдЪ рд╕рдХреЗрдВред
рдлрд╝реЙрд░реНрдореВрд▓рд╛ рд╕рдордЭреЗрдВ
рд╕рдмрд╕реЗ рдкрд╣рд▓реЗ рд╕реИрдЪреБрд░реЗрд╢рди рдФрд░ рд▓рд╛рдЗрдЯрдиреЗрд╕ рдХреЛ 0тАУ1 рдХреА рд░реЗрдВрдЬ рдореЗрдВ рд╕реНрдХреЗрд▓ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред рдХреНрд░реЛрдорд╛ \(C = (1 - |2L - 1|)\,S\) рд╣реЛрддрд╛ рд╣реИ, рдЬреЛ рдирддреАрдЬреЗ рдХреА рд░рдВрдЧреАрдирддрд╛ рджрд░реНрд╢рд╛рддрд╛ рд╣реИред рдПрдХ рд╕рд╣рд╛рдпрдХ рдорд╛рди \(X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right)\) рд╣рд░ 60┬░ рдХреЗ рд╣реНрдпреВ рдЦрдВрдб рдХреЗ рднреАрддрд░ рдмреАрдЪ рдХреЗ рдорд┐рд╢реНрд░рдг рдХреЛ рд╕рдВрднрд╛рд▓рддрд╛ рд╣реИ, рдФрд░ \(m = L - \tfrac{C}{2}\) рд╣рд░ рдЪреАрдЬрд╝ рдХреЛ рдЗрд╕ рддрд░рд╣ рд╢рд┐рдлрд╝реНрдЯ рдХрд░рддрд╛ рд╣реИ рдХрд┐ рд╡рд╣ рдорд╛рдБрдЧреА рдЧрдИ рд▓рд╛рдЗрдЯрдиреЗрд╕ рд╕реЗ рдореЗрд▓ рдЦрд╛рдПред рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рдорд╛рдиреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рд╣реЛрддрд╛ рд╣реИ:
$$C = (1 - |2L - 1|)\,S,\quad X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right),\quad m = L - \tfrac{C}{2}$$рд╣реНрдпреВ рдЬрд┐рд╕ 60┬░ рдЦрдВрдб рдореЗрдВ рдЖрддрд╛ рд╣реИ, рдЙрд╕реА рдХреЗ рдЕрдиреБрд╕рд╛рд░ C, X рдФрд░ 0 рдХреЛ R, G рдФрд░ B рдореЗрдВ рдПрдХ рдЦрд╛рд╕ рдХреНрд░рдо рдореЗрдВ рдмрд╛рдБрдЯрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдлрд┐рд░ m рдЬреЛрдбрд╝рд╛ рдЬрд╛рддрд╛ рд╣реИ рдФрд░ рд╣рд░ рдЪреИрдирд▓ рдХреЛ 255 рд╕реЗ рдЧреБрдгрд╛ рдХрд░рдХреЗ рд░рд╛рдЙрдВрдб рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ:
$$(R,G,B) = ((R'+m)\cdot 255,\ (G'+m)\cdot 255,\ (B'+m)\cdot 255)$$
рд╣рд▓ рдХрд┐рдпрд╛ рд╣реБрдЖ рдЙрджрд╛рд╣рд░рдг
HSL(210┬░, 50%, 50%) рдХреЗ рд▓рд┐рдП: \(S = 0.5\), \(L = 0.5\)ред
$$C = (1 - |0|)\cdot 0.5 = 0.5$$\(H/60 = 3.5\), рдЗрд╕рд▓рд┐рдП \((3.5 \bmod 2) = 1.5\) рдФрд░
$$X = 0.5\cdot(1 - |1.5 - 1|) = 0.25$$$$m = 0.5 - 0.25 = 0.25$$рд╣реНрдпреВ 210┬░ рдЦрдВрдб 3 (180тАУ240┬░) рдореЗрдВ рдЖрддрд╛ рд╣реИ, рдЬрд┐рд╕рд╕реЗ \((R',G',B') = (0,\ X,\ C) = (0,\ 0.25,\ 0.5)\)ред m рдЬреЛрдбрд╝рдХрд░ ├Ч255 рдХрд░рдиреЗ рдкрд░: \(R = 64\), \(G = 128\), \(B = 191\) тЖТ rgb(64, 128, 191)ред
рдЕрдХреНрд╕рд░ рдкреВрдЫреЗ рдЬрд╛рдиреЗ рд╡рд╛рд▓реЗ рд╕рд╡рд╛рд▓
рдЗрдирдкреБрдЯ рдХрд┐рд╕ рд░реЗрдВрдЬ рдореЗрдВ рд╣реЛрддреЗ рд╣реИрдВ? рд╣реНрдпреВ 0тАУ360 рдбрд┐рдЧреНрд░реА рдореЗрдВ; рд╕реИрдЪреБрд░реЗрд╢рди рдФрд░ рд▓рд╛рдЗрдЯрдиреЗрд╕ 0тАУ100 рдкреНрд░рддрд┐рд╢рдд рдореЗрдВред
рдорд╛рдиреЛрдВ рдХреЛ рд░рд╛рдЙрдВрдб рдХреНрдпреЛрдВ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ? RGB рдЪреИрдирд▓ 0 рд╕реЗ 255 рддрдХ рдХреА рдкреВрд░реНрдг рд╕рдВрдЦреНрдпрд╛рдПрдБ рд╣реЛрдиреЗ рдЪрд╛рд╣рд┐рдП, рдЗрд╕рд▓рд┐рдП рд╕реНрдХреЗрд▓ рдХрд┐рдП рдЧрдП рдирддреАрдЬреЗ рдХреЛ рдирд┐рдХрдЯрддрдо рдкреВрд░реНрдгрд╛рдВрдХ рддрдХ рд░рд╛рдЙрдВрдб рдХрд░ рджрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред
рдХреНрдпрд╛ рдЧреНрд░реЗ рд░рдВрдЧ рд╕рдВрднрд╡ рд╣реИ? рд╣рд╛рдБ тАФ рд╕реИрдЪреБрд░реЗрд╢рди рдХреЛ 0 рд░рдЦреЗрдВ рдФрд░ рдХреЛрдИ рднреА рд╣реНрдпреВ рдбрд╛рд▓реЗрдВ, рддрдм R, G рдФрд░ B рддреАрдиреЛрдВ 0тАУ255 рдореЗрдВ рд╕реНрдХреЗрд▓ рдХреА рдЧрдИ рд▓рд╛рдЗрдЯрдиреЗрд╕ рдХреЗ рдмрд░рд╛рдмрд░ рд╣реЛ рдЬрд╛рдПрдБрдЧреЗред