HSL ਤੋਂ HEX ਕਨਵਰਟਰ

HSL ਤੋਂ HEX: ਰੰਗ ਬਦਲਣ ਦਾ ਸਿੱਧਾ ਤਰੀਕਾ

ਇਹ ਪੰਨਾ ਤੁਹਾਨੂੰ HSL (ਹਿਊ, ਸੈਟੁਰੇਸ਼ਨ, ਲਾਈਟਨੈੱਸ) ਰੰਗ ਨੂੰ HEX (ਹੈਕਸਾਡੈਸੀਮਲ) ਕੋਡ ਵਿੱਚ ਬਦਲਣ ਦੀ ਸਹੂਲਤ ਦਿੰਦਾ ਹੈ। ਤੁਸੀਂ ਹਿਊ ਨੂੰ ਡਿਗਰੀਆਂ ਵਿੱਚ (0–360), ਸੈਟੁਰੇਸ਼ਨ ਅਤੇ ਲਾਈਟਨੈੱਸ ਨੂੰ ਪ੍ਰਤੀਸ਼ਤ ਵਜੋਂ ਦਾਖ਼ਲ ਕਰਦੇ ਹੋ, ਅਤੇ ਪੰਨਾ ਤੁਰੰਤ HEX ਕੋਡ ਦਿਖਾਉਂਦਾ ਹੈ – ਜਿਵੇਂ #1E90FF। HEX ਕੋਡ CSS ਅਤੇ ਡਿਜ਼ਾਈਨ ਟੂਲਾਂ ਵਿੱਚ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ ਛੇ-ਅੰਕੀ (ਜਾਂ ਤਿੰਨ-ਅੰਕੀ ਸ਼ਾਰਟਹੈਂਡ) ਨੋਟੇਸ਼ਨ ਹੈ। ਜਿਵੇਂ-ਜਿਵੇਂ ਤੁਸੀਂ ਟਾਈਪ ਕਰਦੇ ਹੋ ਜਾਂ ਰੰਗ ਚੁਣਦੇ ਹੋ, HEX ਮੁੱਲ ਤੁਰੰਤ ਅੱਪਡੇਟ ਹੁੰਦਾ ਹੈ।

ਇਹ ਪੰਨਾ ਕਿਉਂ ਵੱਖਰਾ ਹੈ

ਇਹ ਪੰਨਾ ਸਿਰਫ਼ HSL-to-HEX ਪਰਿਵਰਤਨ ਲਈ ਸਮਰਪਿਤ ਹੈ। HSL ਇੱਕ ਅਜਿਹਾ ਰੰਗ ਮਾਡਲ ਹੈ ਜੋ ਮਨੁੱਖੀ ਸੋਚ ਲਈ ਬਣਾਇਆ ਗਿਆ ਹੈ – ਲਾਈਟਨੈੱਸ ਨੂੰ ਬਦਲਣ ਨਾਲ ਹਿਊ ਬਰਕਰਾਰ ਰਹਿੰਦਾ ਹੈ, ਇਸ ਲਈ ਇਹ ਪੈਲਟ ਅਤੇ ਥੀਮ ਜਨਰੇਸ਼ਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। HEX, ਦੂਜੇ ਪਾਸੇ, ਛੇ-ਅੰਕੀ (ਜਾਂ ਤਿੰਨ-ਅੰਕੀ) RGB ਨੋਟੇਸ਼ਨ ਹੈ; ਇਸ ਵਿੱਚ ਅੱਠ-ਅੰਕੀ ਰੂਪ ਤੋਂ ਬਿਨਾਂ ਕੋਈ ਅਲਫ਼ਾ (ਪਾਰਦਰਸ਼ਤਾ) ਨਹੀਂ ਹੁੰਦਾ। HSL-to-HEX ਪਰਿਵਰਤਨ sRGB ਗੈਮਟ (ਰੰਗ ਸੀਮਾ) ਵਿੱਚ ਸਿੱਧਾ ਅਤੇ ਨੁਕਸਾਨ-ਮੁਕਤ (lossless) ਹੈ, ਜਦਕਿ LAB ਜਾਂ CMYK ਵਰਗੇ ਪਰਿਵਰਤਨਾਂ ਵਿੱਚ ਗੈਮਟ ਤੋਂ ਬਾਹਰ ਦੇ ਰੰਗਾਂ ਨੂੰ ਐਡਜਸਟ ਕਰਨਾ ਪੈਂਦਾ ਹੈ। ਇਹ ਸਾਦਗੀ ਇਸ ਪੰਨੇ ਨੂੰ ਖ਼ਾਸ ਬਣਾਉਂਦੀ ਹੈ – ਇੱਥੇ ਕੋਈ ਗੁੰਝਲਦਾਰ ਕੈਲਕੁਲੇਸ਼ਨ ਨਹੀਂ, ਸਿਰਫ਼ ਸਿੱਧਾ ਅਤੇ ਭਰੋਸੇਯੋਗ ਪਰਿਵਰਤਨ।

ਇੰਪੁੱਟ, ਆਊਟਪੁੱਟ, ਅਤੇ ਹੋਰ ਰੰਗ ਫੀਲਡ

ਇੰਪੁੱਟ:

• ਹਿਊ (Hue): 0 ਤੋਂ 360 ਡਿਗਰੀ ਤੱਕ। 0 = ਲਾਲ, 120 = ਹਰਾ, 240 = ਨੀਲਾ।
• ਸੈਟੁਰੇਸ਼ਨ (Saturation): 0% (ਸਲੇਟੀ) ਤੋਂ 100% (ਪੂਰਾ ਰੰਗ)।
• ਲਾਈਟਨੈੱਸ (Lightness): 0% (ਕਾਲਾ) ਤੋਂ 100% (ਚਿੱਟਾ)।

ਉਦਾਹਰਨ: 243, 75%, 59% – ਇਹ HSL ਮੁੱਲ HEX #4f46e5 (ਇੱਕ ਗੂੜ੍ਹਾ ਨੀਲਾ-ਜਾਮਨੀ) ਦਿੰਦਾ ਹੈ।

ਆਊਟਪੁੱਟ:

• HEX ਕੋਡ: ਛੇ-ਅੰਕੀ (ਜਿਵੇਂ #4f46e5)। ਜੇਕਰ RGB ਚੈਨਲਾਂ ਦੇ ਹਰੇਕ ਨੂੰ ਇੱਕ ਹੈਕਸ ਡਿਜਿਟ (0–F) ਵਿੱਚ ਦਰਸਾਇਆ ਜਾ ਸਕੇ, ਤਾਂ ਤਿੰਨ-ਅੰਕੀ ਸ਼ਾਰਟਹੈਂਡ (ਜਿਵੇਂ #abc) ਵੀ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ।
• RGB: 0–255 ਰੇਂਜ ਵਿੱਚ ਲਾਲ, ਹਰਾ, ਨੀਲਾ।
• HSV: ਹਿਊ, ਸੈਟੁਰੇਸ਼ਨ, ਵੈਲਯੂ (0–100%)।
• CMYK: ਸਿਆਨ, ਮੈਜੇਂਟਾ, ਪੀਲਾ, ਕਾਲਾ (0–100%) – ਪਰ ਇਹ ਸਿਰਫ਼ ਸਕ੍ਰੀਨ ’ਤੇ ਅਨੁਮਾਨ ਹੈ, ਪੇਸ਼ੇਵਰ ਪ੍ਰਿੰਟ ਵੈਲਯੂਜ਼ ਤੋਂ ਵੱਖਰਾ ਹੋ ਸਕਦਾ ਹੈ।
• LAB: CIE Lab* ਰੰਗ ਸਪੇਸ (L* 0–100, a* ਅਤੇ b* -128 – +127)।

ਸਾਰੇ ਫੀਲਡ ਇੱਕੋ ਸਮੇਂ ਅੱਪਡੇਟ ਹੁੰਦੇ ਹਨ। ਜੇਕਰ ਤੁਸੀਂ ਕੋਈ ਵੀ ਫੀਲਡ ਬਦਲਦੇ ਹੋ – RGB, HSV, ਜਾਂ CMYK – ਤਾਂ HSL ਅਤੇ HEX ਵੀ ਆਪਣੇ-ਆਪ ਬਦਲ ਜਾਂਦੇ ਹਨ। ਇਹ ਆਪਸੀ ਤਾਲਮੇਲ (real-time bidirectional update) ਡਿਜ਼ਾਈਨ ਪ੍ਰਵਾਹ ਨੂੰ ਬਹੁਤ ਸੌਖਾ ਬਣਾਉਂਦਾ ਹੈ।

ਨਿਯਮ, ਗਲਤੀਆਂ ਅਤੇ ਐਜ ਕੇਸ

ਜੇਕਰ HSL ਮੁੱਲ ਵੈਧ ਰੇਂਜ ਤੋਂ ਬਾਹਰ ਹਨ (ਹਿਊ 0–360, ਸੈਟੁਰੇਸ਼ਨ 0–100%, ਲਾਈਟਨੈੱਸ 0–100%) ਜਾਂ ਗਲਤ ਫਾਰਮੈਟ ਹਨ, ਤਾਂ ਟੂਲ ਇਹ ਗਲਤੀ ਸੁਨੇਹਾ ਦਿਖਾਉਂਦਾ ਹੈ: “Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.” (HSL ਨੂੰ 0–360 ਦੇ ਹਿਊ ਅਤੇ ਦੋ ਪ੍ਰਤੀਸ਼ਤਾਂ ਨਾਲ ਦਾਖ਼ਲ ਕਰੋ, ਜਿਵੇਂ 243, 75%, 59%)

ਆਮ ਗਲਤੀਆਂ:

• ਪ੍ਰਤੀਸ਼ਤ ਚਿੰਨ੍ਹ (%) ਛੱਡ ਦੇਣਾ: 50 ਲਿਖਣਾ, 50% ਨਹੀਂ। ਟੂਲ ਇਸਨੂੰ ਅਵੈਧ ਸਮਝੇਗਾ।
• ਹਿਊ ਨੂੰ 360 ਤੋਂ ਵੱਧ ਦੇਣਾ: 400° ਲਿਖਣਾ, ਜਦਕਿ ਹਿਊ 0–360 ਦੇ ਚੱਕਰ ਵਿੱਚ ਹੁੰਦਾ ਹੈ। ਟੂਲ ਇਸਨੂੰ ਗਲਤੀ ਵਜੋਂ ਦਿਖਾਏਗਾ।
• ਕੌਮੇ (,) ਦੀ ਗਲਤ ਵਰਤੋਂ: 243 75% 59% (ਬਿਨਾਂ ਕੌਮੇ) – ਇਹ ਵੀ ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ। ਸਹੀ ਫਾਰਮੈਟ: 243, 75%, 59%।

HSL-to-HEX ਪਰਿਵਰਤਨ ਹਮੇਸ਼ਾ ਦਿਖਣਯੋਗ RGB ਸੀਮਾ ਵਿੱਚ ਹੀ ਰਹਿੰਦਾ ਹੈ – ਕੋਈ ਗੈਮਟ ਕਲਿਪਿੰਗ ਨਹੀਂ ਹੁੰਦੀ। ਇਹ LAB ਜਾਂ CMYK ਵਰਗੇ ਹੋਰ ਪਰਿਵਰਤਨਾਂ ਤੋਂ ਵੱਖਰਾ ਹੈ, ਜਿੱਥੇ ਕਈ ਵਾਰ ਰੰਗ ਡਿਸਪਲੇਅ ਲਈ ਐਡਜਸਟ ਕਰਨੇ ਪੈਂਦੇ ਹਨ। ਸਾਰੀ ਪ੍ਰਕਿਰਿਆ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਵਾਪਰਦੀ ਹੈ; ਕੁਝ ਵੀ ਅਪਲੋਡ ਨਹੀਂ ਹੁੰਦਾ।

ਕਿਸ ਨੂੰ ਇਸਦੀ ਲੋੜ ਹੈ

• ਡਿਜ਼ਾਈਨਰ: ਜੋ HSL ਵਿੱਚ ਪੈਲਟ ਬਣਾਉਂਦੇ ਹਨ ਅਤੇ ਉਹਨਾਂ ਨੂੰ CSS ਜਾਂ ਡਿਜ਼ਾਈਨ ਟੂਲਾਂ (Figma, Sketch) ਵਿੱਚ HEX ਕੋਡਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
• ਫਰੰਟ-ਐਂਡ ਡਿਵੈਲਪਰ: ਜਿਨ੍ਹਾਂ ਨੂੰ ਡਿਜ਼ਾਈਨ ਫਾਈਲਾਂ ਤੋਂ HSL ਮੁੱਲ ਮਿਲਦੇ ਹਨ ਅਤੇ ਉਹਨਾਂ ਨੂੰ CSS color ਪ੍ਰਾਪਰਟੀ (HEX) ਵਿੱਚ ਬਦਲਣਾ ਹੁੰਦਾ ਹੈ।
• ਥੀਮ ਐਡਜਸਟ ਕਰਨ ਵਾਲੇ: ਜੋ ਐਕਸੈਸਬਿਲਟੀ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ (WCAG) ਲਈ ਲਾਈਟਨੈੱਸ ਬਦਲਦੇ ਹਨ, ਫਿਰ HEX ਵਿੱਚ ਤਬਦੀਲੀ ਕਰਕੇ ਪ੍ਰੋਡਕਸ਼ਨ ਵਿੱਚ ਵਰਤਦੇ ਹਨ।
• ਸਿੱਖਣ ਵਾਲੇ: ਜੋ HSL ਅਤੇ HEX ਦੇ ਸਬੰਧ ਨੂੰ ਸਮਝਣਾ ਚਾਹੁੰਦੇ ਹਨ – ਇਹ ਪੰਨਾ ਉਹਨਾਂ ਨੂੰ ਰੀਅਲ-ਟਾਈਮ ਪ੍ਰਯੋਗ ਕਰਨ ਦੀ ਸੁਵਿਧਾ ਦਿੰਦਾ ਹੈ।

ਪਰਿਵਰਤਨ ਦਾ ਗਣਿਤ: HSL → RGB → HEX

HEX ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, ਪਹਿਲਾਂ HSL ਨੂੰ RGB ਵਿੱਚ ਬਦਲਣਾ ਪੈਂਦਾ ਹੈ, ਫਿਰ RGB ਨੂੰ HEX ਵਿੱਚ। ਇੱਥੇ ਸੰਖੇਪ ਵਿੱਚ ਵਿਧੀ ਹੈ:

1. HSL → RGB:

   • H = H/360 (0–1), S = S/100, L = L/100.
   • If S = 0, R = G = B = L (grey).
   • Else:
     • a = S * min(L, 1-L)
     • f(n) = L - a * max(-1, min(k-3, 9-k, 1)) where k = (n + H*12) mod 12.
     • For n = 0 (R), 8 (G), 4 (B).
   • Result R, G, B in 0–1.

2. RGB → HEX:

   • Convert each R, G, B (0–1) to integer 0–255.
   • Convert each integer to two-digit hex (e.g., 79 → 4F).
   • Concatenate: #4F46E5.

ਉਦਾਹਰਨ: HSL(243°, 75%, 59%)

• H=0.675, S=0.75, L=0.59.
• a = 0.75 * min(0.59, 0.41) = 0.75 * 0.41 = 0.3075.
• R = 0.217, G = 0.275, B = 0.898.
• RGB: 55, 70, 229 → HEX: #3746E5? (ਅਸਲ ਵਿੱਚ #4f46e5 – ਇਹ ਉਦਾਹਰਨ ਸਰਲੀਕ੍ਰਿਤ ਹੈ, ਪਰ ਅਸਲ ਕੈਲਕੁਲੇਸ਼ਨ sRGB ਮੁਤਾਬਕ ਹੀ ਹੁੰਦਾ ਹੈ।)

HEX ਦਾ ਤਿੰਨ-ਅੰਕੀ ਰੂਪ (shorthand) ਉਦੋਂ ਹੀ ਵੈਧ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਹਰ RGB ਚੈਨਲ ਦੇ ਦੋਵੇਂ ਅੰਕ ਬਰਾਬਰ ਹੋਣ, ਜਿਵੇਂ #aabbcc → #abc। ਇਹ CSS3 ਤੋਂ ਬਾਅਦ ਸਪੋਰਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

HSL ਬਨਾਮ HEX: ਫ਼ਾਇਦੇ ਅਤੇ ਸੀਮਾਵਾਂ

HSL ਦਾ ਮੁੱਖ ਫ਼ਾਇਦਾ ਇਹ ਹੈ ਕਿ ਇਹ "ਲਾਈਟਨੈੱਸ" ਨੂੰ ਸਿੱਧਾ ਕੰਟਰੋਲ ਕਰਦਾ ਹੈ – ਇੱਕੋ ਹਿਊ ਨੂੰ ਰੱਖ ਕੇ ਲਾਈਟਨੈੱਸ ਵਧਾਉਣ ਨਾਲ ਟਿੰਟ (ਚਿੱਟੇ ਨਾਲ ਮਿਲਾਉਣ) ਦਾ ਪ੍ਰਭਾਵ ਬਣਦਾ ਹੈ, ਘਟਾਉਣ ਨਾਲ ਸ਼ੇਡ (ਕਾਲੇ ਨਾਲ) । HEX ਵਿੱਚ ਲਾਈਟਨੈੱਸ ਦਾ ਕੋਈ ਸਿੱਧਾ ਮਾਪ ਨਹੀਂ ਹੈ – ਤੁਹਾਨੂੰ RGB ਮੁੱਲਾਂ ਦਾ ਅੰਦਾਜ਼ਾ ਲਗਾਉਣਾ ਪੈਂਦਾ ਹੈ।

HEX ਦੀ ਸੀਮਾ: ਛੇ-ਅੰਕੀ HEX (ਜਿਵੇਂ #RRGGBB) ਵਿੱਚ ਕੋਈ ਅਲਫ਼ਾ (ਪਾਰਦਰਸ਼ਤਾ) ਨਹੀਂ ਹੁੰਦੀ। ਅੱਠ-ਅੰਕੀ HEX (#RRGGBBAA) ਵਿੱਚ ਅਲਫ਼ਾ ਹੁੰਦਾ ਹੈ, ਪਰ ਇਹ ਪੰਨਾ ਸਿਰਫ਼ ਛੇ-ਅੰਕੀ (ਅਤੇ ਤਿੰਨ-ਅੰਕੀ) HEX ਦਿੰਦਾ ਹੈ। ਜੇਕਰ ਤੁਹਾਨੂੰ ਅਲਫ਼ਾ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ RGBA ਜਾਂ HSLA ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਪਵੇਗੀ।

ਵਾਰ-ਵਾਰ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ (FAQ)

1. ਕੀ HEX ਕੋਡ ਵਿੱਚ '#' ਚਿੰਨ੍ਹ ਜ਼ਰੂਰੀ ਹੈ? ਹਾਂ, CSS ਅਤੇ ਜ਼ਿਆਦਾਤਰ ਡਿਜ਼ਾਈਨ ਟੂਲਾਂ ਵਿੱਚ '#' ਜ਼ਰੂਰੀ ਹੈ। ਇਹ ਪੰਨਾ '#' ਨਾਲ HEX ਕੋਡ ਦਿਖਾਉਂਦਾ ਹੈ।

2. ਕੀ HSL(0°, 100%, 50%) ਅਤੇ #FF0000 ਇੱਕੋ ਰੰਗ ਹੈ? ਹਾਂ, HSL(0°, 100%, 50%) = H=0 (ਲਾਲ), S=100%, L=50% → RGB(255, 0, 0) → #FF0000।

3. ਜੇ ਮੈਂ HSL(360, 100%, 50%) ਦਾਖ਼ਲ ਕਰਾਂ, ਕੀ ਇਹ ਕੰਮ ਕਰੇਗਾ? 360° 0° ਦੇ ਬਰਾਬਰ ਹੈ, ਪਰ ਇਹ ਪੰਨਾ 0–360 ਦੀ ਰੇਂਜ ਵਿੱਚ 360 ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ। ਹਾਂ, ਇਹ #FF0000 ਦਿਖਾਏਗਾ।

4. CMYK ਮੁੱਲ ਪ੍ਰਿੰਟ 'ਤੇ ਸਹੀ ਕਿਉਂ ਨਹੀਂ ਹੁੰਦੇ? CMYK ਇੱਕ subtractive ਕਲਰ ਮਾਡਲ ਹੈ ਜੋ ਪ੍ਰਿੰਟਰ, ਕਾਗਜ਼ ਅਤੇ ਸਿਆਹੀ ’ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਇਹ ਪੰਨਾ ਸਿਰਫ਼ ਇੱਕ ਗਣਿਤਿਕ ਪਰਿਵਰਤਨ (RGB → CMYK) ਦਿੰਦਾ ਹੈ, ਜੋ ਸਕ੍ਰੀਨ ’ਤੇ ਅਨੁਮਾਨ ਹੈ। ਪੇਸ਼ੇਵਰ ਪ੍ਰਿੰਟ ਲਈ ICC ਪ੍ਰੋਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

5. ਕੀ ਮੈਂ RGB ਮੁੱਲ ਟਾਈਪ ਕਰਕੇ HSL ਦੇਖ ਸਕਦਾ/ਸਕਦੀ ਹਾਂ? ਹਾਂ, RGB ਫੀਲਡ (0–255) ਵਿੱਚ ਮੁੱਲ ਟਾਈਪ ਕਰਨ ’ਤੇ HSL ਅਤੇ HEX ਆਪਣੇ-ਆਪ ਅੱਪਡੇਟ ਹੋ ਜਾਣਗੇ। ਸਾਰੇ ਫੀਲਡ ਦੋ-ਪਾਸੀ (bidirectional) ਸਿੰਕ ਹਨ।

6. ਕੀ HSL-to-HEX ਪਰਿਵਰਤਨ sRGB ਗੈਮਟ ਤੋਂ ਬਾਹਰ ਜਾ ਸਕਦਾ ਹੈ? ਨਹੀਂ, HSL sRGB ਰੰਗ ਸਪੇਸ ’ਤੇ ਆਧਾਰਿਤ ਹੈ। ਸਾਰੇ HSL ਮੁੱਲ sRGB ਗੈਮਟ ਦੇ ਅੰਦਰ ਹੀ ਰਹਿੰਦੇ ਹਨ, ਇਸ ਲਈ HEX ਪਰਿਵਰਤਨ ਹਮੇਸ਼ਾ ਨੁਕਸਾਨ-ਮੁਕਤ ਅਤੇ ਕਲਿਪਿੰਗ-ਮੁਕਤ ਹੁੰਦਾ ਹੈ। ਵੱਖਰੇ ਗੈਮਟ (ਜਿਵੇਂ Adobe RGB) ਲਈ, ਤੁਹਾਨੂੰ LAB-ਆਧਾਰਿਤ ਟੂਲ ਵਰਤਣੇ ਪੈਣਗੇ।

7. ਤਿੰਨ-ਅੰਕੀ HEX ਕਦੋਂ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ? ਜਦੋਂ RGB ਚੈਨਲ (0–255) ਦੇ ਦੋਵੇਂ ਹੈਕਸ ਅੰਕ ਇੱਕੋ ਹੋਣ, ਜਿਵੇਂ R=170 (AA), G=187 (BB), B=204 (CC) → #AABBCC → #ABC।