ImageColorPicker.com

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

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

#3398DB

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

H
S
L
HEX ਨਤੀਜਾ

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

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

HSL ਵਿੱਚ ਰੰਗ ਚੁਣਨਾ ਆਰਾਮਦਾਇਕ ਹੁੰਦਾ ਹੈ, ਪਰ ਸਟਾਈਲਸ਼ੀਟਾਂ, ਡਿਜ਼ਾਈਨ ਹੈਂਡਆਫ ਅਤੇ ਬ੍ਰਾਂਡ ਦਸਤਾਵੇਜ਼ ਅਜੇ ਵੀ HEX 'ਤੇ ਚੱਲਦੇ ਹਨ। ਇਹ ਕਨਵਰਟਰ ਇਸ ਫ਼ਰਕ ਨੂੰ ਭਰਦਾ ਹੈ ਅਤੇ ਕਿਸੇ ਵੀ hue, saturation ਅਤੇ lightness ਸੁਮੇਲ ਲਈ ਛੇ ਅੰਕਾਂ ਵਾਲਾ ਕੋਡ ਦਿੰਦਾ ਹੈ।

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

  1. saturation ਅਤੇ lightness ਨੂੰ ਭਾਗਾਂ ਵਿੱਚ ਬਦਲੋ: 60% becomes 0.6.
  2. chroma C = (1 − |2L − 1|) × S ਗਣਨਾ ਕਰੋ — ਇਹ ਦੱਸਦਾ ਹੈ ਕਿ ਰੰਗ ਕਿੰਨਾ ਸਲੇਟੀ (grey) ਤੋਂ ਦੂਰ ਹੈ.
  3. hue ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਉਸ chroma ਨੂੰ ਲਾਲ, ਹਰੇ ਅਤੇ ਨੀਲੇ ਚੈਨਲਾਂ 'ਤੇ ਰੱਖੋ, ਫਿਰ ਤਿੰਨੋ ਨੂੰ L − C/2 ਨਾਲ shift ਕਰੋ.
  4. ਹਰ ਚੈਨਲ ਨੂੰ 255 ਨਾਲ ਗੁਣਾ ਕਰੋ, ਗੋਲ ਕਰੋ, ਅਤੇ ਦੋ ਹੇਕਸਡੈਸੀਮਲ ਅੰਕਾਂ ਵਜੋਂ ਲਿਖੋ.

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

HSL hsl(204, 70%, 53%)=HEX #3398DB

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

ਸਿੰਟੈਕਸ:
#RRGGBB
ਰੈਂਜ:
00–FF ਪ੍ਰਤੀ ਚੈਨਲ
ਸਭ ਤੋਂ ਵਧੀਆ ਲਈ:
CSS, design handoff, brand guidelines

HSL ਤੋਂ HEX ਹਵਾਲਾ ਸਾਰਣੀ

ਸਭ ਤੋਂ ਆਮ CSS ਰੰਗ, HSL ਤੋਂ HEX ਵਿੱਚ ਰੂਪਾਂਤਰਿਤ।

ਰੰਗHSLHEX
blackhsl(0, 0%, 0%)#000000
whitehsl(0, 0%, 100%)#FFFFFF
redhsl(0, 100%, 50%)#FF0000
limehsl(120, 100%, 50%)#00FF00
bluehsl(240, 100%, 50%)#0000FF
yellowhsl(60, 100%, 50%)#FFFF00
orangehsl(39, 100%, 50%)#FFA600
tealhsl(180, 100%, 25%)#007F80
purplehsl(300, 100%, 25%)#80007F
grayhsl(0, 0%, 50%)#808080

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

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

saturation ਅਤੇ lightness ਨੂੰ ਭਾਗਾਂ ਵਿੱਚ ਬਦਲੋ: 60% becomes 0.6. chroma C = (1 − |2L − 1|) × S ਗਣਨਾ ਕਰੋ — ਇਹ ਦੱਸਦਾ ਹੈ ਕਿ ਰੰਗ ਕਿੰਨਾ ਸਲੇਟੀ (grey) ਤੋਂ ਦੂਰ ਹੈ. hue ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਉਸ chroma ਨੂੰ ਲਾਲ, ਹਰੇ ਅਤੇ ਨੀਲੇ ਚੈਨਲਾਂ 'ਤੇ ਰੱਖੋ, ਫਿਰ ਤਿੰਨੋ ਨੂੰ L − C/2 ਨਾਲ shift ਕਰੋ. ਹਰ ਚੈਨਲ ਨੂੰ 255 ਨਾਲ ਗੁਣਾ ਕਰੋ, ਗੋਲ ਕਰੋ, ਅਤੇ ਦੋ ਹੇਕਸਡੈਸੀਮਲ ਅੰਕਾਂ ਵਜੋਂ ਲਿਖੋ.

ਗੋਲ ਕਰਨਾ ਸਿਰਫ਼ ਆਖ਼ਰੀ ਕਦਮ ਵਿੱਚ ਇੱਕ ਵਾਰ ਹੁੰਦਾ ਹੈ, ਜਦੋਂ ਹਰ ਚੈਨਲ 0 ਤੋਂ 255 ਦੇ ਪੂਰੇ ਅੰਕ 'ਤੇ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ। ਨਤੀਜਾ ਤੁਹਾਡੇ HSL ਇਨਪੁੱਟ ਦਾ ਸਭ ਤੋਂ ਨੇੜਲਾ HEX ਕੋਡ ਹੁੰਦਾ ਹੈ ਅਤੇ ਆਮ ਤੌਰ 'ਤੇ ਉਹੀ ਹੁੰਦਾ ਹੈ ਜੋ ਕੋਈ ਡਿਜ਼ਾਈਨ ਟੂਲ ਦਿਖਾਉਂਦਾ ਹੈ।

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

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

ਪੈਲੇਟ HSL ਵਿੱਚ ਬਣਾਓ, ਫਿਰ HEX ਐਕਸਪੋਰਟ ਕਰੋ. ਪੈਲੇਟ ਆਪਣੀ ਲਾਜਿਕ (ਉਹੀ hue, stepped lightness) ਰੱਖਦੀ ਹੈ — ਜਦਕਿ ਦਿੱਤਾ ਗਿਆ ਕੋਡ ਉਸ ਫਾਰਮੈਟ ਵਿੱਚ ਹੁੰਦਾ ਹੈ ਜੋ ਡਿਵੈਲਪਰ ਉਮੀਦ ਕਰਦੇ ਹਨ.