حول هذه الأداة
مُنتقي الألوان يُسقِط اللون عبر الصيغ التي تفهمها CSS. وهذا المُنتقي مبني على نموذج HSV: مربّع التشبّع/القيمة يحدّد مدى حيوية اللون وسطوعه، وشريط درجة اللون (hue) يدور حول عجلة الألوان، وشريط ألفا يحدّد الشفافية. ويُحوَّل كل تغيير باستخدام culori إلى أربع سلاسل قانونية — HEX (#rrggbb، أو #rrggbbaa عندما تكون ألفا أقل من 1)، وrgb()/rgba()، وhsl()/hsla()، وoklch() المتجانس إدراكيًا — بحيث يكون اللون نفسه جاهزًا للإسقاط في أي ورقة أنماط أو رمز تصميم مميز.
استخدمه لالتقاط قيمة دقيقة من نموذج تصميم، أو ترجمة رمز hex أرسله مصمّم إلى rgb() أو hsl() الذي يتوقعه رمزك، أو ضبط طبقة شبه شفافة وقراءة قيمة rgba()، أو تحويل لون قديم إلى oklch() الحديث من أجل CSS واسع النطاق اللوني. الصق أي سلسلة لون CSS — رمز hex، أو اسم لون مثل rebeccapurple، أو تعبير rgb()/hsl() كاملاً — ويتزامن المُنتقي بأكمله معها؛ وتبقى الألوان المنتقاة مؤخرًا في صف قابل للنقر طوال جلستك.
كل شيء يعمل في متصفحك — لا تُرفع الألوان أبدًا، ويُحفظ صف الألوان الأخيرة في الذاكرة فقط، فيُمسح عند إغلاق التبويب.
الأسئلة الشائعة
ما الفرق بين HSL وOKLCH؟
يصف HSL اللون عبر درجة اللون والتشبّع والإضاءة في فضاء sRGB، لكن قيم الإضاءة المتساوية قد تبدو مختلفة جدًا في السطوع. أما OKLCH فيستخدم نموذجًا متجانسًا إدراكيًا، بحيث تطابق قيم إضاءته وتشبّعه ما تراه العين فعليًا وتبقى متسقة عبر درجات الألوان.
كيف أُمثّل الشفافية في لون hex؟
أضِف قيمة ألفا من رقمين إلى الـ hex المؤلف من ستة أرقام، فينتج #rrggbbaa — فمثلاً #ff000080 هو أحمر بشفافية نحو 50%. وهذه الصيغة المؤلفة من 8 أرقام مدعومة في جميع المتصفحات الحديثة؛ وعندما تكون ألفا معتمة بالكامل يُصدِر المُنتقي الصيغة الأقصر #rrggbb.
هل يمكنني لصق اسم لون CSS مثل rebeccapurple؟
نعم. يقبل حقل الـ hex أي سلسلة لون CSS صالحة — أسماء الألوان، ورموز hex، وتعبيرات rgb()/hsl()/oklch() — ويُزامن الإدخال الصالح فورًا المربّع والأشرطة وكل صيغة إخراج.