پیدا کردن نام رنگ از کد هگز

پیدا کردن نام رنگ از کد هگز و RGB

کد #4169E1 چه رنگی است و اسمش چیست؟ طراحان و برنامه‌نویسان هر روز با کدهای رنگی سروکار دارند، اما توصیف یک رنگ با کلمات برای هم‌تیمی یا مشتری بسیار راحت‌تر از خواندن یک کد شش‌رقمی است. با ابزار پیدا کردن نام رنگ از کد هگز تولتولیا کافی است کد رنگ را وارد کنید تا نزدیک‌ترین نام استاندارد آن را ببینید. برعکس آن هم ممکن است: نام یک رنگ را جستجو کنید و کدهای هگز، RGB و HSL آن را دریافت کنید.

ویژگی‌های ابزار

• تبدیل دوطرفه: از کد رنگ به نام، و از نام رنگ به کد.
• پشتیبانی از چند فرمت ورودی: کد هگز (مثل #ff7f50)، مقدار rgb() یا انتخاب مستقیم با انتخابگر رنگ.
• نمایش نزدیک‌ترین رنگ‌ها: علاوه بر بهترین تطبیق، چند رنگ نزدیک دیگر هم نمایش داده می‌شود.
• تطبیق بر اساس دید انسان: به‌جای مقایسه‌ی ساده‌ی اعداد، از فرمول ادراکی redmean استفاده می‌شود تا نتیجه از نظر چشم واقعاً شبیه‌تر باشد.
• نمایش کد هگز، RGB و HSL و کپی هر مقدار با یک کلیک.
• جستجوی نام رنگ با پیشنهاد خودکار.

آموزش استفاده

1. کد هگز یا مقدار RGB رنگ را در فیلد رنگ وارد کنید، یا رنگ را با انتخابگر انتخاب کنید.
2. نزدیک‌ترین نام رنگ، کدهای آن و میزان شباهت را ببینید.
3. در صورت نیاز، روی یکی از رنگ‌های نزدیک کلیک کنید تا جزئیات آن نمایش داده شود.
4. برای جستجوی معکوس، نام رنگ را در بخش «جستجو بر اساس نام» بنویسید.
5. روی هر مقدار کلیک کنید تا در کلیپ‌بورد کپی شود.

کد هگز رنگ چیست و چطور خوانده می‌شود؟

کد هگز (Hex) رایج‌ترین روش نوشتن رنگ در طراحی وب است و از یک علامت # و شش کاراکتر تشکیل می‌شود: #RRGGBB. دو کاراکتر اول مقدار قرمز، دو کاراکتر دوم مقدار سبز و دو کاراکتر آخر مقدار آبی را مشخص می‌کنند. هر جفت عددی بین 00 (صفر) تا FF (۲۵۵) در مبنای شانزده است. برای مثال، #FF7F50 همان rgb(255, 127, 80) است که نام CSS آن coral (مرجانی) است. کدهای سه‌رقمی مثل #F00 هم شکل کوتاه‌شده‌ی #FF0000 هستند.

جدول نام و کد رنگ‌های پرکاربرد

نام فارسینام CSSکد هگزRGBقرمزred#FF0000255, 0, 0گوجه‌ایtomato#FF6347255, 99, 71مرجانیcoral#FF7F50255, 127, 80نارنجیorange#FFA500255, 165, 0طلاییgold#FFD700255, 215, 0زردyellow#FFFF00255, 255, 0سبزgreen#0080000, 128, 0زیتونیolive#808000128, 128, 0فیروزه‌ایturquoise#40E0D064, 224, 208آبی آسمانیskyblue#87CEEB135, 206, 235آبی سلطنتیroyalblue#4169E165, 105, 225سرمه‌ایnavy#0000800, 0, 128بنفشpurple#800080128, 0, 128صورتیpink#FFC0CB255, 192, 203زرشکیmaroon#800000128, 0, 0بژbeige#F5F5DC245, 245, 220نقره‌ایsilver#C0C0C0192, 192, 192خاکستریgray#808080128, 128, 128

کاربردهای ابزار

• طراحان رابط کاربری: برای نام‌گذاری رنگ‌های پالت و مستندسازی سیستم طراحی.
• برنامه‌نویسان فرانت‌اند: برای اینکه بدانند آیا کد هگزشان یک نام استاندارد CSS دارد که بشود به‌جای آن نوشت (مثلاً color: tomato;).
• ارتباط با تیم و مشتری: توصیف رنگ با کلمات به‌جای کد، در گزارش باگ یا جلسه‌ی طراحی.
• فروشگاه‌های آنلاین: برای نوشتن نام دقیق رنگ محصول در توضیحات.

اگر کد رنگ را ندارید و فقط یک عکس دارید، ابتدا با استخراج کد رنگ از عکس کدها را پیدا کنید. برای بررسی خوانایی متن روی رنگ انتخابی هم از تست کنتراست رنگ استفاده کنید.

سؤالات متداول

نام رنگ‌ها از کجا آمده‌اند؟

نام‌ها از فهرست رسمی رنگ‌های نام‌دار CSS (بر پایه‌ی X11) گرفته شده‌اند؛ همان بیش از ۱۴۰ نامی که همه‌ی مرورگرها می‌شناسند و می‌توانید مستقیماً در CSS از آن‌ها استفاده کنید.

چرا بیشتر کدها دقیقاً با یک نام مطابقت ندارند؟

بیش از ۱۶ میلیون کد هگز وجود دارد، اما فقط حدود ۱۴۰ نام استاندارد. به همین دلیل ابزار نزدیک‌ترین نام و چند گزینه‌ی مشابه را نشان می‌دهد تا خودتان میزان شباهت را ببینید.

تفاوت کد هگز، RGB و HSL چیست؟

هر سه یک رنگ را نشان می‌دهند. هگز و RGB رنگ را با ترکیب قرمز، سبز و آبی مشخص می‌کنند (هگز در مبنای ۱۶ و RGB در مبنای ۱۰). HSL رنگ را با فام (Hue)، اشباع (Saturation) و روشنایی (Lightness) توصیف می‌کند و برای ساختن سایه‌های روشن‌تر و تیره‌تر یک رنگ راحت‌تر است.

آیا می‌توانم با بخشی از نام رنگ جستجو کنم؟

بله. مثلاً با تایپ «blue» همه‌ی رنگ‌هایی که این کلمه در نامشان هست پیشنهاد داده می‌شوند.

آیا رنگ‌های پنتون (Pantone) هم پشتیبانی می‌شوند؟

خیر. این ابزار فقط رنگ‌های استاندارد CSS را پوشش می‌دهد. رنگ‌های پنتون یک سیستم اختصاصی و دارای مجوز هستند.