HSL ਵਿੱਚ ਰੰਗ ਚੁਣਨਾ ਆਰਾਮਦਾਇਕ ਹੁੰਦਾ ਹੈ, ਪਰ stylesheets, design handoffs ਅਤੇ ਬ੍ਰੈਂਡ ਡૉਕਸ ਫਿਰ ਵੀ HEX 'ਤੇ ਚੱਲਦੇ ਹਨ. ਇਹ ਕਨਵਰਟਰ ਇਸ ਖਾਲੀ ਨੂੰ ਭਰਦਾ ਹੈ ਅਤੇ ਕਿਸੇ ਵੀ hue, saturation ਅਤੇ lightness ਕਾਂਬੀਨੇਸ਼ਨ ਲਈ ਛੇ-ਅੰਕੀ ਕੋਡ ਦਿੰਦਾ ਹੈ.
HSL ਤੋਂ HEX ਰੂਪਾਂਤਰਕ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ
- saturation ਅਤੇ lightness ਨੂੰ ਭਾਗਾਂ ਵਿੱਚ ਬਦਲੋ: 60% becomes 0.6.
- chroma C = (1 − |2L − 1|) × S ਗਣਨਾ ਕਰੋ — ਇਹ ਦੱਸਦਾ ਹੈ ਕਿ ਰੰਗ ਕਿੰਨਾ ਸਲੇਟੀ (grey) ਤੋਂ ਦੂਰ ਹੈ.
- hue ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਉਸ chroma ਨੂੰ ਲਾਲ, ਹਰੇ ਅਤੇ ਨੀਲੇ ਚੈਨਲਾਂ 'ਤੇ ਰੱਖੋ, ਫਿਰ ਤਿੰਨੋ ਨੂੰ L − C/2 ਨਾਲ shift ਕਰੋ.
- ਹਰ ਚੈਨਲ ਨੂੰ 255 ਨਾਲ ਗੁਣਾ ਕਰੋ, ਗੋਲ ਕਰੋ, ਅਤੇ ਦੋ ਹੇਕਸਡੈਸੀਮਲ ਅੰਕਾਂ ਵਜੋਂ ਲਿਖੋ.
ਕਾਮਯਾਬ ਉਦਾਹਰਨ
ਗੋਲਾਕਾਰ ਕਰਨ ਦੀ ਕਾਰਵਾਈ ਆਖ਼ਰੀ ਕਦਮ 'ਚ ਇੱਕ ਵਾਰੀ ਹੁੰਦੀ ਹੈ, ਜਦੋਂ ਹਰ ਚੈਨਲ ਨੂੰ 0–255 ਦੇ ਪੂਰੇ ਅੰਕ 'ਤੇ snap ਕੀਤਾ ਜਾਂਦਾ ਹੈ. ਨਤੀਜਾ تُਰੇ HSL ਇਨਪੁੱਟ ਦੇ ਸਭ ਤੋਂ ਨਜ਼ਦੀਕੀ HEX ਕੋਡ ਹੁੰਦਾ ਹੈ ਅਤੇ ਆਮ ਤੌਰ 'ਤੇ ਉਹੀ ਹੁੰਦਾ ਹੈ ਜੋ ਡਿਜ਼ਾਈਨ ਟੂਲ ਦਿਖਾਉਂਦਾ ਹੈ.
HSL ਅਤੇ HEX ਦੀ ਵਿਆਖਿਆ
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 ਕੀ ਹੈ?
HEX ਕੋਡ ਇੱਕ ਛੇ-ਅੰਕੀ ਹੇਕਸਾਡੈਸੀਮਲ ਨੰਬਰ ਹੁੰਦਾ ਹੈ ਜੋ ਇੱਕ ਰੰਗ ਦੇ red, green ਅਤੇ blue ਚੈਨਲ ਨੂੰ ਅਗੇ # ਦੇ ਨਾਲ ਸਟੋਰ ਕਰਦਾ ਹੈ। ਹਰ ਜੋੜੀ ਅੰਕ ਇੱਕ ਚੈਨਲ ਨੂੰ DARਸਾਉਂਦੀ ਹੈ, 00 (ਕੋਈ ਨਹੀਂ) ਤੋਂ FF (ਪੂਰਾ) ਤੱਕ, ਜੋ RGB ਜਿਵੇਂ 16.7 ਮਿਲੀਅਨ ਰੰਗਾਂ ਨੂੰ ਇੱਕ ਛੋਟੀ ਨੋਟੇਸ਼ਨ ਵਿੱਚ ਦਿੰਦਾ ਹੈ। HEX CSS, ਡਿਜ਼ਾਈਨ ਟੂਲ ਅਤੇ brand guidelines ਵਿੱਚ ਡਿਫ਼ਾਲਟ ਹੁੰਦਾ ਹੈ।
- ਸਿੰਟੈਕਸ:
- #RRGGBB
- ਰੈਂਜ:
- 00–FF ਪ੍ਰਤੀ ਚੈਨਲ
- ਸਭ ਤੋਂ ਵਧੀਆ ਲਈ:
- CSS, design handoff, brand guidelines
HSL ਤੋਂ HEX ਹਵਾਲਾ ਸਾਰਣੀ
ਸਭ ਤੋਂ ਆਮ CSS ਰੰਗ, HSL ਤੋਂ HEX ਵਿੱਚ ਰੂਪਾਂਤਰਿਤ।
| ਰੰਗ | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |