مبدل کد رنگ

فرمت‌های رنگ در CSS

یک رنگ را در CSS به چند شکل می‌شود نوشت و همه یک نتیجه می‌دهند. طراح‌ها در فیگما معمولاً HEX کپی می‌کنند، ولی در کد گاهی RGB برای شفافیت یا HSL و OKLCH برای ساختن طیف رنگ کاربردی‌ترند. این ابزار هر رنگ را به همه‌ی این فرمت‌ها تبدیل می‌کند.

تبدیل HEX به RGB چطور انجام می‌شود؟

کد HEX از سه جفت رقم مبنای ۱۶ ساخته شده است: دو رقم اول قرمز، دو رقم دوم سبز و دو رقم آخر آبی. هر جفت عددی بین ۰۰ تا FF است که برابر ۰ تا ۲۵۵ در مبنای ده است. برای تبدیل RGB به HEX هم همین مسیر برعکس طی می‌شود.

ترفند متغیر رنگ با شفافیت

اگر رنگ برند را به‌صورت سه عدد RGB در یک متغیر نگه داری، می‌توانی با هر شفافیتی از آن استفاده کنی:

:root {
  --brand: #7c5cff;
  --brand-rgb: 124 92 255;
}

.badge {
  background: rgb(var(--brand-rgb) / 0.12);
  color: var(--brand);
}

ساخت طیف رنگ (شید و تینت)

برای پس‌زمینه‌ی کم‌رنگ، حاشیه، حالت hover و متن، معمولاً از چند درجه‌ی روشن‌تر و تیره‌تر رنگ اصلی استفاده می‌شود. ردیف طیف در این ابزار ۹ درجه از رنگت را با تغییر روشنایی می‌سازد؛ با کلیک روی هر کدام، همان رنگ انتخاب و تبدیل می‌شود. اگر روی این رنگ‌ها متن می‌گذاری، کنتراستشان را با ابزار بررسی کنتراست بسنج.

وقتی طرح فیگما به کد تبدیل می‌شود، همه‌ی رنگ‌ها به متغیرهای CSS مرتب تبدیل می‌شوند تا تغییر رنگ برند یا اضافه کردن حالت تاریک بعداً با یک خط ممکن باشد. جزئیاتش را در تبدیل فیگما به HTML ببین.