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%) |