تبدیل رنگهای هگز به متغیرهای CSS
در هر خط یک نام و یک مقدار هگز بگذارید، یک پیشوند انتخاب کنید و فایل CSS را ذخیره کنید. پالت پیشفرض به متغیرهایی مانند --brand-ink و --brand-accent تبدیل میشود، بهعلاوهٔ مقادیر جفت --brand-ink-text که با کنتراست اندازهگیریشده انتخاب میشوند؛ نماهای JSON و CSV همان نامها و اعداد متعارف را برای سیستمهای دیگر حفظ میکنند.
متغیرهای سفارشی CSS
برای هر توکن یک متغیر رنگ و یک متغیر رنگ متن پیشنهادی، درون یک بلوک :root.
JSON ساختاریافتهٔ پالت
نامها، مقادیر متعارف هگز و RGB، درخشندگی نسبی، متن پیشنهادی سیاه یا سفید و نسبت کنتراست آن.
هر رنگ پالت
| ink | #1f2937 | 31, 41, 55 | ۰٫۰۲ | #ffffff | ۱۴٫۶۸ |
| paper | #f8fafc | 248, 250, 252 | ۰٫۹۵ | #000000 | ۲۰٫۰۷ |
| accent | #ea980e | 234, 152, 14 | ۰٫۴ | #000000 | ۹ |
| success | #16803a | 22, 128, 58 | ۰٫۱۶ | #ffffff | ۵٫۰۲ |
نتیجهها بدون تضمین درستی ارائه میشوند. روش و منابع در پایین صفحه منتشر شدهاند تا بتوانید محاسبه را بررسی کنید.
مقادیر هگز سهرقمی پیش از خروجی گرفتن بسط داده میشوند، بنابراین هر ورودی CSS و JSON یک املای متعارف ششرقمی دارد.
نامها به توکنهای kebab-case با حروف کوچک تبدیل میشوند و تصادمها بهجای اینکه بیسروصدا رنگ قبلی را بازنویسی کنند، پسوند عددی میگیرند.
رنگ متنِ همراه، انتخابی اندازهگیریشده بین سیاه و سفید است، نه حدسی بر پایهٔ میانگین کانالهای RGB.
چگونگی کار
مراحل انجام کار
- در هر خط غیرخالی یک نام بهعلاوهٔ یک رنگ هگز مات سه یا ششرقمی را تجزیه کنید و شکل کوتاه را به RGB ششرقمی متعارف با حروف کوچک بسط دهید.
- نامها و پیشوند را به kebab-case با حروف کوچک ASCII نرمال کنید و بهجای بازنویسی توکنهای تکراری، پسوندهای -۲، -۳ و بعدی را اضافه کنید.
- هر کانال sRGB کدگذاریشده را خطی کنید، درخشندگی نسبی را با وزنهای WCAG ترکیب کنید و کنتراست حاصل را با سیاه و سفید مقایسه کنید.
- برای هر توکن یک متغیر سفارشی رنگ و یک متغیر متن پیشنهادی در CSS خروجی بگیرید و همان مقادیر، کانالها، درخشندگی و نسبت را بهصورت JSON ساختاریافته.
فرضها
- هر رنگ واردشده مات است. رنگهای دارای آلفا رد میشوند، زیرا کنتراست نمایشدادهشدهٔ آنها به سطحی ناگفته در زیرشان بستگی دارد.
- انتخاب متن گزارششده فقط #000000 و #ffffff را مقایسه میکند؛ هر رنگ پیشزمینهٔ ممکن را جستوجو نمیکند.
- نسبت اندازهگیریشدهٔ بالاتر بهخودیخود یک کامپوننت کامل را دسترسپذیر نمیکند؛ اندازهٔ قلم، وزن، حالتها، فوکوس، نشانههای غیرمتنی و رنگهای واقعاً رندرشده همچنان مهماند.
- مقادیر هگز بهعنوان sRGB تفسیر میشوند و هیچ نمایهٔ ICC یا فضای رنگی پهندامنهای به توکنهای خروجی پیوست نمیشود.
پرسشهای رایج
فاصلهها در نام رنگها چه میشوند؟
فاصلهها و علائم نگارشی به خط تیره فشرده میشوند، نشانههای آوایی روی حروف (مانند é) در صورت امکان حذف میشوند و جداکنندههای ابتدا یا انتها پیش از نوشته شدن متغیر CSS ناپدید میشوند.
چرا هر رنگ یک متغیر متن دوم دارد؟
این متغیر همراه، هر کدام از سیاه یا سفید را که نسبت کنتراست WCAG بالاتری در برابر نمونهٔ رنگ میسازد نگه میدارد و جفت امنتر را قابل استفادهٔ مجدد میکند.
منابع
روش کامل، مثال محاسبهشده و همهٔ فرضهای این نتیجه در این صفحه آمده است: فایلساز پالت رنگ.