ਮੁਫ਼ਤ ਚਿੱਤਰ ਰੰਗ ਪੈਲੇਟ ਐਕਸਟ੍ਰੈਕਟਰ

ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ

ਰੰਗ ਕੱਢਣਾ Canvas API ਤੋਂ ਪੜ੍ਹੇ ਕੱਚੇ pixel ਡਾਟੇ 'ਤੇ ਲਾਗੂ ਹੱਥ ਨਾਲ ਲਿਖੇ k-means++ clustering ਐਲਗੋਰਿਦਮ ਨਾਲ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦਾ ਹੈ — ਕੋਈ ਸਰਵਰ, ਕੋਈ ਤੀਜੀ-ਧਿਰ ਲਾਇਬ੍ਰੇਰੀ ਨਹੀਂ। ਉਹੀ ਚਿੱਤਰ ਅਤੇ ਰੰਗ-ਗਿਣਤੀ ਸੈਟਿੰਗਾਂ ਹਮੇਸ਼ਾ ਉਹੀ ਪੈਲੇਟ ਦਿੰਦੀਆਂ ਹਨ ਕਿਉਂਕਿ ਐਲਗੋਰਿਦਮ Math.random ਦੀ ਥਾਂ ਨਿਸ਼ਚਿਤ pseudo-random number generator (mulberry32) ਵਰਤਦਾ ਹੈ।

1. 1
   Canvas pixel ਡਾਟਾ ਪੜ੍ਹਦਾ ਹੈ

   ਚਿੱਤਰ ਇੱਕ off-screen HTML Canvas element 'ਤੇ ਬਣਾ ਕੇ ਸਭ ਤੋਂ ਲੰਬੇ ਪਾਸੇ ਵੱਧ ਤੋਂ ਵੱਧ 200px ਤੱਕ ਛੋਟਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। Canvas API ਦਾ getImageData() ਹਰ pixel ਕੱਚੇ RGBA bytes ਵਜੋਂ ਵਾਪਸ ਕਰਦਾ ਹੈ, ਅਤੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਪਾਰਦਰਸ਼ੀ pixels (alpha < 128) clustering ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਛੱਡ ਦਿੱਤੇ ਜਾਂਦੇ ਹਨ।
2. 2
   k-means++ pixels ਦੇ ਸਮੂਹ ਬਣਾਉਂਦਾ ਹੈ

   ਇੱਕ k-means++ initializer centroids ਨੂੰ ਨਿਸ਼ਚਿਤ ਢੰਗ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ, ਫਿਰ ਐਲਗੋਰਿਦਮ 20 ਵਾਰ ਤੱਕ ਦੁਹਰਾਉਂਦਾ ਹੈ: ਹਰ pixel RGB ਸਪੇਸ ਵਿੱਚ ਆਪਣੇ ਨੇੜਲੇ centroid ਨੂੰ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਫਿਰ centroids ਸਾਰੇ ਦਿੱਤੇ pixels ਦੀ ਔਸਤ ਵਜੋਂ ਮੁੜ ਗਿਣੇ ਜਾਂਦੇ ਹਨ। ਇੱਕੋ hex ਮੁੱਲ ਵਿੱਚ ਸਮਾ ਜਾਣ ਵਾਲੇ ਸਮੂਹ ਜੋੜ ਦਿੱਤੇ ਜਾਂਦੇ ਹਨ, ਇਸ ਲਈ ਨਤੀਜੇ ਦਾ ਹਰ swatch ਵਿਲੱਖਣ ਹੁੰਦਾ ਹੈ।
3. 3
   ਹਰ-ਰੰਗ metadata ਗਿਣਿਆ ਜਾਂਦਾ ਹੈ

   ਹਰ centroid HEX, HSL, ਅਤੇ ਕੁੱਲ pixels ਵਿੱਚ ਉਸਦੇ ਹਿੱਸੇ (ਪ੍ਰਤੀਸ਼ਤ) ਵਿੱਚ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ। WCAG relative luminance ਮਿਆਰੀ ਫ਼ਾਰਮੂਲੇ ਮੁਤਾਬਕ ਗਿਣੀ ਜਾਂਦੀ ਹੈ, ਅਤੇ ਕਾਲੇ ਅਤੇ ਚਿੱਟੇ ਦੋਵਾਂ ਦੇ ਮੁਕਾਬਲੇ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਹਰ swatch ਦੇ ਨਾਲ ਦਿਖਾਏ ਜਾਂਦੇ ਹਨ।
4. 4
   ਐਕਸਪੋਰਟ ਅਤੇ eyedropper ਆਉਟਪੁੱਟ

   ਪੈਲੇਟ CSS custom properties, SCSS variables, Tailwind config snippet, ਜਾਂ JSON ਵਜੋਂ ਕਾਪੀ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ। ਕਲਿੱਕ-ਕਰਕੇ-ਚੁੱਕੋ eyedropper ਝਲਕ 'ਤੇ ਤੁਹਾਡੇ ਕਲਿੱਕ ਨੂੰ ਪੂਰੇ-ਰੈਜ਼ੋਲਿਊਸ਼ਨ canvas 'ਤੇ ਸਹੀ ਸਰੋਤ pixel ਨਿਰਦੇਸ਼ਾਂਕਾਂ ਨਾਲ ਜੋੜਦਾ ਹੈ, ਉਸ pixel ਦਾ ਰੰਗ ਇੱਕ ਵੱਖਰੀ ਚੁਣੇ-ਰੰਗਾਂ ਦੀ ਸੂਚੀ ਵਿੱਚ ਜੋੜਦੇ ਹੋਏ। Canvas toBlob() ਰਾਹੀਂ PNG ਪੈਲੇਟ ਪੱਟੀ ਡਾਊਨਲੋਡ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ।

ਸੰਬੰਧਿਤ ਟੂਲ