مبدل رنگ
HEX، RGB، HSL، HSV، CMYK و OKLCH را تبدیل کنید، پالت بسازید و کنتراست را بسنجید — در مرورگر شما.
مبدل رنگ — تبدیل HEX به RGB، RGB به HEX و HSL بهصورت آنلاین
ابزار طراحی یک قالب رنگ به شما میدهد، CSS قالب دیگری می‌خواهد و API کنواس قالب سوم. این مبدل رنگ رایگان هر سه نمادگذاری رایج — #0A84FF، rgb(10,132,255) یا hsl(210,100%,52%) — را می‌پذیرد و معادل دقیق آن را در قالبی که واقعاً لازم دارید تحویل میدهد.
مقدار را بچسبانید، قالب خروجی را انتخاب کنید و روی تبدیل بزنید. چیزی برای نصب یا ثبت‌نام وجود ندارد و چون تبدیل داخل مرورگر انجام میشود، حتی بدون اینترنت هم کار میکند.
سه قالب رنگ و برتری هر کدام
| قالب | شکل ظاهری | بهترین کاربرد |
|---|---|---|
| HEX | #0A84FF | تحویل فایل طراحی، راهنمای برند و هرجا که رنگ نوشته یا کپی میشود |
| RGB | rgb(10, 132, 255) | کنواس، SVG، پردازش تصویر و هر کدی که کانال‌ها را دستکاری میکند |
| HSL | hsl(210, 100%, 52%) | سیستم طراحی؛ تغییر روشنایی برای حالت Hover، غیرفعال و تم تاریک |
همه قالب‌هایی که این مبدل میدهد
لازم نیست بگویید چه چیزی را جای‌گذاری کرده‌اید: گزینه تشخیص خودکار کد HEX را با یا بدون #، هر دو نگارش کاما و فاصله در rgb() و hsl()، مقادیر تازه‌تری مثل oklch() و hwb() و lab()، و هر ۱۴۸ نام رنگ CSS را می‌شناسد. کنار HEX و RGB و HSL، خروجی HSV برای انتخابگرهای رنگ، CMYK برای کارهای چاپی، oklch() برای توکن‌های طراحی با فاصله ادراکی یکنواخت، و نزدیکترین نام رنگ CSS را هم میگیرید. کانال آلفا - در rgba() و hsla() یا HEX هشت‌رقمی - حفظ میشود و دور ریخته نمیشود.
روش تبدیل یک رنگ
- رنگ را با هر نگارشی جای‌گذاری کنید یا با انتخابگر رنگ برگزینید؛ تشخیص خودکار خودش قالب را تشخیص میدهد. در مرورگرهایی که از آن پشتیبانی میکنند، مثل Chrome و Edge روی دسکتاپ، دکمه برداشتن رنگ از صفحه رنگ هر پیکسلی از صفحه‌نمایش را برمی‌دارد؛ در مرورگرهای دیگر این دکمه نمایش داده نمیشود.
- زبانه قالب‌ها مقادیر HEX، RGB، HSL، HSV، CMYK و OKLCH را فهرست میکند و هر سطر دکمه کپی خودش را دارد. این زبانه رنگ را نام‌گذاری هم میکند: اگر دقیقاً یکی از رنگ‌های نام‌دار CSS باشد نام CSS را نشان میدهد و وگرنه نزدیکترین نام را.
- زبانه پالت یک طیف آماده از روشن‌ها و تیره‌ها به‌همراه هارمونیهای مکمل، مشابه، سهگانه و چهارگانه میسازد.
- در زبانه کنتراست رنگ پس‌زمینه را تعیین کنید و نسبت کنتراست WCAG را با نتیجه AA و AAA ببینید.
- با تصادفی رنگ تصادفی بگیرید و با پاک کردن پیش از مقدار بعدی همه‌چیز را پاک کنید.
کد رنگ HEX چطور کار میکند
یک رنگ HEX از سه جفت رقم هگزادسیمال ساخته میشود؛ یک جفت برای قرمز، یک جفت برای سبز و یک جفت برای آبی، و هر جفت بازه ۰۰ تا FF یعنی صفر تا ۲۵۵ در مبنای ده را پوشش میدهد. #FF0000 قرمز کامل، #000000 سیاه و #FFFFFF سفید است. وقتی هر سه جفت رقم تکراری داشته باشند شکل کوتاه کار میکند: #FFF یعنی #FFFFFF. کدهای چهار یا هشت رقمی کانال شفافیت را هم اضافه میکنند، پس #0A84FF80 همان آبی با حدود ۵۰ درصد شفافیت است.
چرا فکر کردن با HSL آسان‌تر است
HSL رنگ را همان‌طور توصیف میکند که آدم‌ها توصیف میکنند: طیف رنگ به‌عنوان زاویه روی چرخه رنگ، اشباع به‌عنوان شدت و روشنایی به‌عنوان نزدیکی به سفید یا سیاه. همین باعث میشود برای ساختن یک پالت انتخاب عملی باشد. طیف رنگ برند را بردارید، اشباع را نگه دارید و فقط روشنایی را تغییر بدهید تا حالت Hover، حالت غیرفعال، رنگ حاشیه و نسخه تم تاریک بسازید که همه آشکارا از یک خانواده‌اند. انجام همین کار با HEX یعنی حدس زدن شش رقم.
ساخت یک پالت کامل از یک رنگ
زبانه پالت یک رنگ برند را به همان مجموعه‌ای تبدیل میکند که واقعاً لازم دارید. طیف روشن‌ها و تیره‌ها، رنگمایه و اشباع را نگه می‌دارد و فقط روشنایی را در یازده پله تغییر میدهد؛ پله‌ها مثل بیشتر سیستم‌های طراحی از ۵۰ تا ۹۵۰ شمارهگذاری شده‌اند، بنابراین حالت hover، رنگ حاشیه، حالت غیرفعال و نسخه تم تیره آشکارا از یک خانواده‌اند. دکمه کپی بهصورت CSS کل طیف را به شکل متغیرهای CSS در کلیپ‌بورد می‌گذارد تا مستقیم داخل :root جای‌گذاری شود.
زیر طیف، هارمونیهای چرخه رنگ قرار دارند: مکمل (رنگمایه روبه‌رو)، مشابه (همسایه‌های ۳۰ درجه‌ای)، سهگانه و مکمل شکسته برای تأکیدهای متعادل، و چهارگانه برای یک ترکیب چهاررنگ. با یک کلیک روی هر نمونه کد HEX آن کپی میشود و با دوبار کلیک همان رنگ، رنگ جاری میشود تا پالت تازه‌ای دورش ساخته شود.
پیش از انتشار، کنتراست را بسنجید
زبانه کنتراست نسبت کنتراست WCAG میان رنگ شما و هر پسزمینهای را اندازه می‌گیرد. نسبت با دو رقم اعشار نشان داده میشود و هر آستانه با قبول یا رد علامت می‌خورد: AA متن معمولی با ۴٫۵ به ۱، AA متن بزرگ با ۳ به ۱، AAA متن معمولی با ۷ به ۱، AAA متن بزرگ با ۴٫۵ به ۱، و اجزای رابط کاربری مثل آیکون‌ها و حاشیه فیلدها با ۳ به ۱. دکمه جابه‌جا کردن رنگ متن و پس‌زمینه را با یک کلیک جابه‌جا میکند. یک نمونه زنده همان ترکیب را در اندازه ۱۶ پیکسل و ۲۴ پیکسل توپر نشان میدهد، چون نسبتی که برای متن اصلی کافی نیست ممکن است برای یک تیتر کافی باشد.
اگر ترکیب قبول نشود، ابزار نزدیکترین سایه از همان رنگمایه را پیشنهاد میکند که به ۴٫۵ به ۱ می‌رسد؛ یعنی کنتراست را بدون کنار گذاشتن رنگ برند درست می‌کنید. رنگ نیمه‌شفاف اول روی پس‌زمینه ترکیب میشود، چون همان چیزی است که خواننده می‌بیند و سنجیدن مقدار خام rgba() نتیجه‌ای خوش‌بینانه‌تر از واقعیت میدهد.
تبدیل رنگ کجا لازم میشود
- انتقال رنگ‌های برند از فایل طراحی به Custom Propertyهای CSS.
- تنظیم
fillStyleروی کنواس یا ویژگی رنگ در SVG که RGB را ترجیح می‌دهند. - ساخت قالب ایمیل HTML، جایی که HEX امن‌ترین نمادگذاری میان کلاینت‌های مختلف است.
- تولید مجموعه‌ای یکدست از سایه‌های روشن و تیره برای یک سیستم طراحی.
- انتخاب پالت نمودار و داشبورد که در آن طیف‌ها باید فاصله یکنواخت داشته باشند.
- تبدیل رنگ برداشته‌شده از یک اسکرین‌شات یا PDF برند به مقداری که در کد قابل استفاده باشد.
رنگ و خوانایی
تبدیل رنگ به شما نمی‌گوید متن روی آن خوانا خواهد بود یا نه. کنتراست به روشنایی نسبی بستگی دارد و دستورالعمل‌های WCAG دست‌کم نسبت ۴٫۵ به ۱ برای متن معمولی و ۳ به ۱ برای متن درشت می‌خواهند. مقدار روشنایی در HSL تخمین اولیه خوبی است - اگر دو مقدار روشنایی به هم نزدیک باشند، کنتراست تقریباً حتماً کافی نیست - و زبانه کنتراست همین را برای هر جفت رنگ، پیش از انتشار، دقیق روشن میکند.
جزئیاتی که دانستنشان می‌ارزد
- گرد کردن. HSL با درجه و درصد صحیح کار میکند، پس تبدیل HEX به HSL و برگشت میتواند یک کانال را یک واحد جابه‌جا کند. یک قالب را مرجع اصلی نگه دارید.
- شفافیت.
rgba()و HEX هشت‌رقمی شفافیت را حمل میکنند؛ HEX شش‌رقمی نمی‌تواند آن را نشان دهد. - درصد در RGB. نوشتن
rgb(100%, 0%, 0%)در CSS معتبر است و همان معنیrgb(255,0,0)را دارد. - گستره رنگی وسیع. توابع تازهتر CSS مثل
oklch()وcolor(display-p3 ...)رنگ‌هایی بیرون از sRGB را بیان میکنند که HEX از پس آنها برنمی‌آید. - رنگ‌های نام‌دار. کلیدواژه‌هایی مثل
tomatoبه مقدارهای HEX ثابتی اشاره دارند، اما تعدادشان محدود است و در یک سیستم طراحی خوب جا نمی‌افتند.
اجرای محلی
این تبدیل صرفاً محاسبه‌ای ساده در مرورگر شماست. هیچ رنگی که می‌چسبانید آپلود نمیشود؛ نکته‌ای که وقتی روی پالت برند منتشرنشده کار می‌کنید اهمیت پیدا میکند.
فرمول تبدیل HEX به RGB و انجام آن در کد
کد HEX چیزی جز سه بایت در مبنای ۱۶ نیست. #0A84FF را به 0A، 84 و FF بشکنید، هر جفت را به ده‌دهی تبدیل کنید (0A = 10، 84 = 132، FF = 255) و rgb(10, 132, 255) به دست می‌آید. برای مسیر برعکس، هر کانال را با دو رقم هگز بنویسید و اگر کمتر از ۱۶ بود با صفر پر کنید.
| زبان | HEX به RGB | RGB به HEX |
|---|---|---|
| JavaScript | parseInt(hex.slice(1, 3), 16) برای قرمز، سپس 3-5 و 5-7 | '#' + [r, g, b].map(c => c.toString(16).padStart(2, '0')).join('') |
| Python | tuple(int(h[i:i+2], 16) for i in (0, 2, 4)) | '#%02x%02x%02x' % (r, g, b) |
| PHP | sscanf('#0A84FF', '#%02x%02x%02x') | sprintf('#%02x%02x%02x', $r, $g, $b) |
| CSS (مرورگرهای جدید) | rgb(from #0A84FF r g b) | لازم نیست - هر دو نگارش مقدار رنگ معتبر هستند |
ابزارهای مرتبط
کار فرانت‌اند معمولاً به رنگ ختم نمیشود. توکن‌های طراحی را با فرمت‌کننده JSON مرتب کنید، یک آیکون کوچک را با کدگذار Base64 به Data URI تبدیل کنید، همه کدهای رنگ یک فایل استایل را با آزمایشگر Regex پیدا کنید و تصویرها را با مبدل تصویر تبدیل کنید. برای ساختن گرادیان و سایه از این رنگ‌ها، از مولد CSS استفاده کنید.