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