تبدیل رنگ چیست؟
هر رنگی که مرورگر شما رندر میکند در نهایت یک سهتایی sRGB است — سه عدد بین ۰ و ۲۵۵ برای کانالهای قرمز، سبز و آبی، بهعلاوه یک آلفای اختیاری. مشخصات CSS Color Level 4 چندین فرمت متنی تعریف میکند که به همان سهتایی برمیگردند، بهعلاوه فضای یکنواخت ادراکی OKLCH. این ابزار هر کدام را میخواند، به همه آنها تبدیل میکند و نسبت تضاد WCAG 2.1 را در برابر یک رنگ دوم گزارش میدهد تا بتوانید رابطهای دسترسیپذیر را با اطمینان ارائه دهید.
تبدیل رنگ چگونه کار میکند؟
تبدیل یک سری تبدیلهای خطی و غیرخطی تعریفشده است. هر مرحله در مرورگر شما اجرا میشود — هیچ ورودی به سرورهای ما نمیرسد:
- ورودی شما تجزیه میشود. ابزار بهطور خودکار HEX سه، چهار، شش یا هشترقمی، فرمهای تابعی
rgb()/rgba()/hsl()/hsla()/hsv()/hwb()در نحو کاما قدیمی یا نحو slash-alpha مدرن، یا هر یک از ۱۵۰ رنگ نامگذاریشده CSS (rebeccapurpleنیز شامل) را تشخیص میدهد. - رنگ تجزیهشده به sRGB متعارف نرمال میشود — چهار عدد اعشاری
{r, g, b, a}هر کدام در محدوده ۰–۱. این تنها منبع حقیقت است که هر فرمت خروجی از آن استخراج میشود. - HEX با گرد کردن هر کانال به مقدار بایت ۰–۲۵۵ و اتصال ارقام hex بهدست میآید. RGB / RGBA همان بایتها را چاپ میکنند. HSL و HSV الگوریتمهای استاندارد مختصات استوانهای W3C را اعمال میکنند؛ HWB رنگ را از HSV، سفیدی را از
min(r, g, b)و سیاهی را از1 - max(r, g, b)استخراج میکند. - CMYK یک تقریب ساده است —
k = 1 - max(r, g, b)، سپسc, m, yاز کانالهای باقیمانده. برای پیشنمایش صفحه مناسب است اما برای چاپ نه: خروجی واقعی CMYK به یک پروفایل ICC نیاز دارد که این ابزار عمداً آن را جاسازی نمیکند. - OKLCH مسیر رو به جلوی css-color-4 را دنبال میکند: sRGB خطیسازی میشود، ضربشده در ماتریس LMS، ریشه مکعبی، ضربشده در ماتریس LMS-to-OKLab، و در نهایت از OKLab مستطیلی به OKLCH قطبی تبدیل میشود. OKLCH از نظر ادراکی یکنواخت است که آن را برای طراحی پالتهایی که برای چشم انسان متوازن به نظر میرسند فضای مناسب میسازد.
چرا از این مبدل رنگ استفاده کنیم؟
- حریم خصوصی: هر تبدیل در مرورگر شما با JavaScript ساده اجرا میشود. رنگی که الصاق میکنید هرگز دستگاه شما را ترک نمیکند، که برای کارهای برند منتشرنشده، سیستمهای طراحی داخلی و ماکتهای مشتری تحت NDA اهمیت دارد.
- تحویل از طراح به توسعهدهنده: HEX از Figma را الصاق کنید و رشته
rgb()برای تنظیمات Tailwind، رشتهhsl()برای یک CSS custom property، یا رشتهoklch()برای یک پالت مدرن را دریافت کنید — همه فرمتها در یک جا، بدون کپیکردن بین تبها. - دقت WCAG: بررسیکننده تضاد از فرمول دقیق روشنایی نسبی WCAG 2.1 و آستانههای منتشرشده AA (4.5 / 3.0) و AAA (7.0 / 4.5) برای متن عادی و بزرگ استفاده میکند. نسبت گزارششده با ماشینحسابهای دستی تا ۰.۰۱ مطابقت دارد.
- حالت تاریک و استخراج پالت: HSL و OKLCH روشنایی را بهعنوان یک کانال واحد نمایش میدهند، بنابراین آسان است که یک رنگ برند را روی محور روشنایی جابجا کنید تا توکنهای حالت تاریک متطابق یا یک رمپ پالت ۱۰ مرحلهای از یک seed واحد ایجاد کنید.
کاربردهای رایج تبدیل رنگ چیست؟
تبدیل رنگ در توسعه وب، طراحی و کار دسترسیپذیری ظاهر میشود:
- سیستمهای طراحی: تبدیل یک HEX برند به توکنهای HSL و OKLCH متطابق برای یک مقیاس CSS custom-property، سپس تأیید اینکه هر ترکیب توکن WCAG AA را در برابر پسزمینه صفحه میگذراند.
- ممیزیهای دسترسیپذیری: الصاق یک جفت پیشزمینه و پسزمینه از صفحه محصول واقعی و خواندن نسبت تضاد بهعلاوه احکام AA/AAA برای متن با وزن عادی و بزرگ در یک نگاه.
- تبدیلهای چند ابزاره: کشیدن رنگ از یک انتخابگر اسکرینشات (HEX)، الصاق آن اینجا، و کپی مستقیم رشته
hsl()یاoklch()در Tailwind، توکنهای Figma، یا یک تم CSS-in-JS.
یک مثال تبدیل رنگ چگونه است؟
رنگ معروف rebeccapurple را در نظر بگیرید. جستجوی رنگ نامگذاریشده آن را به #663399 تبدیل میکند. تبدیل RGB میدهد rgb(102, 51, 153). تبدیل HSL میدهد hsl(270, 50%, 40%) — رنگ بنفش، نیمه اشباع، چهار دهم روشن. بررسی آن رنگ در برابر سفید خالص با ابزار تضاد نسبتی نزدیک 7.39 برمیگرداند که AAA (7.0) برای متن عادی و AAA (4.5) برای متن بزرگ را میگذراند — یک انتخاب پیشزمینه قوی و دسترسیپذیر. تبدیل دوطرفه #663399 از طریق RGB → HSL → RGB → HEX رشته اصلی را دقیقاً، بایت به بایت برمیگرداند.
از این مبدل بهعنوان مرجع سریع برای هر رنگی که در کد، فایلهای طراحی یا اسکرینشات مواجه میشوید استفاده کنید، و از بررسیکننده تضاد بهعنوان تأیید پیش از ارسال. همه چیز بهصورت محلی اجرا میشود، هیچ چیز ثبت نمیشود و ریاضیات تبدیل از مشخصات منتشرشده W3C و WCAG پیروی میکند تا اعداد با ابزار ممیزی یا devtools مرورگر شما مطابقت داشته باشند.