HSL ਉਸ ਤਰੀਕੇ ਨਾਲ ਰੰਗ ਵਰਣਨ ਕਰਦਾ ਹੈ ਜਿਸ ਤਰ੍ਹਾਂ ਲੋਕ ਗੱਲ ਕਰਦੇ ਹਨ: ਕਿਹੜਾ hue, ਕਿੰਨੀ ਰੰਗੀਨਤਾ (colorful), ਕਿੰਨੀ ਰੌਸ਼ਨੀ. HEX ਕੋਡ ਨੂੰ HSL ਵਿੱਚ ਬਦਲਣਾ ਰੰਗ ਨੂੰ ਉਸ ਫਾਰਮ ਵਿੱਚ ਲਿਆਂਦਾ ਹੈ ਜਿਸਨੂੰ تُੂੰ ਅਸਾਨੀ ਨਾਲ ਟਵੀਕ ਕਰ ਸਕਾਏ — ਇਸਨੂੰ ਚਮਕਾਉਣਾ, ਮਿਊਟ ਕਰਨਾ ਜਾਂ ਇਸ ਤੋਂ ਪੂਰੀ ਸਕੇਲ ਬਣਾਉਣਾ.
HEX ਤੋਂ HSL ਰੂਪਾਂਤਰਕ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ
- HEX ਕੋਡ ਨੂੰ RGB ਵਿੱਚ ਬਦਲੋ ਅਤੇ ਹਰ ਚੈਨਲ ਨੂੰ 255 ਨਾਲ ਵੰਡੋ, ਤਾਂ ਜੋ ਤਿੰਨੋ 0 ਅਤੇ 1 ਦੇ ਵਿਚਕਾਰ ਹੋ ਜਾਣ.
- ਤਿੰਨੋ ਮੁੱਲਾਂ ਵਿੱਚੋਂ ਸਭ ਤੋਂ ਵੱਡਾ ਅਤੇ ਸਭ ਤੋਂ ਛੋਟਾ ਲੱਭੋ. ਉਹਨਾਂ ਦਾ ਔਸਤ lightness L ਹੁੰਦਾ ਹੈ.
- ਉਹਨਾਂ ਦੋਹਾਂ ਦੇ ਵਿਚਕਾਰ ਦਾ ਫਰਕ saturation S ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ: ਚਮਕੀਲੇ ਰੰਗਾਂ ਲਈ ਇਸ ਨੂੰ (2 − max − min) ਨਾਲ ਵੰਡੋ, ਜਾਂ ਹਨੇਰੇ ਰੰਗਾਂ ਲਈ (max + min) ਨਾਲ.
- ਜੋ ਚੈਨਲ ਸਭ ਤੋਂ ਵੱਧ ਹੈ ਉਹ hue H ਫੈਸਲਾ ਕਰਦਾ ਹੈ — ਲਾਲ 0°, ਹਰਾ 120°, ਨੀਲਾ 240° — ਅਤੇ ਹੋਰ ਦੋ ਚੈਨਲ ਉਸ ਸੇਗਮੈਂਟ ਦੇ ਅੰਦਰ hue ਦੀ ਪوزیشن ਦਿੰਦੇ ਹਨ.
ਕਾਮਯਾਬ ਉਦਾਹਰਨ
ਗਣਿਤ ਠੀਕ ਹੁੰਦਾ ਹੈ, ਪਰ HSL ਮੁੱਲ ਆਮ ਤੌਰ 'ਤੇ ਡਿਗਰੀ ਅਤੇ ਪ੍ਰਤੀਸ਼ਤਾਂ ਦੇ ਪੂਰੇ ਨੰਬਰਾਂ 'ਚ ਗੋਲ ਕੀਤੇ ਜਾਂਦੇ ਹਨ. ਵਾਪਸ ਬਦਲਣ 'ਤੇ ਇਸ ਕਾਰਨ ਇੱਕ ਜਾਂ ਦੋ RGB ਕਦਮ ਦੇ ਫ਼ਰਕ 'ਤੇ ਆ ਸਕਦਾ ਹੈ — ਹਕੀਕਤ ਵਿੱਚ ਅੰਨ੍ਹੇ ਨਹੀਂ दिखਦਾ, ਪਰ ਜੇ تُੂੰ ਰੰਗਾਂ ਨੂੰ ਬਾਰ-ਬਾਰ round-trip ਕਰਦਾ ਹੈ ਤਾਂ ਜਾਣਨ ਲਾਇਕ ਹੈ.
HEX ਅਤੇ HSL ਦੀ ਵਿਆਖਿਆ
HEX ਕੀ ਹੈ?
HEX ਕੋਡ ਇੱਕ ਛੇ-ਅੰਕੀ ਹੇਕਸਾਡੈਸੀਮਲ ਨੰਬਰ ਹੁੰਦਾ ਹੈ ਜੋ ਇੱਕ ਰੰਗ ਦੇ red, green ਅਤੇ blue ਚੈਨਲ ਨੂੰ ਅਗੇ # ਦੇ ਨਾਲ ਸਟੋਰ ਕਰਦਾ ਹੈ। ਹਰ ਜੋੜੀ ਅੰਕ ਇੱਕ ਚੈਨਲ ਨੂੰ DARਸਾਉਂਦੀ ਹੈ, 00 (ਕੋਈ ਨਹੀਂ) ਤੋਂ FF (ਪੂਰਾ) ਤੱਕ, ਜੋ RGB ਜਿਵੇਂ 16.7 ਮਿਲੀਅਨ ਰੰਗਾਂ ਨੂੰ ਇੱਕ ਛੋਟੀ ਨੋਟੇਸ਼ਨ ਵਿੱਚ ਦਿੰਦਾ ਹੈ। HEX CSS, ਡਿਜ਼ਾਈਨ ਟੂਲ ਅਤੇ brand guidelines ਵਿੱਚ ਡਿਫ਼ਾਲਟ ਹੁੰਦਾ ਹੈ।
- ਸਿੰਟੈਕਸ:
- #RRGGBB
- ਰੈਂਜ:
- 00–FF ਪ੍ਰਤੀ ਚੈਨਲ
- ਸਭ ਤੋਂ ਵਧੀਆ ਲਈ:
- CSS, design handoff, brand guidelines
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
HEX ਤੋਂ HSL ਹਵਾਲਾ ਸਾਰਣੀ
ਸਭ ਤੋਂ ਆਮ CSS ਰੰਗ, HEX ਤੋਂ HSL ਵਿੱਚ ਰੂਪਾਂਤਰਿਤ।
| ਰੰਗ | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |