ImageColorPicker.com

HEX ਤੋਂ HSL ਰੂਪਾਂਤਰਕ

ਕੋਈ ਵੀ HEX ਰੰਗ HSL ਵਿੱਚ ਬਦਲੋ — ਤੁਰੰਤ ਅਤੇ ਮੁਫ਼ਤ

#2ECC71

ਕੋਈ ਵੀ ਰੰਗ ਦਾ ਮੁੱਲ ਪੇਸਟ ਕਰੋ — ਅਸੀਂ ਫਾਰਮੈਟ ਤੇਜ਼ੀ ਨਾਲ ਪਹਿਚਾਣ ਲੈਂਦੇ ਹਾਂ।

HSL ਨਤੀਜਾ
ਹਿਊ
145°
ਸੈਚੁਰੇਸ਼ਨ
63%
ਚਮਕ
49%

ਇਹ ਰੰਗ ਹਰ ਫਾਰਮੈਟ ਵਿੱਚ

CMYK ਪ੍ਰੋਫਾਈਲ: Coated FOGRA39 (ਯੂਰਪ ਲਈ Photoshop ਦੀ ਮੂਲ ਸੈਟਿੰਗ)

HSL ਰੰਗ ਨੂੰ ਉਸੇ ਤਰ੍ਹਾਂ ਦੱਸਦਾ ਹੈ ਜਿਵੇਂ ਲੋਕ ਉਸ ਬਾਰੇ ਗੱਲ ਕਰਦੇ ਹਨ: ਕਿਹੜਾ hue, ਕਿੰਨਾ ਰੰਗੀਨ, ਕਿੰਨਾ ਚਮਕਦਾਰ। HEX ਕੋਡ ਨੂੰ HSL ਵਿੱਚ ਬਦਲਣਾ ਰੰਗ ਨੂੰ ਉਸ ਰੂਪ ਵਿੱਚ ਲਿਆਉਣ ਦਾ ਸਭ ਤੋਂ ਤੇਜ਼ ਤਰੀਕਾ ਹੈ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਆਸਾਨੀ ਨਾਲ ਬਦਲ ਸਕਦੇ ਹੋ: ਇਸ ਨੂੰ ਚਮਕਾਉਣਾ, ਮਿਊਟ ਕਰਨਾ ਜਾਂ ਇਸ ਤੋਂ ਪੂਰਾ ਸਕੇਲ ਬਣਾਉਣਾ।

HEX ਤੋਂ HSL ਰੂਪਾਂਤਰਕ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ

  1. HEX ਕੋਡ ਨੂੰ RGB ਵਿੱਚ ਬਦਲੋ ਅਤੇ ਹਰ ਚੈਨਲ ਨੂੰ 255 ਨਾਲ ਵੰਡੋ, ਤਾਂ ਜੋ ਤਿੰਨੋ 0 ਅਤੇ 1 ਦੇ ਵਿਚਕਾਰ ਹੋ ਜਾਣ.
  2. ਤਿੰਨੋ ਮੁੱਲਾਂ ਵਿੱਚੋਂ ਸਭ ਤੋਂ ਵੱਡਾ ਅਤੇ ਸਭ ਤੋਂ ਛੋਟਾ ਲੱਭੋ. ਉਹਨਾਂ ਦਾ ਔਸਤ lightness L ਹੁੰਦਾ ਹੈ.
  3. ਉਹਨਾਂ ਦੋਹਾਂ ਦੇ ਵਿਚਕਾਰ ਦਾ ਫਰਕ saturation S ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ: ਚਮਕੀਲੇ ਰੰਗਾਂ ਲਈ ਇਸ ਨੂੰ (2 − max − min) ਨਾਲ ਵੰਡੋ, ਜਾਂ ਹਨੇਰੇ ਰੰਗਾਂ ਲਈ (max + min) ਨਾਲ.
  4. ਜਿਹੜਾ ਚੈਨਲ ਸਭ ਤੋਂ ਵੱਧ ਹੈ ਉਹ hue H ਤੈਅ ਕਰਦਾ ਹੈ: ਲਾਲ 0°, ਹਰਾ 120°, ਨੀਲਾ 240°। ਬਾਕੀ ਦੋ ਚੈਨਲ ਉਸ ਹਿੱਸੇ ਦੇ ਅੰਦਰ hue ਦੀ ਥਾਂ ਤੈਅ ਕਰਦੇ ਹਨ।

ਕਾਮਯਾਬ ਉਦਾਹਰਨ

HEX #2ECC71=HSL hsl(145, 63%, 49%)

ਗਣਿਤ ਸਹੀ ਹੈ, ਪਰ HSL ਮੁੱਲ ਆਮ ਤੌਰ 'ਤੇ ਪੂਰੇ ਡਿਗਰੀਆਂ ਅਤੇ ਪ੍ਰਤੀਸ਼ਤਾਂ ਤੱਕ ਗੋਲ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। ਇਸ ਲਈ ਵਾਪਸ ਬਦਲਣ 'ਤੇ ਨਤੀਜਾ ਅਸਲ ਤੋਂ ਇੱਕ ਜਾਂ ਦੋ RGB ਕਦਮ ਦੂਰ ਹੋ ਸਕਦਾ ਹੈ। ਇਹ ਅਸਲ ਵਿੱਚ ਦਿਖਦਾ ਨਹੀਂ, ਪਰ ਜੇ ਤੁਸੀਂ ਰੰਗਾਂ ਨੂੰ ਵਾਰ-ਵਾਰ ਬਦਲਦੇ ਹੋ ਤਾਂ ਇਹ ਜਾਣਨ ਯੋਗ ਹੈ।

HEX ਅਤੇ HSL ਦੀ ਵਿਆਖਿਆ

HEX ਕੀ ਹੈ?

HEX ਕੋਡ ਇੱਕ ਛੇ-ਅੰਕੀ ਹੇਕਸਾਡੈਸੀਮਲ ਨੰਬਰ ਹੁੰਦਾ ਹੈ ਜੋ # ਦੇ ਨਾਲ ਇੱਕ ਰੰਗ ਦਾ ਲਾਲ, ਹਰਾ ਅਤੇ ਨੀਲਾ ਚੈਨਲ ਸਟੋਰ ਕਰਦਾ ਹੈ। ਹਰ ਜੋੜਾ ਅੰਕ ਇੱਕ ਚੈਨਲ ਦਰਸਾਉਂਦਾ ਹੈ, 00 (ਕੋਈ ਨਹੀਂ) ਤੋਂ FF (ਪੂਰਾ) ਤੱਕ, ਜੋ ਇੱਕ ਛੋਟੀ ਨੋਟੇਸ਼ਨ ਵਿੱਚ RGB ਵਾਂਗ 16.7 ਮਿਲੀਅਨ ਰੰਗ ਦਿੰਦਾ ਹੈ। HEX CSS, ਡਿਜ਼ਾਈਨ ਟੂਲਾਂ ਅਤੇ ਬ੍ਰਾਂਡ ਗਾਈਡਲਾਈਨਾਂ ਵਿੱਚ ਡਿਫ਼ਾਲਟ ਹੁੰਦਾ ਹੈ।

ਸਿੰਟੈਕਸ:
#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 ਵਿੱਚ ਰੂਪਾਂਤਰਿਤ।

ਰੰਗHEXHSL
black#000000hsl(0, 0%, 0%)
white#FFFFFFhsl(0, 0%, 100%)
red#FF0000hsl(0, 100%, 50%)
lime#00FF00hsl(120, 100%, 50%)
blue#0000FFhsl(240, 100%, 50%)
yellow#FFFF00hsl(60, 100%, 50%)
orange#FFA500hsl(39, 100%, 50%)
teal#008080hsl(180, 100%, 25%)
purple#800080hsl(300, 100%, 25%)
gray#808080hsl(0, 0%, 50%)

ਹੋਰ ਰੰਗ ਰੂਪਾਂਤਰਕ

ਅਕਸਰ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ

HEX ਕੋਡ ਨੂੰ RGB ਵਿੱਚ ਬਦਲੋ ਅਤੇ ਹਰ ਚੈਨਲ ਨੂੰ 255 ਨਾਲ ਵੰਡੋ, ਤਾਂ ਜੋ ਤਿੰਨੋ 0 ਅਤੇ 1 ਦੇ ਵਿਚਕਾਰ ਹੋ ਜਾਣ. ਤਿੰਨੋ ਮੁੱਲਾਂ ਵਿੱਚੋਂ ਸਭ ਤੋਂ ਵੱਡਾ ਅਤੇ ਸਭ ਤੋਂ ਛੋਟਾ ਲੱਭੋ. ਉਹਨਾਂ ਦਾ ਔਸਤ lightness L ਹੁੰਦਾ ਹੈ. ਉਹਨਾਂ ਦੋਹਾਂ ਦੇ ਵਿਚਕਾਰ ਦਾ ਫਰਕ saturation S ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ: ਚਮਕੀਲੇ ਰੰਗਾਂ ਲਈ ਇਸ ਨੂੰ (2 − max − min) ਨਾਲ ਵੰਡੋ, ਜਾਂ ਹਨੇਰੇ ਰੰਗਾਂ ਲਈ (max + min) ਨਾਲ. ਜਿਹੜਾ ਚੈਨਲ ਸਭ ਤੋਂ ਵੱਧ ਹੈ ਉਹ hue H ਤੈਅ ਕਰਦਾ ਹੈ: ਲਾਲ 0°, ਹਰਾ 120°, ਨੀਲਾ 240°। ਬਾਕੀ ਦੋ ਚੈਨਲ ਉਸ ਹਿੱਸੇ ਦੇ ਅੰਦਰ hue ਦੀ ਥਾਂ ਤੈਅ ਕਰਦੇ ਹਨ।

ਗਣਿਤ ਸਹੀ ਹੈ, ਪਰ HSL ਮੁੱਲ ਆਮ ਤੌਰ 'ਤੇ ਪੂਰੇ ਡਿਗਰੀਆਂ ਅਤੇ ਪ੍ਰਤੀਸ਼ਤਾਂ ਤੱਕ ਗੋਲ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। ਇਸ ਲਈ ਵਾਪਸ ਬਦਲਣ 'ਤੇ ਨਤੀਜਾ ਅਸਲ ਤੋਂ ਇੱਕ ਜਾਂ ਦੋ RGB ਕਦਮ ਦੂਰ ਹੋ ਸਕਦਾ ਹੈ। ਇਹ ਅਸਲ ਵਿੱਚ ਦਿਖਦਾ ਨਹੀਂ, ਪਰ ਜੇ ਤੁਸੀਂ ਰੰਗਾਂ ਨੂੰ ਵਾਰ-ਵਾਰ ਬਦਲਦੇ ਹੋ ਤਾਂ ਇਹ ਜਾਣਨ ਯੋਗ ਹੈ।

HSL ਰੰਗ ਨੂੰ hue (color wheel 'ਤੇ 0–360°), saturation (ਕਿੰਨਾ ਰੰਗੀਨ, 0–100%) ਅਤੇ lightness (ਕਿੰਨੀ ਰੋਸ਼ਨੀ, 0–100%) ਵਿੱਚ ਵੰਡਦਾ ਹੈ। ਕਿਉਂਕਿ ਹਰ ਹਿੱਸਾ ਲੋਕਾਂ ਦੇ ਰੰਗ ਵੇਰਵੇ ਨਾਲ ਮਿਲਦਾ ਹੈ, HSL ਟਿੰਟਸ, ਸ਼ੇਡਸ ਅਤੇ ਲਗਾਤਾਰ palettes ਬਣਾਉਣ ਲਈ ਸਭ ਤੋਂ ਆਸਾਨ ਫਾਰਮੈਟ ਹੈ — ਹੱਥ ਨਾਲ ਜਾਂ ਕੋਡ ਵਿੱਚ।

ਹਾਂ। ਇਨਪੁਟ ਦੇ ਨੇੜੇ ਵਿਚਲਾ swap ਬਟਨ ਤੁਹਾਨੂੰ HSL ਤੋਂ HEX ਕਨਵਰਟਰ 'ਤੇ ਲੈ ਜਾਂਦਾ ਹੈ, ਜੋ ਠੀਕ ਓਹੀ ਤਰੀਕਾ ਵਰਤਦਾ ਹੈ। ਦੋਹਾਂ ਦਿਸ਼ਾਵਾਂ ਲਈ ਫਾਰਮੂਲਾ ਇੱਕੋ ਹੈ, ਸਿਰਫ ਉਲਟ ਤਰੀਕੇ ਨਾਲ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

ਜਦੋਂ ਤੁਹਾਨੂੰ ਕਿਸੇ ਰੰਗ ਦੇ ਰੂਪ ਬਣਾਉਣੇ ਹੋਣ, ਤਾਂ HSL 'ਤੇ ਜਾਓ। H ਅਤੇ S ਨੂੰ ਇੱਕੋ ਰੱਖ ਕੇ ਸਿਰਫ਼ L ਬਦਲਣ ਨਾਲ ਇਕਸਾਰ ਟਿੰਟ ਅਤੇ ਸ਼ੇਡ ਸਕੇਲ ਮਿਲਦਾ ਹੈ, ਜੋ HEX ਵਿੱਚ ਹੱਥੀਂ ਬਣਾਉਣਾ ਕਾਫ਼ੀ ਔਖਾ ਹੈ।