इमेज कलर पिकर

Image यहां upload या paste करें और जिस pixel को चाहें उस पर click करें — tool HTML canvas से उसे पढ़ता है और तुरंत HEX, RGB और HSL values दिखाता है, hex code clipboard पर copy हो जाता है। Magnifying loupe cursor के आसपास के individual pixels दिखाता है ताकि आप बिल्कुल सही pixel hit कर सकें। किसी भी point पर server पर upload नहीं होता; सब कुछ HTML5 canvas API का उपयोग करके browser में चलता है। इससे यह instant, private और page load होने के बाद offline भी usable बन जाता है। Anti-aliased text या logo edges जैसे hard-to-click areas के लिए, click करने से पहले browser के built-in zoom से zoom in करें।

इस free browser-based eyedropper का उपयोग करें: image drop करें, pixel click करें, और code copy करें। कुछ install नहीं करना, कोई sign-up नहीं। Adobe Photoshop या Illustrator के विपरीत — दोनों ₹1,600/महीने से शुरू होते हैं — यह tool पूरी तरह free है। macOS Digital Color Meter या Windows PowerToys Color Picker के विपरीत, यह image का dominant palette भी auto-extract करता है, इसलिए आपको हर एक को individually click करने की बजाय एक साथ सभी main colors मिल जाते हैं। imagecolorpicker.com सबसे popular dedicated alternative है, लेकिन यह आपकी file server पर upload करता है; यह tool नहीं करता।

ये एक ही रंग को दो तरीकों से encode करते हैं। HEX red/green/blue को तीन hexadecimal pairs के रूप में लिखता है (#FF5733) और CSS और web design में standard है; RGB तीन 0-255 decimal numbers का उपयोग करता है — rgb(255, 87, 51) — जो image editors और code में common है। दोनों के बीच convert करना lossless है, और यह tool आपके click किए हर pixel के लिए दोनों दिखाता है। HEX का उपयोग CSS या Tailwind classes लिखते समय करें; RGB का उपयोग canvas, WebGL, या image-processing code के साथ करते समय करें जो numeric channels expect करता है। दोनों formats एक ही sRGB color point describe करते हैं।

HSL किसी रंग को Hue (0-360°), Saturation और Lightness से describe करता है — जो रंगों को adjust करने के लिए अधिक intuitive है। आप hue बदले बिना किसी रंग को lighter या less saturated बना सकते हैं। CSS hsl() को natively support करता है, इसलिए designers अक्सर palette बनाते समय HSL में काम करते हैं: tint के लिए Lightness ऊपर करें, shade के लिए नीचे। Picker हर pixel के लिए HEX, RGB और HSL दिखाता है, इसलिए आप जो भी आपके workflow के लिए चाहिए वो copy कर सकते हैं। Figma, Sketch या Adobe XD के लिए, HEX usually सबसे तेज़ paste format है; Tailwind या CSS custom properties के लिए, HEX या HSL दोनों अच्छे से काम करते हैं।

बस photo load करें — dominant palette अपने आप appear हो जाती है। Tool image के pixels को clusters में quantize करता है और उन्हें frequency से rank करता है, HEX codes के साथ swatches के रूप में आठ सबसे dominant colors return करता है। किसी भी swatch को copy करने के लिए click करें, या एक साथ पूरी palette copy करें। Adobe Color और Canva का palette generator यही काम करते हैं लेकिन account चाहिए; Coolors.co photos से palettes generate कर सकता है लेकिन image अपने server पर भेजता है। यहां palette extraction पूरी तरह browser में चलती है — कुछ upload नहीं, कोई account नहीं, और कोई ads नहीं जो workflow interrupt करे।

Image browser में एक HTML canvas element पर draw होती है; click करने पर getImageData API के जरिए उस pixel की red, green और blue values पढ़ी जाती हैं और उन्हें HEX, RGB और HSL में convert किया जाता है। Canvas locally run होता है, इसलिए कोई server involved नहीं है। Magnifier loupe एक दूसरे canvas element का उपयोग करता है जो cursor के आसपास के pixel region को zoom in करता है, जिससे आप anti-aliased text, logo edges या photographic gradients जैसे fine detail वाली images पर भी exactly सही pixel target कर सकते हैं।

इस tool पर, हां — image सिर्फ browser की memory में load होती है और कहीं भी transmit नहीं होती। आप इसे browser के Network tab में verify कर सकते हैं: page load होने के बाद कोई requests नहीं बनती। यह unpublished designs, client logos और private photos के लिए important है। कई upload-based pickers — जिनमें imagecolorpicker.com और कुछ Canva features शामिल हैं — आपकी file server पर भेजते हैं और temporarily store करते हैं। यह tool सब कुछ locally process करता है, इसलिए आपकी files आपके device पर रहती हैं और tab बंद होने पर चली जाती हैं।

हां — 'Pick from screen' button EyeDropper API (Chrome और Edge में supported) का उपयोग करता है जो display पर कहीं भी किसी भी pixel को sample करता है, जिसमें दूसरी windows, apps और browser tabs शामिल हैं। Pick किया गया रंग image picks की तरह उसी HEX/RGB/HSL panel और history में आता है। API के बिना browsers (Safari, Firefox) के लिए, PrtScn या Cmd+Shift+4 से screen screenshot करें, फिर Ctrl+V से directly इस page में paste करें — file save करने की ज़रूरत नहीं। यह video frames, browser में PDFs और किसी भी live web page को cover करता है।

Logo save या screenshot करें और यहां drop करें, फिर brand color click करें और HEX copy करें। या screenshot बिल्कुल skip करें: screen eyedropper button का उपयोग करके live website को directly sample करें जबकि वह दूसरे tab में open हो। यह browser DevTools का उपयोग करके computed styles inspect करने से तेज़ है, खासकर जब color CSS property में नहीं बल्कि SVG या image asset में embedded हो। Pick history आपके पिछले 16 रंग रखती है, इसलिए design tool पर switch करने से पहले कई sources से पूरी brand palette collect कर सकते हैं।

अधिकांश usable palettes में 3–6 रंग होते हैं: एक dominant color, एक या दो secondaries, और accents। Extractor आठ dominant swatches return करता है ताकि आप उस subset को choose कर सकें जो सबसे अच्छा काम करे — individual swatches copy करें या mood board के लिए पूरा set लें। Practice में, चार रंग एक solid starting point है: एक primary, एक secondary, एक neutral और एक accent। Stripe और Linear जैसी companies के design systems एक ही hues के कई lightness और saturation variants के साथ compact palettes का उपयोग करते हैं, न कि कई distinct colors के।

CSS और web work के लिए HEX (codebases और design tools में सबसे common), screens और canvas code के लिए RGB/RGBA, palette building और systematic tweaking के लिए HSL, और print output के लिए CMYK। Figma, Sketch और Adobe XD सभी HEX, RGB और HSL support करते हैं। यह picker हर pixel के लिए HEX, RGB और HSL दिखाता है ताकि आप बिना किसी manual conversion के जो भी workflow के लिए चाहिए वो copy कर सकें। अगर print work के लिए CMYK भी चाहिए, तो HEX को free online converter में paste करें — canvas API नatively CMYK output नहीं करता।

Pixel click करने से उसका HEX automatically clipboard पर copy हो जाता है। हर value row, history swatch और palette chip भी click-to-copy है — बस value या swatch click करें और copy हो जाता है। Pick history आपके पिछले 16 रंग रखती है ताकि दूसरी image पर switch करने से पहले एक image से कई shades sequence में collect कर सकें। Click करने से पहले values देखने के लिए swatches पर hover करें। अगर पूरी palette list के रूप में चाहिए, तो 'Copy all' का उपयोग करें जिससे सभी आठ hex codes comma-separated मिलते हैं, CSS variables या design doc में paste के लिए तैयार।

हां — frame या page screenshot करें और Ctrl+V से picker में paste करें (file save करने की ज़रूरत नहीं), या screen eyedropper का उपयोग करके directly sample करें जबकि PDF या video play हो रहा हो। Browser में open PDFs के लिए, screen eyedropper usually सबसे तेज़ है: Chrome में PDF open करें, 'Pick from screen' click करें, फिर जो रंग चाहिए उस पर click करें। Video के लिए, सबसे accurate sample के लिए पहले frame पर pause करें।

Browsers images render करते समय color-profile (ICC) conversion apply कर सकते हैं, और screenshots आपके display का color profile inherit करते हैं। Picker actual sRGB pixel values report करता है जैसा browser render करता है — वे values जो आप CSS में use करेंगे — जो web work के लिए correct है। अगर Photoshop या Figma के मुकाबले mismatch दिख रहा है, तो check करें कि आपका display sRGB को calibrate है और image file में embedded color profile है जो match करता है। Logo assets के लिए, designer को ideally extraction पर rely करने की बजाय directly brand HEX values provide करने चाहिए।

imagecolorpicker.com सबसे ज़्यादा use किया जाने वाला alternative है — यह single-pixel picking और palette extraction offer करता है, लेकिन आपकी image server पर upload करता है और ads दिखाता है। Adobe Color photos से palettes extract करता है लेकिन Adobe account चाहिए और images Adobe के servers पर जाती हैं; यह zoom loupe के साथ single-pixel picking भी नहीं देता। Canva का color picker Canva editor में built-in है और सिर्फ Canva project के अंदर images पर काम करता है। macOS Digital Color Meter और Windows PowerToys Color Picker screen sampling के लिए काम करते हैं लेकिन files से palettes extract नहीं करते। यह tool एकमात्र free, fully client-side option है जिसमें zoom loupe, screen eyedropper, 16-color history और palette extraction एक साथ हैं — कोई account नहीं, कोई ads नहीं, कोई upload नहीं।