تأليف رموز نظام التصميم
حوّل قيم HEX للعلامة التجارية إلى OKLCH بحيث يكون لكل درجة في مدرّج الرموز نفس خطوة الإضاءة الإدراكية. الصق إخراج OKLCH مباشرة في CSS — لا حاجة إلى أي معالج مسبق.
منتقي ومحوّل الألوان
اختر بصرياً أو الصق أي قيمة — تبقى 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. تدعمه جميع المتصفحات الحديثة (Chrome 111+ وSafari 15.4+ وFirefox 113+).
قيم الألوان لا تغادر جهازك أبداً. افتح DevTools ← Network وسترى صفر طلبات صادرة أثناء التحويل أو الاختيار أو توليد اللوحة أو فحص التباين.
HEX
RGB
HSL
OKLCH
OKLAB
مُسمّى
لوحة الألوان
تباين WCAG 2.2
النص
الخلفية
—
معاينة
عينة عنوان كبير
عينة نص أساسي — الثعلب البني السريع يقفز فوق الكلب الكسول.
مصممة لسير العمل الفعلي
من أنظمة التصميم إلى تدقيقات إمكانية الوصول — كل صيغة وكل فحص تحتاجه، في مكان واحد.
ست مساحات ألوان
تحويل ذهاباً وإياباً بين HEX (3 / 4 / 6 / 8 خانات) وRGB(A) وHSL(A) وOKLCH وOKLAB وألوان CSS المُسمّاة. سلاسل الإخراج تطابق صياغة CSS Color Module Level 4 — الصقها مباشرة في أوراق الأنماط.
مدقق تباين WCAG 2.2
اطلع على نسبة التباين بين أي لونين مع شارات نجاح/فشل بنقرة واحدة لمستوى AA (4.5 : 1) وAAA (7 : 1)، لأحجام النص العادية والكبيرة. الحساب يطابق المرجع W3C: تخطيط sRGB، ثم اللمعان النسبي، ثم (L1+0.05)/(L2+0.05).
EyeDropper — التقط أي بكسل
انقر على القطّارة لالتقاط أي لون على شاشتك — تصاميم، لقطات شاشة، صور، حتى علامات تبويب أخرى. يستخدم EyeDropper API الأصلية على متصفحات Chromium.
لوحة قائمة على OKLCH
أنشئ 9 درجات من التدرجات الفاتحة والداكنة بالإضافة إلى التناغمات التكميلية والثلاثية والمتشابهة — مشتقة في OKLCH بحيث تكون كل خطوة متباعدة إدراكياً بشكل متساوٍ (بخلاف HSL، حيث تتفاوت الإضاءة بشدة).
خصوصية بالتصميم
كل تحويل يعمل بـ JavaScript على جهازك. لا شيء يُرفع أو يُسجَّل أو يُرسل إلى أي طرف ثالث — افتح DevTools ← Network إذا أردت التحقق بنفسك.
مبني للسرعة
JavaScript خالص، بدون إطار عمل تشغيلي. التحميل البارد أقل من 50 KB مضغوط بـ gzip؛ التحويلات وتوليد اللوحات تنتهي في أقل من ميلي ثانية واحدة على حاسوب محمول عمره خمس سنوات.
كيفية استخدام منتقي الألوان
أربع طرق للبدء، وكل صيغة متزامنة.
-
1
اختر بصرياً
اسحب داخل مربع التشبع/القيمة لاختيار الدرجة، حرّك شريط درجة اللون أسفله لتغيير اللون الأساسي، واستخدم شريط ألفا للشفافية. كل صيغة على اليمين تتحدث فوراً.
-
2
الصق أي قيمة
الصق قيمة HEX (
#4f46e5) أو RGB (rgb(79 70 229)) أو HSL (hsl(244 76% 59%)) أو OKLCH (oklch(53% 0.22 277)) أو حتى لون CSS مُسمّى (tomato) في الإدخال المطابق — يتزامن المنتقي والصيغ الأخرى جميعاً. -
3
التقط بالقطّارة
انقر زر القطّارة لالتقاط أي بكسل على شاشتك — علامة تبويب أخرى أو لقطة شاشة أو صورة أو أيقونة. يستخدم EyeDropper API الأصلية على Chrome وEdge وOpera.
-
4
انسخ أو افحص التباين
انقر أيقونة النسخ بجانب أي صيغة لوضعها في حافظتك. أو مرّر إلى قسم تباين WCAG 2.2 لفحص ما إذا كانت تركيبة المقدمة/الخلفية تجتاز AA أو AAA لأحجام النص العادية والكبيرة.
مبني للمصممين والمطورين ومدقّقي إمكانية الوصول
أداة ألوان تتلاءم مع أربعة سير عمل شائعة.
تدقيقات إمكانية الوصول WCAG
أدخل أزواج المقدمة/الخلفية واقرأ نسبة التباين بالإضافة إلى شارات AA / AAA. اكتشف التركيبات الفاشلة قبل الإطلاق — تحقق من العتبات التي يفرضها W3C وهي 4.5 : 1 عادي / 7 : 1 معزّز.
تحويل CSS للواجهة الأمامية
لديك HEX من نموذج تصميمي وتحتاج HSL لتكوين Tailwind أو OKLCH لورقة أنماط حديثة؟ الصق مرة واحدة، وانسخ بأي صيغة. سلاسل الإخراج هي صياغة CSS Color Module Level 4 صالحة.
استكشاف اللوحات
اختر لوناً أساسياً وشاهد فوراً تسع تدرجات فاتحة وداكنة متباعدة إدراكياً بالإضافة إلى التناغمات التكميلية والثلاثية والمتشابهة — مولّدة في OKLCH بحيث تبدو كل خطوة متساوية السطوع.
100% خاص — يعمل في متصفحك
قيم الألوان لا تغادر جهازك أبداً. افتح DevTools ← Network وسترى صفر طلبات صادرة أثناء التحويل أو الاختيار أو توليد اللوحة أو فحص التباين.
- كل تحويل (HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB) يعمل بـ JavaScript على جهازك — الصيغ مرئية في مصدر الصفحة.
- EyeDropper API لا تُعيد إلا الألوان التي تنقر عليها صراحة؛ المتصفح يدير الإذن ولا يسمح للصفحة أبداً برؤية بكسلات اعتباطية.
- بدون تسجيل دخول، بدون قياس عن بُعد لقيم الألوان، بدون أي 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. تدعمه جميع المتصفحات الحديثة (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 للنص الكبير (18 نقطة فأكثر أو 14 نقطة عريض فأكثر). يجتاز AAA عند 7 : 1 و4.5 : 1 على التوالي.
هل يمكنني التقاط الألوان من الصور أو من تطبيقات أخرى؟
نعم — انقر زر القطّارة لتشغيل EyeDropper API المدمجة في المتصفح. يمكنك التقاط أي بكسل في أي مكان على الشاشة: علامة تبويب أخرى، تصميم Figma، إطار فيديو، حتى لقطة شاشة. مدعومة حالياً في Chrome وEdge وOpera؛ بينما يتراجع Firefox وSafari بأمان (يكون الزر معطّلاً).
هل يُرسل أي شيء إلى خادمكم؟
لا. المنتقي وكل تحويل ومولد اللوحة ومدقق التباين، جميعها تعمل في متصفحك. لا تُنقل أبداً قيم ألوان أو عينات صور أو نصوص. يمكنك فتح DevTools ← Network والتحقق من عدم وجود أي طلبات صادرة أثناء الاستخدام.