RGB ਤੋਂ HSL ਕਨਵਰਟਰ

RGB ਤੋਂ HSL ਪਰਿਵਰਤਕ: ਸਕ੍ਰੀਨ ਦੇ ਰੰਗਾਂ ਨੂੰ ਮਨੁੱਖੀ ਸਮਝ ਵਿੱਚ ਬਦਲਣਾ

ਇਹ ਪੰਨਾ ਕੀ ਕਰਦਾ ਹੈ

ਤੁਸੀਂ ਇੱਕ RGB ਰੰਗ ਦਰਜ ਕਰਦੇ ਹੋ — ਤਿੰਨ ਅੰਕ 0 ਤੋਂ 255 ਤੱਕ, ਜੋ ਦਿਖਾਉਂਦੇ ਹਨ ਕਿ ਡਿਸਪਲੇ ਲਾਲ, ਹਰੇ ਅਤੇ ਨੀਲੀ ਰੋਸ਼ਨੀ ਨੂੰ ਕਿਵੇਂ ਮਿਲਾਉਂਦਾ ਹੈ। ਤੁਰੰਤ ਤੁਹਾਨੂੰ HSL ਵਿੱਚ ਇਸਦਾ ਸਮਾਨ ਰੰਗ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ (ਹਿਊ 0–360° ਵਿੱਚ, ਸੰਤ੍ਰਿਪਤਾ ਅਤੇ ਹਲਕਾਪਣ ਪ੍ਰਤੀਸ਼ਤ ਵਿੱਚ)। ਇਹ ਟੂਲ ਰੰਗ ਨੂੰ ਦੂਜੇ ਆਮ ਫਾਰਮੈਟਾਂ ਵਿੱਚ ਵੀ ਦਿਖਾਉਂਦਾ ਹੈ: HEX, HSV, CMYK, LAB — ਤਾਂ ਜੋ ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਲਈ ਲੋੜੀਂਦਾ ਮੁੱਲ ਕਾਪੀ ਕਰ ਸਕੋ।

ਉਦਾਹਰਨ: 79, 70, 229 ਦਰਜ ਕਰਨ 'ਤੇ ਤੁਹਾਨੂੰ HSL 243°, 75%, 59% ਮਿਲਦਾ ਹੈ। ਹਰ ਖੇਤਰ ਨੂੰ ਸੰਪਾਦਿਤ ਕਰਨ ਨਾਲ ਬਾਕੀ ਸਾਰੇ ਖੇਤਰ ਆਪਣੇ ਆਪ ਅਪਡੇਟ ਹੋ ਜਾਂਦੇ ਹਨ। ਸਾਰੀਆਂ ਪਰਿਵਰਤਨਾਂ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਹੀ ਹੁੰਦੀਆਂ ਹਨ; ਤੁਸੀਂ ਜੋ ਵੀ ਦਰਜ ਕਰਦੇ ਹੋ ਉਹ ਕਿਤੇ ਅੱਪਲੋਡ ਨਹੀਂ ਹੁੰਦਾ।

RGB vs HSL: ਸਕ੍ਰੀਨ ਬਨਾਮ ਮਨੁੱਖੀ ਰੰਗ ਮਾਡਲ

RGB ਇੱਕ ਜੋੜਵਾਂ ਮਾਡਲ ਹੈ। ਲਾਲ, ਹਰਾ, ਨੀਲਾ — ਹਰ ਇੱਕ 0 (ਪੂਰੀ ਤਰ੍ਹਾਂ ਬੰਦ) ਤੋਂ 255 (ਪੂਰੀ ਤਾਕਤ) ਤੱਕ। ਸਕ੍ਰੀਨ 'ਤੇ ਇਹ ਤਿੰਨੇ ਰੋਸ਼ਨੀਆਂ ਮਿਲ ਕੇ ਇੱਕ ਰੰਗ ਬਣਾਉਂਦੀਆਂ ਹਨ। RGB 0-255 ਪੈਮਾਨਾ sRGB ਕਾਰਜਸਥਾਨ 'ਤੇ ਅਧਾਰਤ ਹੈ, ਜੋ ਕਿ ਕੰਪਿਊਟਰ ਸਕ੍ਰੀਨਾਂ ਲਈ ਸਭ ਤੋਂ ਵੱਧ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ ਰੰਗ ਸਪੇਸ ਹੈ। ਇਥੇ, 255,255,255 = ਸਫ਼ੈਦ, 0,0,0 = ਕਾਲਾ, ਅਤੇ 255,0,0 = ਸ਼ੁੱਧ ਲਾਲ।

ਪਰ RGB ਇੱਕ ਮਸਲਾ ਪੈਦਾ ਕਰਦਾ ਹੈ: ਕਿਸੇ ਇੱਕ ਚੈਨਲ ਨੂੰ ਬਦਲਣ 'ਤੇ ਅਕਸਰ ਮਹਿਸੂਸ ਕੀਤਾ ਜਾਣ ਵਾਲਾ ਰੰਗ (ਹਿਊ) ਬਦਲ ਜਾਂਦਾ ਹੈ। ਜੇ ਤੁਸੀਂ ਇੱਕ ਹੀ ਨੀਲੇ ਰੰਗ ਨੂੰ ਹਲਕਾ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ R, G, B ਸਭ ਵਿੱਚ ਤਬਦੀਲੀ ਕਰਨੀ ਪੈ ਸਕਦੀ ਹੈ — ਬਿਨਾਂ ਗਾਰੰਟੀ ਕਿ ਅਸਲੀ ਹਿਊ ਬਰਕਰਾਰ ਰਹੇ।

HSL (Hue, Saturation, Lightness) ਇਸ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਦਾ ਹੈ। Hue 0–360° ਦੇ ਚੱਕਰ 'ਤੇ ਰੰਗ ਦੀ ਕਿਸਮ (ਲਾਲ = 0°, ਹਰਾ = 120°, ਨੀਲਾ = 240°) ਦੱਸਦਾ ਹੈ। Saturation 0% (ਸਲੇਟੀ) ਤੋਂ 100% (ਸ਼ੁੱਧ) ਤੱਕ ਰੰਗ ਦੀ ਤੀਬਰਤਾ ਦਰਸਾਉਂਦਾ ਹੈ। Lightness 0% (ਕਾਲਾ) ਤੋਂ 100% (ਸਫ਼ੈਦ) ਤੱਕ ਸਮਝੀ ਜਾਣ ਵਾਲੀ ਚਮਕ ਦਿੰਦਾ ਹੈ। ਇਸ ਮਾਡਲ ਵਿੱਚ, ਤੁਸੀਂ ਸਿਰਫ Lightness ਨੂੰ ਬਦਲ ਕੇ ਇੱਕ ਰੰਗ ਦੇ tint (ਹਲਕੇ) ਜਾਂ shade (ਗੂੜ੍ਹੇ) ਬਣਾ ਸਕਦੇ ਹੋ, ਜਦੋਂ ਕਿ Hue ਸਥਿਰ ਰਹਿੰਦਾ ਹੈ।

RGB ↔ HSL ਪਰਿਵਰਤਨ ਦਾ ਗਣਿਤ

RGB ਤੋਂ HSL ਵਿੱਚ ਬਦਲਣ ਲਈ ਪਹਿਲਾਂ RGB ਮੁੱਲਾਂ ਨੂੰ 0–255 ਤੋਂ 0–1 ਵਿੱਚ ਸਧਾਰਨ ਕਰੋ:

R' = R/255, G' = G/255, B' = B/255

ਫਿਰ min, max ਅਤੇ delta (max – min) ਪਤਾ ਕਰੋ।

• Hue (h):

  • ਜੇ delta = 0: h = 0
  • ਜੇ max = R': h = ( (G' – B') / delta ) mod 6
  • ਜੇ max = G': h = ( (B' – R') / delta ) + 2
  • ਜੇ max = B': h = ( (R' – G') / delta ) + 4
  • h = h × 60° (ਜੇ h < 0, h = h + 360)

• Lightness (l): l = (max + min) / 2

• Saturation (s):

  • ਜੇ delta = 0: s = 0
  • ਨਹੀਂ: s = delta / (1 – |2l – 1|)

HSL ਤੋਂ RGB ਪਰਿਵਰਤਨ ਉਲਟਾ ਜਾਂਦਾ ਹੈ। ਪਹਿਲਾਂ saturation ਅਤੇ lightness ਤੋਂ chroma, second largest component, ਅਤੇ match ਕੱਢੇ ਜਾਂਦੇ ਹਨ, ਫਿਰ R, G, B 0–1 ਵਿੱਚ, ਫਿਰ 0–255 ਵਿੱਚ ਮੈਪ ਕੀਤੇ ਜਾਂਦੇ ਹਨ।

ਇਹ ਪੰਨਾ ਇਹ ਗਣਨਾ JavaScript ਵਿੱਚ instanteously ਕਰਦਾ ਹੈ। ਇਨਪੁਟ ਨਿਯਮ: RGB ਇਨਪੁਟ ਲਈ ਤਿੰਨ ਪੂਰਨ ਅੰਕ 0–255, ਕਾਮੇ ਜਾਂ ਸਪੇਸ ਨਾਲ ਵੱਖ ਕੀਤੇ। HSL ਇਨਪੁਟ ਹਿਊ 0–360, ਸੰਤ੍ਰਿਪਤਾ% ਅਤੇ ਹਲਕਾਪਣ% (ਜਿਵੇਂ 243, 75%, 59%)। ਗ਼ਲਤ ਇਨਪੁਟ 'ਤੇ ਗਾਹਕ-ਅਨੁਕੂਲ ਸੁਨੇਹਾ: "Enter RGB as three numbers 0–255, like 79, 70, 229." ਜਾਂ "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."

CMYK, LAB, HEX, HSV: ਅਨੁਮਾਨ ਅਤੇ ਹੱਦਾਂ

ਇਹ ਟੂਲ CMYK, LAB, HEX, HSV ਵੀ ਦਿਖਾਉਂਦਾ ਹੈ। CMYK ਇੱਕ ਸਕ੍ਰੀਨ-ਅਧਾਰਤ ਅਨੁਮਾਨ ਹੈ — ਪੇਸ਼ੇਵਰ ਪ੍ਰਿੰਟ ਲਈ ਇਸਦੀ ਵਰਤੋਂ ਪੁਸ਼ਟੀ ਕਰਨ ਤੋਂ ਬਿਨਾਂ ਨਾ ਕਰੋ। LAB (CIELAB) ਇੱਕ perceptually uniform ਮਾਡਲ ਹੈ, ਪਰ ਜੇ ਤੁਸੀਂ LAB ਜਾਂ CMYK ਰਾਹੀਂ ਅਜਿਹਾ ਮੁੱਲ ਦਰਜ ਕਰਦੇ ਹੋ ਜੋ RGB range (sRGB gamut) ਤੋਂ ਬਾਹਰ ਹੈ, ਤਾਂ ਟੂਲ ਇਸਨੂੰ ਨਜ਼ਦੀਕੀ ਦਿਖਾਉਣ ਯੋਗ RGB ਵਿੱਚ ਸਮਾਯੋਜਿਤ ਕਰਦਾ ਹੈ। ਇਸ ਮੈਪ ਕੀਤੇ ਰੰਗ ਨੂੰ ਵਾਪਸ LAB ਵਿੱਚ ਬਦਲਣ 'ਤੇ ਥੋੜ੍ਹਾ ਜਿਹਾ ਅੰਤਰ ਆ ਸਕਦਾ ਹੈ।

HEX (6-ਅੰਕ) RGB ਦਾ 16-ਆਧਾਰਿਤ ਸ਼ਾਰਟਹੈਂਡ ਹੈ। HSV (Hue, Saturation, Value) HSL ਨਾਲੋਂ ਵੱਖਰਾ ਹੈ: Value (ਚਮਕ) Lightness ਨਹੀਂ — HSV 100% 'ਤੇ ਸ਼ੁੱਧ ਰੰਗ, 0% 'ਤੇ ਕਾਲਾ। HSL Lightness 50% 'ਤੇ ਸ਼ੁੱਧ ਰੰਗ, 0% 'ਤੇ ਕਾਲਾ, 100% 'ਤੇ ਸਫ਼ੈਦ। ਤੁਸੀਂ ਦੋਵੇਂ ਇਕੱਠੇ ਵੇਖ ਕੇ ਆਪਣੀ ਲੋੜ ਅਨੁਸਾਰ ਚੁਣ ਸਕਦੇ ਹੋ।

HSL ਦਾ ਵਿਹਾਰਕ ਉਪਯੋਗ: UI, CSS, ਪੈਲੇਟਸ

UI/UX ਡਿਜ਼ਾਈਨਰ HSL ਨੂੰ ਪਸੰਦ ਕਰਦੇ ਹਨ ਕਿਉਂਕਿ Lightness ਨੂੰ Hue ਨੂੰ ਛੂਹੇ ਬਿਨਾਂ ਐਡਜਸਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਉਦਾਹਰਨ: ਕਿਸੇ ਬ੍ਰਾਂਡ ਦਾ HSL 243°, 75%, 59% ਰੰਗ। Lightness ਨੂੰ 30% 'ਤੇ ਲਿਆਉਣ 'ਤੇ ਗੂੜ੍ਹਾ shade, 80% 'ਤੇ ਲਿਆਉਣ 'ਤੇ ਹਲਕਾ tint — ਦੋਵਾਂ ਵਿੱਚ ਮੂਲ Hue 243° (ਨੀਲਾ-ਜਾਮਨੀ) ਸੁਰੱਖਿਅਤ ਰਹਿੰਦਾ ਹੈ।

CSS ਵਿੱਚ hsl() ਅਤੇ hsla() (alpha) ਫੰਕਸ਼ਨ ਸਿੱਧੇ ਕੰਮ ਕਰਦੇ ਹਨ: background-color: hsl(243, 75%, 59%);।

ਫਰੰਟ-ਐਂਡ ਡਿਵੈਲਪਰ RGB (ਜੋ ਡਿਜ਼ਾਈਨ ਟੂਲ ਤੋਂ ਮਿਲਦਾ ਹੈ) ਨੂੰ HSL ਵਿੱਚ ਬਦਲ ਕੇ dynamic style manipulation ਕਰ ਸਕਦੇ ਹਨ — JavaScript ਵਿੱਚ element.style.color = 'hsl(243, 75%, 59%)'।

Data visualisation ਡਿਜ਼ਾਈਨਰ HSL Lightness ਨੂੰ sequential color scales ਲਈ ਵਰਤਦੇ ਹਨ: ਉਹੀ Hue, ਪਰ Lightness 20% ਤੋਂ 80% ਤੱਕ ਵਧਾਉਣ ਨਾਲ gradient ਬਣਦਾ ਹੈ, ਜੋ ਮਾਤਰਾ (quantity) ਦਿਖਾਉਣ ਲਈ intuitive ਹੈ।

HSL ਅਤੇ Accessibility (WCAG)

WCAG (Web Content Accessibility Guidelines) contrast ratio 4.5:1 (ਛੋਟੇ text) ਜਾਂ 3:1 (ਵੱਡੇ text) ਮੰਗਦਾ ਹੈ। HSL Lightness ਨੂੰ adjust ਕਰਕੇ contrast ratio improve ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਬਿਨਾਂ color identity ਬਦਲੇ। ਮੰਨ ਲਓ, ਤੁਹਾਡਾ text color hsl(0, 0%, 20%) (ਗੂੜ੍ਹਾ ਸਲੇਟੀ) ਹੈ। Lightness 15% 'ਤੇ ਲੈ ਜਾਣ 'ਤੇ contrast ਵਧਦਾ ਹੈ। Hue 0° (ਲਾਲ) 'ਤੇ ਰੱਖ ਕੇ Lightness adjust ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਪਰ ਯਾਦ ਰੱਖੋ: HSL Lightness perceptual uniformity ਨਹੀਂ ਦਿੰਦਾ — 50% Lightness 'ਤੇ ਨੀਲਾ, ਲਾਲ, ਅਤੇ ਪੀਲਾ all seem differently bright। ਪੀਲਾ 50% Lightness 'ਤੇ 80% Lightness ਜਿੰਨਾ ਚਮਕਦਾਰ ਲੱਗ ਸਕਦਾ ਹੈ। ਇਸ ਲਈ LAB ਜਾਂ LCH (HCL) better perceptual models ਹਨ, ਪਰ HSL quick adjustments ਲਈ widespread practice ਹੈ।

HSL ਦੀਆਂ ਸੀਮਾਵਾਂ: perceptually uniform ਨਹੀਂ

HSL ਨੂੰ "human-centric" ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਪਰ ਇਹ perceptually uniform ਨਹੀਂ ਹੈ। ਇੱਕੋ Lightness (ਜਿਵੇਂ 50%) 'ਤੇ, ਵੱਧ-ਚਮਕ ਵਾਲੇ ਰੰਗ (ਪੀਲਾ) ਕਾਫ਼ੀ lightier, ਅਤੇ ਘੱਟ-ਚਮਕ (ਨੀਲਾ) much darker feel ਕਰਦੇ ਹਨ। ਇਸਦਾ ਕਾਰਨ: 인간 visual system colors ਨੂੰ luminance intensity 'ਤੇ process ਕਰਦਾ ਹੈ, ਜੋ HSL Lightness pure mathematical average (max+min)/2 'ਤੇ base ਨਹੀਂ ਕਰਦਾ।

ਵਧੀਆ perceptual uniformity ਲਈ CIELAB (LAB) ਜਾਂ CIELCh (LCH) ਵਰਤੋ। LAB lightness L* is specifically designed to match human perception. ਪਰ LAB coordinates complex are: a* (green-red) and b* (blue-yellow) — HSL ਜਿੰਨਾ intuitive not।

ਇਸੇ ਕਰਕੇ fact sheet says: "HSL is not perceptually uniform... alternative models like LAB are more uniform." ਜੇ ਤੁਸੀਂ accessibility-responsive color scales evolve ਕਰ ਰਹੇ ਹੋ, LAB better choice ਹੈ, ਪਰ HSL fast prototyping and CSS compatibility ਲਈ dominates.

FAQ (ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਪ੍ਰਸ਼ਨ)

1. RGB 0-255 vs 0-1 — ਕਿਹੜਾ use ਕਰਾਂ? RGB 0-255 standard sRGB integer format for web and design tools. 0-1 is normalized form for math. This page accepts 0-255 only. When you see HSL output, internal calculations use 0-1, but display is human-friendly.

2. HSL saturation 100% 'ਤੇ color pure kyun ਨਹੀਂ feel ਹੁੰਦਾ? HSL Saturation = 100% with Lightness = 50% gives pure color at maximum chroma. But if Lightness!= 50%, purity max not — e.g., Lightness 100% is white, Saturation irrelevant. Pure hue exactly at L=50%, S=100%.

3. CMYK output print 'ਤੇ exact match kyun nahi? This page's CMYK is a simple on-screen mathematical conversion (no ICC profile). Professional print uses device-specific profiles, paper type, ink — this estimate is for preview only. Verify with physical proof.

4. LAB input karke RGB range se bahar pahunch gaya, kya hua? Tool maps out-of-gamut color to nearest displayable RGB (clipping). Converting that RGB back to LAB may shift value. Not a bug — sRGB gamut is smaller than LAB's theoretical gamut.

5. CSS hsl() function 'ਚ Hue degrees, Saturation% 'ਚ? Haan. hsl(243, 75%, 59%) — degrees for Hue, percentage for Saturation and Lightness. Unit zero for Hue degrees (no deg symbol). But CSS3+ allows hsl(243deg, 75%, 59%). This page uses plain integer for Hue (0–360) for simplicity.

6. HSV aur HSL 'ch kya difference hai? HSV: Value (0-100%) = max(R,G,B) ka 0-100 scale. HSL: Lightness = (max+min)/2 * 100%. HSV is better for pigment-based selection; HSL is better for adjusting perceived brightness. Both have same Hue calculation.