استخراج کد رنگ HEX از تصویر

استخراج رنگ هگز از تصویر: ابزاری دقیق برای طراحان و توسعه‌دهندگان

این صفحه به شما امکان میدهد با انتخاب یک تصویر از دستگاه خود، رنگ هر پیکسل را به‌صورت کد هگزادسیمال (HEX)، همراه با مقادیر RGB و HSL مشاهده و کپی کنید. برخلاف صفحات مشابه که روی RGB یا HSL تمرکز دارند، این ابزار کد هگز را به‌عنوان خروجی اصلی ارائه می‌دهد—فرمتی فشرده و استاندارد برای CSS که نیازی به پرانتز یا علامت‌گذاری اضافی ندارد. هر گونه شفافیت (alpha) به‌صورت درصد جداگانه گزارش می‌شود، زیرا کد شش‌رقمی هگز ذاتاً کانال آلفا ندارد.

ویژگی‌های کلیدی و تمایز از ابزارهای مشابه

این صفحه از خانواده ابزارهای رنگ‌گیری است، اما تمرکز آن روی کد هگز است. در حالی که صفحات دیگر خروجی RGB یا HSL را برجسته می‌کنند، اینجا مقدار #1E90FF (یا خلاصه سه‌رقمی در صورت امکان) مستقیماً قابل کپی کردن درون color، background-color یا هر ویژگی CSS دیگر است. شفافیت پیکسل به‌صورت جداگانه نمایش داده می‌شود: مثلاً «Alpha 35% — این پیکسل نیمه‌شفاف است.» این بدان معناست که کد هگز همیشه شش�رقمی (یا سه‌رقمی) و بدون کانال آلفاست، و کاربر باید درصد شفافیت را جداگانه در نظر بگیرد.

نحوه کار با ابزار

ورودی‌ها و محدودیت‌های فایل

تصویر باید یکی از فرمت‌های زیر باشد: PNG، JPG، WebP، GIF، AVIF، HEIC. MIME type‌های مجاز شامل image/jpeg، image/png، image/webp، image/gif، image/avif، image/heic و image/heif هستند. اگر فایل پشتیبانی‌نشده‌ای بارگذاری شود، پیام «That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.» نمایش داده می‌شود. در صورت خرابی یا فرمت نامعتبر: «That image could not be opened. It may be corrupted or in an unsupported format.»

تصاویری که طولانی‌ترین ضلعشان بیش از 4096 پیکسل باشد، به‌طور خودکار کوچک‌سازی می‌شوند تا عملکرد ابزار بهینه بماند.

نمونه‌گیری رنگ و نمایش فوری

پس از بارگذاری تصویر، مقادیر رنگ و مختصات پیکسل مرکزی بلافاصله نمایش داده می‌شوند. با حرکت موس روی تصویر، رنگ هر پیکسل لحظه‌ای نمونه‌برداری می‌شود. یک نمای بزرگنمایی شده (magnifier) به شما کمک می‌کند پیکسل دقیق را انتخاب کنید—به‌ویژه در مناطق فشرده یا ضدآلیاس شده. کلیک روی تصویر، رنگ فعلی را به تاریخچه (پیک‌ها) اضافه می‌کند.

کنترل کامل با کیبورد

برای دسترسی و دقت بیشتر، می‌توانید از کلیدهای جهت‌دار (arrow keys) برای حرکت یک نشانگر ضربدری روی تصویر استفاده کنید. نگه‌داشتن Shift هم‌زمان با کلیدهای جهت‌دار، حرکت را ۱۰ پیکسل افزایش می‌دهد. فشردن Enter یا Space رنگ جاری را ذخیره می‌کند. این ویژگی برای کاربرانی که نمی‌توانند از موس استفاده کنند یا نیاز به انتخاب بسیار دقیق دارند، حیاتی است.

خروجی‌های دقیق و فرمت‌های رنگی

ابزار پس از نمونه‌برداری، اطلاعات زیر را نمایش می‌دهد:

• HEX: کد شش‌رقمی هگزادسیمال، مانند #FF5733. (اگر رنگ قابل نمایش با سه رقم باشد، مثلاً #F53، همچنان شش‌رقمی نمایش داده می‌شود مگر اینکه کاربر بخواهد.)
• RGB: مقادیر قرمز، سبز و آبی بین ۰ تا ۲۵۵.
• HSL: رنگ (Hue)، اشباع (Saturation) و روشنایی (Lightness) بر حسب درجه و درصد.
• شفافیت: اگر پیکسل نیمه‌شفاف باشد، درصد آلفا نمایش داده می‌شود: «Alpha 45% — this pixel is partly transparent.»
• مختصات و ابعاد: عرض و ارتفاع تصویر به پیکسل، و موقعیت (x, y) پیکسل فعلی.

کلیک روی هر یک از مقادیر HEX، RGB یا HSL باعث کپی شدن آن به کلیپ‌بورد می‌شود. اگر مرورگر دسترسی به کلیپ‌بورد را مسدود کند، پیام «Could not copy — your browser blocked clipboard access.» ظاهر می‌شود.

مثال عملی

فرض کنید تصویری با یک دکمه آبی دارید. با حرکت موس روی آن، می‌بینید:

• HEX: #1E90FF
• RGB: rgb(30, 144, 255)
• HSL: hsl(210, 100%, 56%)
• شفافیت: (گزارش نمی‌شود چون کاملاً مات است)

با کلیک، این رنگ به تاریخچه اضافه می‌شود و پیام «Saved #1E90FF to your picks.» نمایش می‌یابد.

قوانین و موارد خاص

تاریخچه رنگ‌های ذخیره شده

حداکثر ۱۲ رنگ می‌توان در تاریخچه ذخیره کرد. رنگ‌هایی با مقادیر RGB یکسان اما آلفای متفاوت (مثلاً rgba(255,0,0,0.5) و rgba(255,0,0,0.8)) به‌عنوان ورودی‌های جداگانه ثبت می‌شوند—چون در تصویر پیکسل‌های متفاوتی هستند. با کلیک روی یک نمونه (swatch) در تاریخچه، آن رنگ دوباره بارگذاری می‌شود تا بتوانید کد آن را کپی کنید.

رفتار با پیکسل‌های نیمه‌شفاف

ابزار دقیقاً مقدار ذخیره‌شده در تصویر را می‌خواند، نه آنچه پشت پیکسل قرار دارد. اگر تصویر حاوی لایه‌های شفاف باشد (مانند PNG با آلفا)، کانال آلفا به‌صورت درصد نمایش داده می‌شود. کد هگز همیشه شش‌رقمی بدون آلفاست؛ برای استفاده در CSS باید از rgba() یا hsla() با مقدار آلفای درصدی استفاده کنید.

تأثیر فشرده‌سازی و ضدآلیاس

تصاویر JPEG و بسیاری از اسکرین‌شات‌ها به دلیل فشرده‌سازی (compression) و ضدآلیاس (anti‑aliasing) دارای تغییرات جزئی در پیکسل‌های مجاور هستند. حتی یک ناحیه به‌ظاهر یکدست ممکن است دارای پیکسل‌های متفاوتی باشد. ابزار مقدار دقیق هر پیکسل را نمایش می‌دهد، بنابراین انتخاب نقطه‌ای که واقعاً نماینده رنگ مورد نظر است اهمیت دارد. نمای بزرگنمایی در اینجا کمک می‌کند تا پیکسل دقیق را انتخاب کنید.

شروع مجدد

دکمه «Start over» تصویر را پاک می‌کند، تاریخچه رنگ‌ها را خالی می‌کند و ابزار را به حالت اولیه برمی‌گرداند.

کاربردها و مخاطبان

• طراحان رابط کاربری (UI): استخراج رنگ‌های دقیق از تصاویر مرجع برای تطبیق با طرح‌های خود در Figma، Sketch یا Adobe XD.
• توسعه‌دهندگان فرانت‌اند: گرفتن مقادیر هگز برای CSS، مثلاً #1E90FF برای رنگ پس‌زمینه یک دکمه.
• تولیدکنندگان محتوا: نمونه‌گیری رنگ از لوگوها، عکس‌ها یا اسکرین‌شات‌ها برای برندسازی، بندانگشتی‌ها یا گرافیک شبکه‌های اجتماعی.
• هر کسی که نیاز به کپی کردن کد رنگ از تصویر دارد: مثلاً برای هماهنگ کردن رنگ یک المان در وب‌سایت با طرح اصلی.

نکات فنی و مفاهیم پشت پرده

مدل رنگ هگزادسیمال

کد هگز (مثل #FF5733) از سه جفت رقم ۱۶‌تایی (FF, 57, 33) تشکیل شده که به ترتیب قرمز، سبز و آبی را با دقت ۸ بیت (۰–۲۵۵) نشان می‌دهند. این فرمت فشرده‌ترین روش برای نمایش رنگ در CSS است و نیازی به تابع rgb() یا hsl() ندارد. به همین دلیل ابزار حاضر آن را به‌عنوان خروجی اولیه قرار داده است.

چرا شفافیت جداگانه گزارش می‌شود؟

در استاندارد CSS، کد هگز شش‌رقمی (مانند #RRGGBB) کانال آلفا ندارد. برای نمایش شفافیت باید از rgba()، hsla() یا کد هشت‌رقمی هگز (مانند #RRGGBBAA) استفاده کرد. این ابزار از کد هشت‌رقمی پشتیبانی نمی‌کند و آلفا را به‌صورت درصدی جداگانه اعلام می‌کند تا کاربر بتواند در صورت نیاز از rgba() استفاده کند.

مقیاس‌بندی خودکار تصاویر بزرگ

اگر تصویر ورودی دارای ضلعی بیش از ۴۰۹۶ پیکسل باشد، ابزار آن را تا زیر این آستانه کاهش می‌دهد. این کار برای جلوگیری از افت عملکرد مرورگر و نمایش دقیق رنگ‌ها انجام می‌شود. توجه داشته باشید که مقیاس‌بندی ممکن است باعث تغییر اندکی در رنگ‌های نهایی شود (به دلیل درون‌یابی)، اما ابزار رنگ پیکسل‌های نمونه‌گیری‌شده را از تصویر تغییر اندازه‌یافته می‌خواند، نه تصویر اصلی.

حریم خصوصی و پردازش سمت کاربر

تمام محاسبات در مرورگر شما انجام می‌شود (client‑side). هیچ تصویری به سرور ارسال نمی‌گردد. این برای کاربرانی که نگران محرمانگی تصاویر خود هستند (مثلاً طرح‌های محرمانه) یک مزیت بزرگ است.

سوالات متداول (FAQ)

۱. چرا کد هگز من همیشه شش‌رقمی است و سه‌رقمی نیست؟
ابزار به‌طور پیش‌فرض کد شش‌رقمی کامل را نمایش می‌دهد. حتی اگر رنگ قابل نمایش با سه رقم باشد (مثل #F53 برای #FF5533)، از نمایش شش‌رقمی استفاده می‌کند تا ابهام نداشته باشد. شما می‌توانید از دکمه کپی برای گرفتن مقدار دقیق استفاده کنید.

۲. آیا می‌توانم رنگی را که ذخیره کرده‌ام دوباره مشاهده کنم؟
بله. رنگ‌های ذخیره‌شده در تاریخچه (تا ۱۲ مورد) با یک نمونه رنگی (swatch) نمایش داده می‌شوند. کلیک روی هر نمونه، آن رنگ را دوباره بارگذاری می‌کند و مقادیر HEX، RGB و HSL آن را نشان می‌دهد.

۳. اگر پیکسل انتخاب‌شده نیمه‌شفاف باشد، کد هگز شامل آلفا می‌شود؟
خیر. کد هگز همیشه شش‌رقمی بدون آلفاست. شفافیت به‌صورت درصد جداگانه نمایش داده می‌شود (مثلاً «Alpha 30%»). برای استفاده در CSS باید از rgba() با مقدار آلفای محاسبه‌شده (مثلاً ۰.۳) استفاده کنید.

۴. چرا رنگ‌های یکسان با تصویر اصلی کمی متفاوت به نظر می‌رسند؟
اگر تصویر JPEG یا اسکرین‌شات باشد، فشرده‌سازی و ضدآلیاس ممکن است باعث تغییرات جزئی در پیکسل‌ها شده باشد. ابزار مقدار دقیق ذخیره‌شده در فایل را می‌خواند، نه رنگ ایده‌آل ذهنی شما. برای دقت بیشتر از تصاویر PNG بدون اتلاف استفاده کنید.

۵. آیا می‌توانم از کلیدهای کیبورد برای حرکت روی تصویر استفاده کنم؟
بله. پس از بارگذاری تصویر، با کلیدهای جهت‌دار (↑ ↓ ← →) می‌توانید نشانگر را حرکت دهید. نگه‌داشتن Shift هم‌زمان حرکت را ۱۰ پیکسل افزایش می‌دهد. Enter یا Space رنگ فعلی را ذخیره می‌کند.

۶. حداکثر اندازه تصویری که می‌توانم بارگذاری کنم چقدر است؟
تصاویر با طولانی‌ترین ضلع بیش از ۴۰۹۶ پیکسل به‌طور خودکار کوچک‌سازی می‌شوند. این محدودیت برای جلوگیری از کندی مرورگر تعیین شده است. فایل‌های کوچک‌تر بدون تغییر بارگذاری می‌شوند.