DevToys Web Pro iconDevToys Web Proوبلاگ
به ما امتیاز دهید:
افزونه مرورگر را امتحان کنید:

تولیدکننده هارمونی‌های رنگ

  • پایه
    طرح
    Base + opposite (180°)
    #3B82F6base
    rgb(59, 130, 246)
    hsl(217, 91%, 60%)
    #F6AF3Ccomplement (180°)
    rgb(246, 175, 60)
    hsl(37, 91%, 60%)
    جزئیات فنی

    مولد هارمونی‌های رنگ چگونه کار می‌کند

    این ابزار چه کاری انجام می‌دهد

    مولد هارمونی‌های رنگ مجموعه‌های رنگیِ مرتبط از نظر ریاضی را از یک ته‌رنگ پایه محاسبه می‌کند: مکمل، مشابه، سه‌تایی، چهار‌تایی، مربعی، مکملِ شکسته، تک‌رنگ و سایه‌ها. هر پالت با مقادیر HEX، RGB و HSL رندر می‌شود که می‌توانید با یک کلیک کپی کنید و مستقیماً در CSS یا توکن‌های طراحی به کار ببرید.

    موارد استفادهٔ رایج برای توسعه‌دهندگان

    طراحان با بررسی اینکه یک ته‌رنگ برند تحت قوانین مختلف هارمونی چگونه تغییر می‌کند، پالت‌های برند را نمونه‌سازی می‌کنند. توسعه‌دهندگان فرانت‌اند رنگ‌های تأکیدی برای دکمه‌ها، هشدارها و بج‌ها را از یک رنگ اصلی برند استخراج می‌کنند. مهندسان مصورسازی داده مجموعه‌های رنگیِ دسته‌ای را انتخاب می‌کنند که هدفمند به نظر برسند و در عین حال قابل تمایز باقی بمانند. مدیران محصول هنگام بررسی پیشنهادهای طراحی، گزینه‌های پالت را بدون نیاز به ابزارهای تخصصی طراحی مقایسه می‌کنند.

    قالب‌ها، نوع‌ها یا گونه‌های داده

    هشت طرح در دسترس است: مکمل (پایه + ۱۸۰°)، مشابه (پایه ± ۳۰°)، سه‌تایی (۳ رنگ با فاصله ۱۲۰°)، چهار‌تایی (چهار رنگِ مستطیلی)، مربعی (۴ رنگ با فاصله ۹۰°)، مکملِ شکسته (پایه + ±۱۵۰°)، تک‌رنگ (همان ته‌رنگ با روشنایی متغیر ۱۰–۹۰٪)، و سایه‌ها (همان ته‌رنگ، از تیره تا روشن). هر رنگ علاوه بر برچسب نقش، شامل نمایش‌های HEX، RGB و HSL آن است.

    دام‌های رایج و حالت‌های لبه‌ای

    هارمونی‌هایی که از رنگ‌های پایه بسیار کم‌اشباع یا نزدیک به خاکستری به دست می‌آیند، در طرح‌های مختلف غیرقابل تشخیص به نظر می‌رسند — از یک رنگ پایه اشباع شروع کنید. رنگ‌های پایه بسیار اشباع همراه با طرح‌های سه‌تایی یا چهار‌تایی می‌توانند پالت‌های پر سر و صدا و سخت برای بالانس ایجاد کنند؛ برای استفاده در UI کاهش اشباع را در نظر بگیرید. برخی جفت‌ها که از هارمونی‌ها به دست می‌آیند استاندارد کنتراست WCAG را پاس نمی‌کنند — پیش از انتشار، همیشه جفت‌های متن/پس‌زمینه را در ابزار Color Contrast بررسی کنید.

    چه زمانی از این ابزار استفاده کنیم در برابر کُد

    از ابزار مرورگر برای ایده‌پردازی، بررسی سریع و بازبینی طراحی استفاده کنید. در کد، کتابخانه‌هایی مانند chroma.js، colord یا culori به شما اجازه می‌دهند هارمونی‌ها را به‌صورت برنامه‌نویسی محاسبه کنید، آن‌ها را در پایپ‌لاین‌های بیلدِ توکن‌های طراحی یکپارچه کنید، و ریاضیات هارمونی را با فضاهای رنگیِ یکنواخت از نظر ادراکی مانند Oklch ترکیب کنید تا پالت‌هایی یکنواخت‌تر از نظر ظاهری به دست آورید.