मुफ़्त रंग पैलेट एक्सट्रैक्टर

Colour Extraction Actually कैसे काम करता है

Images से computer-extracted palettes दो classic algorithms में से एक से आती हैं:

• K-means clustering (Lloyd 1982; underlying idea MacQueen 1967 और Forgy 1965 तक जाती है)। Colour cube में K random colour centroids pick करें, हर pixel को उसके nearest centroid को assign करें, centroids को उनके assigned pixels के mean के रूप में recompute करें, और centroids के रुकने तक repeat करें। K final centroids आपके dominant colours हैं।
• Median-cut quantisation (Heckbert, SIGGRAPH 1982)। Colour cube को उसके widest dimension के साथ recursively split करें, हर बार pixel population को दो equal halves में divide करते हुए। K splits के बाद आपके पास K boxes हैं, और हर box का average colour एक palette entry है। यह popular Color Thief JavaScript library द्वारा use किया जाने वाला algorithm है, और historically indexed-colour images (GIF, PNG palettes) को millions of colours से 256 तक reduce करने का तरीका।

दोनों methods एक much larger pixel population से representative colours का एक small set produce करती हैं, लेकिन वे different trade-offs करती हैं। K-means ज़्यादा flexible है लेकिन random seed और outliers के प्रति sensitive है। Median-cut deterministic है और colour space coverage balance करता है लेकिन narrow regions को over-represent कर सकता है जहां image बहुत सारे pixels spend करती है।

RGB Distance क्यों Lie करती है

एक subtle लेकिन important caveat: plain RGB space में clustering ऐसे results देती है जो human perception से हमेशा match नहीं करते। RGB एक hardware-driven coordinate system है, इसमें distances primaries के बीच electronic differences को correspond करती हैं, perceived colour differences को नहीं। दो greens जो आपको identical लगती हैं, उनकी RGB distance एक green और red से बड़ी हो सकती है जो obviously different दिखते हैं।

ज़्यादा accurate clustering CIELAB (CIE 1976 L*a*b*) में होती है, एक colour space specifically designed ताकि space में Euclidean distance दो colours के बीच human-perceived difference को approximate करे। Adobe Color और कई design-system swatch generators जैसे modern palette tools CIELAB या CIELCH में cluster करते हैं। CSS Color Module Level 4 (W3C, 2022) ने lab(), lch(), oklab(), और oklch() functions add किए web designers को directly इन spaces expose करने के लिए, useful जब आप perceptually uniform palette interpolation चाहते हैं। CSS spec w3.org/TR/css-color-4 पर live है।

HEX, RGB, HSL: सही Format Choose करना

तीनों notations same colour describe करती हैं; ये उसे लिखने के different ways हैं।

• HEX: #RRGGBB। Six hex digits, दो प्रति channel, range 00-FF (0-255)। Web का most common format। Compact, copy-pasteable, हर जगह supported।
• RGB: rgb(255, 128, 0)। Same numbers, different notation। CSS alpha के लिए rgba(255, 128, 0, 0.5) add करता है।
• HSL: hsl(30, 100%, 50%)। Hue (0-360°), saturation (0-100%), lightness (0-100%)। Designers के लिए reason करना आसान, «same hue, more saturation» HSL में एक single number tweak है लेकिन RGB में multi-channel adjustment।
• OKLCH: oklch(70% 0.15 30)। HSL का modern, perceptually uniform alternative। Same lightness number का मतलब hues भर में same perceived brightness, जो HSL famously गलत करता है (yellow 50% lightness पर blue से बहुत ज़्यादा bright दिखती है)।

अधिकांश web work के लिए, HEX copy करें। Programmatic palette manipulation के लिए (10% lighten करना, hue को 30° shift करना), HSL या OKLCH के लिए reach करें जहां operation cleaner है।

Dominant क्यों ≠ Useful

«Most-frequent colours» extraction naive होने पर अक्सर disappoint करती है। Blue sky के against एक person का portrait statistically sky pixels और skin tones द्वारा dominated होता है, भले ही visually interesting colour story subject की clothing में हो। Large neutral backgrounds वाली photos neutral को «dominant» colour के रूप में पाती हैं। Heavy JPEG compression ऐसे artefact colours introduce करती है जो real होने की तरह cluster होते हैं।

Sophisticated palette tools saturation द्वारा, dominant background के against contrast द्वारा, perceived «interestingness» द्वारा, या इस बारे में weight करते हैं कि human-vision-inspired Itti-Koch saliency models द्वारा detected salient regions में कोई colour appear होता है या नहीं। अधिकांश online tools, इस सहित, simple frequency-based clustering use करते हैं, fast, predictable, और एक photo, illustration, या artwork से palette pull करने के common case के लिए good enough।

सामान्य उपयोग के मामले

• Brand-matching: एक designer client के logo या hero photograph से palette pull करता है बाकी site को visually coherent रखने के लिए।
• Mood boards: inspiration images (movie stills, photographs, paintings) से palettes extract करना colour exploration शुरू करने का fastest way है।
• Tailwind / design-token configs: extracted palette को CSS custom properties या Tailwind colors map में बदलना।
• Slide-deck colour matching: corporate logo से accent colours pick करना ताकि deck clash न करे।
• E-commerce product photography: product card में swatch के रूप में हर product का dominant colour use करना।
• Generative art & data viz: extracted palettes को shader code, D3 charts, या Processing sketches में feed करना।
• Print design: inspiration imagery से colours का starting set लेना, फिर print-design software में उन्हें Pantone या CMYK से match करना।

Browser-Only क्यों Matters करता है यहां

Photos अक्सर picture से ज़्यादा carry करती हैं। EXIF metadata में photo कहां ली गई उसके GPS coordinates, camera serial number, shooter का नाम, और software fingerprints हो सकते हैं। Screenshots में confidential UI, draft text, या pre-release branding हो सकती है। Personal photos में ऐसे लोगों के faces हो सकते हैं जिन्होंने कहीं upload होने के लिए consent नहीं दिया। Palette extract करने के लिए actually उन सब की ज़रूरत नहीं होती (इसे बस pixel data चाहिए) और जब browser इसे locally analyse कर सकता है तो पूरी image server पर भेजने का कोई अच्छा reason नहीं है।

यह tool image को off-screen Canvas पर draw करता है, getImageData() के माध्यम से pixel data sample करता है, clustering run करता है, और result show करता है। Page से कुछ भी नहीं जाता; tab close होने के बाद image रखी नहीं जाती। Server-side palette tools (Adobe Color, Coolors का image picker, और कई अन्य) पूरी file upload करते हैं। Privacy वह trade-off है जो आप हर एक के साथ कर रहे हैं।

Output के साथ काम करना

एक extracted palette मिलने के बाद, आप typically:

1. Curate करें। एक 5-colour automatic extraction में usually 3 useful colours, 1 redundant near-duplicate, और 1 muddy mid-tone होती है। Muddy वाला drop करें और de-duplicate करें।
2. Roles assign करें। एक colour को primary brand colour, एक को secondary, एक या दो को accents, और एक को neutral designate करें। Modern brand systems अक्सर neutral background, two anchors, और एक accent चाहते हैं, five tops।
3. Light/dark scales generate करें। हर anchor colour से, hover states, backgrounds, और tinted variants के लिए 9-11 shades derive करें। Tailwind के colour scale generator या Refactoring UI के palette section जैसे tools के पास well-known recipes हैं।
4. Contrast test करें। Text-and-background pairs को WCAG contrast checker के माध्यम से run करें, Level AA के लिए normal body text के लिए 4.5:1 और large या bold UI components के लिए 3:1 चाहिए।
5. Colour vision deficiency के लिए test करें। Roughly 12 में से 1 पुरुष को किसी न किसी form का colour blindness होता है। इसे lock in करने से पहले palette को CVD simulator के माध्यम से run करें।

सामान्य गलतियाँ

1. सभी पांच extracted colours को unedited brand palette के रूप में use करना। Auto-extraction एक starting point है, finished palette नहीं। Curate करें।
2. Heavily compressed JPEG से colours pick करना। Compression artefacts false palette entries produce करते हैं। हो सके तो high-quality source से शुरू करें।
3. Complex photo पर first run को trust करना। Different K values (colours की संख्या) dramatically different results produce करते हैं, 5, 8, और 12 try करें यह देखने के लिए कि आपकी image के लिए कौन सा size सही लगता है।
4. बिना यह consider किए कि वह किस page पर रहेगा, photo से palette build करना। एक muted, photo-derived palette isolation में great दिख सकती है लेकिन white site background पर disappear हो जाती है। In-context test करें।
5. Contrast को ignore करना। Beautiful palettes sometimes 2:1 contrast पर text को background के साथ pair करती हैं और WCAG fail करती हैं। हमेशा check करें।
6. यह भूलना कि «dominant» का मतलब «background» हो सकता है। एक portrait में most-frequent colour अक्सर subject की clothing नहीं बल्कि subject के पीछे की wall होती है।

अधिक Frequently Asked Questions

क्या यह transparent PNGs पर काम करेगा?

हां। Transparent pixels को sampling के दौरान typically skip किया जाता है ताकि palette केवल visible content को reflect करे। यदि आप transparent background और coloured logo वाला PNG upload करते हैं, तो extracted palette logo के colours होंगे, कोई polluted neutral नहीं।

Animated GIFs के बारे में क्या?

Browser का image decoder typically Canvas API को first frame देता है, इसलिए palette frame zero से extract होती है। सभी frames spanning palette के लिए, आपको हर frame अलग से extract करनी होगी और results combine करने होंगे, यह एक static-image tool से परे है।

क्या original image कहीं upload होती है?

नहीं। Image आपके browser में एक Canvas element में load होती है, pixel data getImageData() के माध्यम से read होती है, और clustering आपके device पर JavaScript में run होती है। Image bytes किसी भी server पर transmit नहीं होती। यह matters करता है जब source में EXIF GPS, faces, confidential UIs के screenshots, या unreleased product imagery हो।

Runs के बीच मेरी palette क्यों बदलती है?

K-means अपने initial random centroid placement पर depend करता है, इसलिए same image पर दो runs slightly different local minima पर land कर सकते हैं। Differences usually subtle होते हैं (एक near-duplicate जो similar shade से replace होती है) लेकिन visible। Median-cut deterministic है, same input, same output हर बार। यदि tool कभी same image के लिए noticeably different palettes दे, तो वह randomised algorithm use कर रहा है और यह expected behaviour है।

क्या मैं extracted colours commercially use कर सकता हूं?

Colours themselves copyrightable नहीं हैं; HEX values pixels के बारे में facts हैं। लेकिन जिस image से आपने extract किया वह हो सकती है, किसी और की photograph से palette pull करना inspiration के लिए ठीक है, लेकिन photo या उसके trademarked elements reproduce करना एक अलग question है। Colours match करें, imagery नहीं।

यह colour picker tool से कैसे differ करता है?

एक colour picker उस specific pixel location पर colour read करता है जिसे आप point करते हैं। यह tool पूरी image analyse करता है और most representative palette return करता है। Different jobs: pickers «यह exact colour क्या है?» के लिए हैं, palette extractors «overall dominant colours कौन से हैं?» के लिए हैं। दोनों का designer के workflow में अपना place है।