مولد کد رنگ

تبدیل و بررسی رنگ آنلاین

این ابزار یک رنگ پایه را از ورودی رنگ یا مقدار HEX می گیرد و اطلاعات کاربردی آن را نمایش می دهد. پس از انتخاب رنگ، پیش نمایش زنده، مقدار HEX، مقدار RGB، مقدار HSL، نام CSS در صورت وجود و رنگ مکمل نمایش داده می شود. هر خروجی دکمه کپی دارد تا بتوانید مقدار را مستقیم در CSS، ابزار طراحی یا مستندات پروژه استفاده کنید. ورودی HEX کوتاه سه رقمی نیز به قالب شش رقمی تبدیل می شود، اما مقدار نامعتبر نادیده گرفته می شود.

HEX، RGB و HSL چه تفاوتی دارند؟

HEX همان قالب رایج CSS مانند #3D7EF7 است و هر دو رقم آن مقدار قرمز، سبز و آبی را نشان می دهد. RGB همین سه کانال را به صورت عددی از ۰ تا ۲۵۵ نمایش می دهد. HSL رنگ را بر اساس hue یا زاویه رنگ، saturation یا اشباع و lightness یا روشنایی بیان می کند. برای تنظیم دستی روشن تر یا تیره تر کردن رنگ، HSL معمولا خواناتر است؛ برای کپی سریع در CSS، HEX و RGB هر دو کاربردی هستند.

رنگ مکمل چگونه محاسبه می شود؟

ابزار ابتدا رنگ را به HSL تبدیل می کند، سپس hue را ۱۸۰ درجه می چرخاند و دوباره مقدار مکمل را به HEX برمی گرداند. رنگ مکمل برای ساخت تضاد بصری، دکمه های برجسته، وضعیت hover یا تاکید در طراحی رابط کاربری مفید است. با این حال مکمل همیشه به معنای ترکیب زیبا یا قابل دسترس نیست. باید کنتراست متن و پس زمینه، هویت برند، فضای خالی و میزان اشباع را هم بررسی کنید.

نکات طراحی و دسترس پذیری

اگر رنگ انتخابی برای متن یا پس زمینه استفاده می شود، فقط به ظاهر آن اعتماد نکنید و نسبت کنتراست را با استانداردهای WCAG بررسی کنید. رنگ های بسیار روشن برای متن روی سفید و رنگ های بسیار تیره برای متن روی مشکی خوانایی کمی دارند. نام CSS فقط برای رنگ های رسمی و دقیق نمایش داده می شود؛ اگر مقدار نزدیک به یک رنگ معروف باشد ولی دقیقا برابر نباشد، نامی نشان داده نمی شود. خروجی این ابزار برای انتخاب سریع رنگ، مستندسازی سیستم طراحی و تبدیل فرمت ها مناسب است.

کاربرد در CSS و سیستم طراحی

پس از انتخاب رنگ، می توانید مقدار HEX را برای متغیرهای CSS، مقدار RGB را برای rgba و مقدار HSL را برای ساخت رنگ های روشن تر یا تیره تر استفاده کنید. اگر در طراحی چند حالت hover، active و disabled دارید، HSL معمولا تنظیم دقیق تری می دهد و از تغییر تصادفی hue جلوگیری می کند.