RGB ਸਕਰੀਨ ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਕਿੰਨੀ ਰੌਸ਼ਨੀ ਜਾਰੀ ਕਰਨੀ ਹੈ; HSL تُੈਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਰੰਗ ਅਸਲ ਵਿੱਚ ਕਿਵੇਂ ਦਿਖਦਾ ਹੈ. ਤਿੰਨ ਚੈਨਲਾਂ ਨੂੰ hue, saturation ਅਤੇ lightness ਵਿੱਚ ਬਦਲਣ ਨਾਲ ਰੰਗ ਹੱਥ ਨਾਲ ਆਸਾਨੀ ਨਾਲ ਸਮਾਂਜਿਆ ਜਾ ਸਕਦਾ ਹੈ.
RGB ਤੋਂ HSL ਰੂਪਾਂਤਰਕ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ
- R, G ਅਤੇ B ਨੂੰ 255 ਨਾਲ ਵੰਡੋ ਤਾਂ ਕਿ ਹਰ ਮੁੱਲ 0 ਅਤੇ 1 ਦੇ ਵਿਚਕਾਰ ਆ ਜਾਵੇ.
- ਤਿੰਨੋ ਵਿੱਚੋਂ highest ਅਤੇ lowest ਲਵੋ — ਉਹਨਾਂ ਦਾ ਔਸਤ lightness L ਹੁੰਦਾ ਹੈ.
- ਜੇ highest ਅਤੇ lowest ਇਕੋ ਹਨ ਤਾਂ ਰੰਗ ਸਲੇਟੀ (grey) ਹੈ: hue ਅਤੇ saturation ਦੋਹਾਂ 0 ਹੁੰਦੇ ਹਨ.
- ਨਾ ਹੋਣ 'ਤੇ S ਨੂੰ highest ਅਤੇ lowest ਦੇ ਫਰਕ ਤੋਂ ਨਿਕਾਲੋ, ਅਤੇ H ਉਹਨਾਂ ਚੈਨਲਾਂ 'ਚੋਂ ਪੜ੍ਹੋ ਜੋ highest ਹੈ.
ਕਾਮਯਾਬ ਉਦਾਹਰਨ
ਸਿਧਾਂਤਕ ਤੌਰ 'ਤੇ ਠੀਕ. ਕਿਉਂਕਿ H, S ਅਤੇ L ਆਮ ਤੌਰ 'ਤੇ ਗੋਲ ਕੀਤੇ ਪੂਰੇ ਨੰਬਰਾਂ ਵਜੋਂ ਦਿਖਾਏ ਜਾਂਦੇ ਹਨ, ਵਾਪਸੀ ਬਦਲਣ 'ਤੇ ਇੱਕ ਚੈਨਲ ਇੱਕ-ਦੋ ਕਦਮ ਹਿਲ ਸਕਦਾ ਹੈ.
RGB ਅਤੇ HSL ਦੀ ਵਿਆਖਿਆ
RGB ਕੀ ਹੈ?
RGB ਇੱਕ ਰੰਗ ਨੂੰ ਤਿੰਨ ਲਾਈਟ ਚੈਨਲਾਂ ਵਜੋਂ ਦਰਸਾਉਂਦਾ ਹੈ — red, green ਅਤੇ blue — ਹਰ ਇੱਕ 0 ਤੋਂ 255 ਤੱਕ। ਇਹ ਸਕ੍ਰੀਨਸ ਦੇ ਕੰਮ ਕਰਨ ਦੇ ਤਰੀਕੇ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ: ਤਿੰਨਾਂ 255 'ਤੇ ਸਫੈਦ ਦਿੰਦੇ ਹਨ, ਤਿੰਨਾਂ 0 'ਤੇ ਕਾਲਾ। ਜਦੋਂ ਤੁਹਾਨੂੰ ਰੰਗ ਨਾਲ ਗਣਨਾ करनी ਹੋਵੇ ਤਾਂ RGB ਠੀਕ ਚੋਣ ਹੈ, ਅਤੇ rgba() ਉਸ 'ਤੇ transparency ਜੋੜਦਾ ਹੈ।
- ਸਿੰਟੈਕਸ:
- rgb(R, G, B)
- ਰੈਂਜ:
- 0–255 ਪ੍ਰਤੀ ਚੈਨਲ
- ਸਭ ਤੋਂ ਵਧੀਆ ਲਈ:
- code, canvas, transparency with rgba()
HSL ਕੀ ਹੈ?
HSL ਰੰਗ ਨੂੰ hue (color wheel 'ਤੇ 0–360°), saturation (ਕਿੰਨਾ ਰੰਗੀਨ, 0–100%) ਅਤੇ lightness (ਕਿੰਨੀ ਰੋਸ਼ਨੀ, 0–100%) ਵਿੱਚ ਵੰਡਦਾ ਹੈ। ਕਿਉਂਕਿ ਹਰ ਹਿੱਸਾ ਲੋਕਾਂ ਦੇ ਰੰਗ ਵੇਰਵੇ ਨਾਲ ਮਿਲਦਾ ਹੈ, HSL ਟਿੰਟਸ, ਸ਼ੇਡਸ ਅਤੇ ਲਗਾਤਾਰ palettes ਬਣਾਉਣ ਲਈ ਸਭ ਤੋਂ ਆਸਾਨ ਫਾਰਮੈਟ ਹੈ — ਹੱਥ ਨਾਲ ਜਾਂ ਕੋਡ ਵਿੱਚ।
- ਸਿੰਟੈਕਸ:
- hsl(H, S%, L%)
- ਰੈਂਜ:
- 0–360°, 0–100%, 0–100%
- ਸਭ ਤੋਂ ਵਧੀਆ ਲਈ:
- palettes, tints and shades, theming
RGB ਤੋਂ HSL ਹਵਾਲਾ ਸਾਰਣੀ
ਸਭ ਤੋਂ ਆਮ CSS ਰੰਗ, RGB ਤੋਂ HSL ਵਿੱਚ ਰੂਪਾਂਤਰਿਤ।
| ਰੰਗ | 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%) |