HSL ਰੰਗ ਚੁਣਨ ਦਾ ਸਹਿਜ ਤਰੀਕਾ ਹੈ, ਜਦਕਿ RGB ਉਹ ਹੈ ਜੋ ਸਕ੍ਰੀਨ, canvas APIs ਅਤੇ image ਕੋਡ ਅਸਲ ਵਿੱਚ ਵਰਤਦੇ ਹਨ। ਇਹ ਕੰਵਰਟਰ ਕਿਸੇ ਵੀ hue, saturation ਅਤੇ lightness ਤਿਕੜੀ ਨੂੰ ਸਹੀ 0–255 ਚੈਨਲਾਂ ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ।
HSL ਤੋਂ RGB ਰੂਪਾਂਤਰਕ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ
- S ਅਤੇ L ਨੂੰ ਭਿੰਨ (fractions) ਵਿੱਚ ਬਦਲੋ ਅਤੇ 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 ਨਾਲ ਗੁਣਾ ਕਰੋ।
ਕਾਮਯਾਬ ਉਦਾਹਰਨ
ਨਤੀਜਾ ਆਖ਼ਰੀ ਗੋਲ ਕਰਨ ਤੱਕ ਸਹੀ ਹੈ ਜੋ پورੇ ਚੈਨਲਾਂ ਲਈ ਹੁੰਦਾ ਹੈ। ਭੱਜੇ hue ਜਾਂ saturation ਮੁੱਲ ਵੀ ਸਹਾਇਤ ਕੀਤੇ ਜਾਂਦੇ ਹਨ ਅਤੇ ਨੇੜਲੇ RGB ਤਿਕੜੀ 'ਤੇ ਆ ਜਾਂਦੇ ਹਨ।
HSL ਅਤੇ RGB ਦੀ ਵਿਆਖਿਆ
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 ਕੀ ਹੈ?
RGB ਇੱਕ ਰੰਗ ਨੂੰ ਤਿੰਨ ਲਾਈਟ ਚੈਨਲਾਂ ਵਜੋਂ ਦਰਸਾਉਂਦਾ ਹੈ — red, green ਅਤੇ blue — ਹਰ ਇੱਕ 0 ਤੋਂ 255 ਤੱਕ। ਇਹ ਸਕ੍ਰੀਨਸ ਦੇ ਕੰਮ ਕਰਨ ਦੇ ਤਰੀਕੇ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ: ਤਿੰਨਾਂ 255 'ਤੇ ਸਫੈਦ ਦਿੰਦੇ ਹਨ, ਤਿੰਨਾਂ 0 'ਤੇ ਕਾਲਾ। ਜਦੋਂ ਤੁਹਾਨੂੰ ਰੰਗ ਨਾਲ ਗਣਨਾ करनी ਹੋਵੇ ਤਾਂ RGB ਠੀਕ ਚੋਣ ਹੈ, ਅਤੇ rgba() ਉਸ 'ਤੇ transparency ਜੋੜਦਾ ਹੈ।
- ਸਿੰਟੈਕਸ:
- rgb(R, G, B)
- ਰੈਂਜ:
- 0–255 ਪ੍ਰਤੀ ਚੈਨਲ
- ਸਭ ਤੋਂ ਵਧੀਆ ਲਈ:
- code, canvas, transparency with rgba()
HSL ਤੋਂ RGB ਹਵਾਲਾ ਸਾਰਣੀ
ਸਭ ਤੋਂ ਆਮ CSS ਰੰਗ, HSL ਤੋਂ RGB ਵਿੱਚ ਰੂਪਾਂਤਰਿਤ।
| ਰੰਗ | 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) |