تألیف توکن سیستم طراحی
مقادیر HEX برند را به OKLCH تبدیل کنید تا هر سایه در رمپ توکن شما گام روشنایی ادراکی یکسانی داشته باشد. خروجی OKLCH را مستقیماً در CSS خود جایگذاری کنید — بدون نیاز به preprocessor.
انتخابگر و مبدل رنگ
بهصورت بصری انتخاب کنید یا هر مقداری را جایگذاری کنید — HEX، RGB، HSL، OKLCH و OKLAB همزمان همگام میمانند. شامل بررسیگر کنتراست WCAG 2.2 و تولیدکنندهٔ پالت مبتنی بر OKLCH. کاملاً در مرورگر شما اجرا میشود.
انتخابگر و مبدل رنگ — TL;DR
بهصورت بصری انتخاب کنید یا هر مقداری را جایگذاری کنید — HEX، RGB، HSL، OKLCH و OKLAB همزمان همگام میمانند. شامل بررسیگر کنتراست WCAG 2.2 و تولیدکنندهٔ پالت مبتنی بر OKLCH. کاملاً در مرورگر شما اجرا میشود.
مقدار hex خود (مثلاً #ff5722) را در فیلد HEX جایگذاری کنید — ردیف RGB بلافاصله بهروزرسانی میشود. به همین ترتیب، rgb(255 87 34) را در فیلد RGB جایگذاری کنید و HEX، HSL، OKLCH و OKLAB همگی همگام میشوند. تبدیل در همهٔ قالبهای پشتیبانیشده دوطرفه است.
OKLCH یک فضای رنگی CSS Color Module Level 4 است که از روشنایی ادراکی (L)، کروما (C) و تهرنگ (h) استفاده میکند — مانند HSL، اما از نظر ادراکی یکنواخت. دو رنگ OKLCH با مقدار L یکسان بهطور برابر روشن به نظر میرسند، حتی در تهرنگهای متفاوت. این موضوع توکنهای طراحی، پالتهای تولیدشده و رمپهای رنگی قابلدسترس را بسیار قابلپیشبینیتر از HSL میکند. همهٔ مرورگرهای evergreen (Chrome 111+، Safari 15.4+، Firefox 113+) از آن پشتیبانی میکنند.
مقادیر رنگ هرگز از دستگاه شما خارج نمیشوند. DevTools → Network را باز کنید و خواهید دید که در حین تبدیل، انتخاب، تولید پالت یا بررسی کنتراست هیچ درخواست خروجیای وجود ندارد.
HEX
RGB
HSL
OKLCH
OKLAB
نامگذاریشده
پالت
کنتراست WCAG 2.2
متن
پسزمینه
—
پیشنمایش
نمونهٔ تیتر بزرگ
نمونهٔ متن بدنه — روباه قهوهای چابک از روی سگ تنبل میپرد.
طراحیشده برای جریانهای کاری واقعی
از سیستمهای طراحی تا ممیزی دسترسپذیری — هر قالب و بررسیای که نیاز دارید، در یک مکان.
شش فضای رنگی
تبدیل دوطرفه میان HEX (۳ / ۴ / ۶ / ۸ رقمی)، RGB(A)، HSL(A)، OKLCH، OKLAB و رنگهای نامدار CSS. رشتههای خروجی با نحو CSS Color Module Level 4 مطابقت دارند — مستقیماً در stylesheet خود جایگذاری کنید.
بررسیگر کنتراست WCAG 2.2
نسبت کنتراست بین هر دو رنگ را با نشانهای قبول/رد تککلیکی برای AA (4.5 : 1) و AAA (7 : 1) در اندازههای متن معمولی و بزرگ ببینید. محاسبه با مرجع W3C مطابقت دارد: خطیسازی sRGB، روشنایی نسبی، سپس (L1+0.05)/(L2+0.05).
EyeDropper — نمونهبرداری از هر پیکسل
روی قطرهچکان کلیک کنید تا از هر رنگی روی صفحهتان نمونه بگیرید — طرحها، اسکرینشاتها، عکسها و حتی تبهای دیگر مرورگر. از API بومی EyeDropper روی مرورگرهای Chromium استفاده میکند.
پالت مبتنی بر OKLCH
تولید ۹ مرحله روشن و تیره بهعلاوهٔ هارمونیهای مکمل، سهگانه و مشابه — برگرفته از OKLCH تا هر مرحله از نظر ادراکی بهطور یکنواخت فاصله داشته باشد (برخلاف HSL که در آن روشنایی بهشدت متغیر است).
حریم خصوصی در طراحی
هر تبدیل با JavaScript روی دستگاه شما اجرا میشود. هیچ چیز آپلود، ثبت یا به شخص ثالثی ارسال نمیشود — اگر میخواهید خودتان راستیآزمایی کنید DevTools → Network را باز کنید.
ساختهشده برای سرعت
JavaScript خالص، بدون runtime فریمورک. بارگذاری اولیه کمتر از ۵۰ کیلوبایت gzipشده است؛ تبدیل و تولید پالت روی یک لپتاپ پنجساله در کمتر از یک میلیثانیه به پایان میرسد.
نحوهٔ استفاده از انتخابگر رنگ
چهار راه برای شروع، همهٔ قالبها همگام.
-
1
انتخاب بصری
داخل مربع اشباع/روشنایی بکشید تا سایه را انتخاب کنید، نوار تهرنگ زیر آن را بلغزانید تا رنگ پایه را تغییر دهید و از لغزندهٔ آلفا برای شفافیت استفاده کنید. هر قالب در سمت راست بلافاصله بهروز میشود.
-
2
جایگذاری هر مقدار
یک HEX (
#4f46e5)، RGB (rgb(79 70 229))، HSL (hsl(244 76% 59%))، OKLCH (oklch(53% 0.22 277)) یا حتی یک رنگ نامدار CSS (tomato) را در ورودی متناظر جایگذاری کنید — انتخابگر و سایر قالبها همگی همگام میشوند. -
3
نمونهبرداری با قطرهچکان
روی دکمهٔ قطرهچکان کلیک کنید تا هر پیکسلی روی صفحهتان را ضبط کنید — تب دیگر، اسکرینشات، عکس، آیکون. از API بومی EyeDropper روی Chrome، Edge و Opera استفاده میکند.
-
4
کپی یا بررسی کنتراست
روی آیکون کپی کنار هر قالب کلیک کنید تا روی کلیپبورد قرار گیرد. یا به بخش کنتراست WCAG 2.2 اسکرول کنید تا ببینید آیا ترکیب پیشزمینه/پسزمینهٔ شما در اندازههای متن معمولی و بزرگ AA یا AAA را قبول میکند.
ساختهشده برای طراحان، توسعهدهندگان و ممیزان دسترسپذیری
ابزار رنگ ی که با چهار جریان کاری رایج سازگار است.
ممیزی دسترسپذیری WCAG
جفتهای پیشزمینه/پسزمینه را وارد کنید و نسبت کنتراست بهعلاوهٔ نشانهای AA / AAA را بخوانید. ترکیبهای مردود را پیش از انتشار شناسایی کنید — با آستانههای اجباری W3C یعنی 4.5 : 1 معمولی / 7 : 1 پیشرفته مطابقت دارد.
تبدیل CSS فرانتاند
از یک ماک طراح HEX دارید اما برای یک پیکربندی Tailwind به HSL یا برای یک stylesheet مدرن به OKLCH نیاز دارید؟ یکبار جایگذاری کنید، در هر قالبی کپی کنید. رشتههای خروجی نحو معتبر CSS Color Module Level 4 هستند.
کاوش پالت
یک رنگ پایه انتخاب کنید و بلافاصله نُه روشن و تیرهٔ ادراکی همفاصله بهعلاوهٔ هارمونیهای مکمل، سهگانه و مشابه را ببینید — در OKLCH تولید میشوند تا هر مرحله بهطور یکنواخت روشن به نظر برسد.
۱۰۰٪ خصوصی — در مرورگر شما اجرا میشود
مقادیر رنگ هرگز از دستگاه شما خارج نمیشوند. DevTools → Network را باز کنید و خواهید دید که در حین تبدیل، انتخاب، تولید پالت یا بررسی کنتراست هیچ درخواست خروجیای وجود ندارد.
- هر تبدیل (HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB) بهصورت JavaScript روی دستگاه شما اجرا میشود — فرمولها در سورس صفحه قابلمشاهدهاند.
- API EyeDropper فقط رنگهایی را برمیگرداند که شما بهطور صریح روی آنها کلیک میکنید؛ مرورگر مجوز را مدیریت میکند و هرگز به صفحه اجازه نمیدهد پیکسلهای دلخواه را ببیند.
- بدون ورود، بدون تلهمتری روی مقادیر رنگ، بدون API رنگ شخص ثالث. این سایت بهطور پیشفرض با GDPR سازگار است.
راهنماهای مرتبط
آموزشهای دستچینشده برای طراحان، توسعهدهندگان و تیمهای دسترسپذیری.
-
OKLCH in CSS — A Practical Guide for 2026
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
-
WCAG 2.2 Contrast Ratios — How They're Calculated and What "AA" vs "AAA" Means
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
پرسشهای متداول
چگونه HEX را به RGB تبدیل کنم؟
مقدار hex خود (مثلاً #ff5722) را در فیلد HEX جایگذاری کنید — ردیف RGB بلافاصله بهروزرسانی میشود. به همین ترتیب، rgb(255 87 34) را در فیلد RGB جایگذاری کنید و HEX، HSL، OKLCH و OKLAB همگی همگام میشوند. تبدیل در همهٔ قالبهای پشتیبانیشده دوطرفه است.
OKLCH چیست و چرا باید از آن استفاده کنم؟
OKLCH یک فضای رنگی CSS Color Module Level 4 است که از روشنایی ادراکی (L)، کروما (C) و تهرنگ (h) استفاده میکند — مانند HSL، اما از نظر ادراکی یکنواخت. دو رنگ OKLCH با مقدار L یکسان بهطور برابر روشن به نظر میرسند، حتی در تهرنگهای متفاوت. این موضوع توکنهای طراحی، پالتهای تولیدشده و رمپهای رنگی قابلدسترس را بسیار قابلپیشبینیتر از HSL میکند. همهٔ مرورگرهای evergreen (Chrome 111+، Safari 15.4+، Firefox 113+) از آن پشتیبانی میکنند.
آیا نتیجهٔ کنتراست WCAG قابلاعتماد است؟
بله. ما از الگوریتم WCAG 2.2 §1.4.3 استفاده میکنیم: هر کانال sRGB را خطیسازی میکنیم، روشنایی نسبی را محاسبه میکنیم (0.2126·R + 0.7152·G + 0.0722·B)، سپس (L_lighter + 0.05) / (L_darker + 0.05). AA در 4.5 : 1 برای متن معمولی و 3 : 1 برای متن بزرگ (۱۸pt+ یا ۱۴pt+ توپر) قبول میشود. AAA به ترتیب در 7 : 1 و 4.5 : 1 قبول میشود.
آیا میتوانم از تصاویر یا برنامههای دیگر نمونهبرداری کنم؟
بله — روی دکمهٔ قطرهچکان کلیک کنید تا API داخلی EyeDropper مرورگر اجرا شود. میتوانید از هر پیکسلی در هر کجای صفحه نمونه بگیرید: یک تب دیگر مرورگر، یک طرح Figma، یک فریم ویدیو، حتی یک اسکرینشات. در حال حاضر در Chrome، Edge و Opera پشتیبانی میشود؛ Firefox و Safari بهخوبی fallback میکنند (دکمه غیرفعال است).
آیا چیزی به سرور شما ارسال میشود؟
خیر. انتخابگر، هر تبدیل، تولیدکنندهٔ پالت و بررسیگر کنتراست همگی در مرورگر شما اجرا میشوند. هیچ مقدار رنگی، نمونهٔ تصویری یا متنی هرگز ارسال نمیشود. میتوانید DevTools → Network را باز کنید و راستیآزمایی کنید که در حین استفاده هیچ درخواست خروجیای وجود ندارد.