منتقي الألوان عبر الإنترنت
اختر لونًا على العجلة، اضبطه بدقة على لوحة التشبع، واقرأه بكل صيغة تتحدث بها أدواتك - من #RRGGBB إلى oklch(). هذا المنتقي يقدّم أيضًا ما تتجاهله الأدوات الأخرى: ثلاث هندسات مختلفة للعجلة بما فيها عجلة الرسامين RYB، طبقات توافق تبني لك لوحة ألوان جاهزة، قناة شفافية، وتصدير اللوحة كاملة بنقرة واحدة كمتغيرات CSS أو SCSS أو JSON. كل هذا يُحسب محليًا داخل متصفحك.
ثلاث عجلات، لا عجلة واحدة
قائمة وضع العجلة تُغيّر هندسة العجلة نفسها:
- HSV وHSL هما العجلتان الرقميتان - درجات الألوان مرتبة بالطريقة التي تمزج بها شاشات RGB الضوء. يختلفان في سلوك اللوحة المربعة: أكثر زاوية سطوعًا في HSV هي درجة اللون الصافية، بينما HSL يضع درجات الألوان الصافية عند إضاءة 50% مع الأبيض فوقها.
- RYB (الرسامين) تُرتب درجات الألوان بالطريقة التي تعلّمها الفنانون: الأحمر والأصفر والأزرق كألوان أساسية، مع البرتقالي والأخضر والبنفسجي بينها. قيمتها العملية تظهر في التوافقات - على عجلة RYB، لون الأحمر المتكامل هو الأخضر ولون الأزرق المتكامل هو البرتقالي، وهما الزوجان الكلاسيكيان في مزج الأصباغ، بينما العجلة الرقمية تقرن الأحمر بالسماوي (Cyan). إذا بدت لك لوحة “متكاملة” من منتقي عادي غريبة يومًا ما، فهذا هو السبب.
توافقات تبني لك اللوحة
اختر قاعدة تحت توافق الألوان وستُحدد العجلة الألوان المرافقة، والتي تظهر كلوحة جاهزة:
- متكامل — لون مقابل واحد. أقوى تباين؛ استخدمه للتركيز على لمسة واحدة مقابل لون العلامة التجارية المهيمن.
- متكامل منقسم — الجاران المباشران للون المتكامل. تباين قريب من السابق لكن أسهل في الموازنة.
- ثلاثي — ثلاث درجات ألوان متباعدة بالتساوي. حيوي لكنه متزن؛ اجعل واحدًا مهيمنًا واستخدم الآخرَين بحذر.
- رباعي (مربع) — أربع درجات ألوان. مخططات غنية للرسوم التوضيحية وتصور البيانات؛ يصعب موازنتها في تصميم الواجهات.
- متجاور — الجيران المباشرون. توتر منخفض، مناسب للخلفيات والتدرجات.
- أحادي اللون — درجة لون واحدة بمستويات إضاءة متدرجة. الخيار الأكثر أمانًا لحالات الواجهة (تحويم، نشط، معطّل).
لوحة الألوان تنسخ المجموعة كاملة بنقرة واحدة، بالصيغة التي تختارها: HEX عادي، RGB، HSL، OKLCH، خصائص CSS المخصصة الجاهزة للصق (--color-1: …)، متغيرات SCSS أو JSON لتسليمها للكود.
الصق أي شيء، اقرأ كل شيء
حقول الإدخال تقبل عمليًا أي صيغة لون تُدخلها: #f80، #ff8800، صيغة HEX من 8 خانات مع شفافية، rgb() / rgba()، hsl()، hwb()، lch()، oklch()، oklab()، cmyk()، 0xFF8800، أو أسماء ألوان CSS مثل rebeccapurple. مهما كان المُدخل، تعود سبع مخرجات متزامنة: HEX وRGB وHSL وHSV وLCH وOKLCH وCMYK، لكل منها زر نسخ خاص بها.
شارتان مساعدتان تحت المعاينة تُسمّيان اللون لك: أقرب لون CSS مُسمّى (مفيد للنماذج الأولية السريعة وللحديث عن الألوان) وأقرب رمز Tailwind (مثل orange-500)، لتبقى داخل نظام التصميم الخاص بك بدلًا من ابتكار قيم منفردة.
اسحب مُنزلق العتامة (ألفا) أسفل المعاينة وتتحول المخرجات إلى صيغها الشفافة - #RRGGBBAA، rgba()، hsla() - مع عرض المعاينة فوق خلفية شطرنجية لتقييم الشفافية بوضوح.
أي صيغة يجب أن تستخدم؟
| الصيغة | الاسم الكامل | متى تستخدمها؟ |
|---|---|---|
| HEX | Hexadecimal | معيار الويب. مضغوطة، مدعومة عالميًا، سهلة النسخ. 8 خانات تضيف الشفافية. |
| RGB | Red, Green, Blue | الطريقة التي تفكر بها الشاشات. ثلاث قنوات ضوئية، من 0 إلى 255. الصيغة التي تتوقعها معظم واجهات البرمجة وكود الكانفاس. |
| HSL | Hue, Saturation, Lightness | للتعديل اليدوي البشري. “أفتح قليلاً” أو “أقل تشبعًا” يعني تغيير رقم واحد فقط. |
| HSV | Hue, Saturation, Value | برامج الجرافيكس. النموذج الكامن خلف المنتقيات في Photoshop وGIMP. |
| LCH | Lightness, Chroma, Hue | متجانس إدراكيًا. خطوات رقمية متساوية تبدو كخطوات بصرية متساوية - وهو ما تدّعيه HSL دون أن تحققه فعلًا. |
| OKLCH | OK Lightness, Chroma, Hue | الخيار الحديث في CSS. يُصلح انحراف درجات اللون الأزرق في LCH؛ مدعوم في جميع المتصفحات الحالية ومثالي لأنظمة رموز التصميم. |
| CMYK | Cyan, Magenta, Yellow, Key | موجّه نحو الطباعة. تحويل تقريبي للتواصل مع مصممي الطباعة - القيم النهائية تأتي دائمًا من ملف الألوان الخاص بالطابعة. |
تفاصيل صغيرة توفّر لك الوقت
- السجل يحفظ نفسه. آخر 24 لونًا عملت بها تبقى محفوظة بعد تحديث الصفحة - مُخزّنة فقط في التخزين المحلي لمتصفحك، ولا تُرفع أبدًا إلى أي مكان.
- قطارة الألوان (Eyedropper). في المتصفحات التي تدعم واجهة EyeDropper (Chrome وEdge) يمكنك التقاط لون من أي مكان على شاشتك، حتى خارج نافذة المتصفح.
- التحكم بلوحة المفاتيح. العجلة ولوحة التشبع تستجيبان لمفاتيح الأسهم لضبط دقيق على مستوى البكسل.
- الإعدادات المسبقة تغطي الألوان الأساسية الشائعة عندما تحتاج فقط نقطة بداية سريعة.
الأسئلة الشائعة (FAQ)
هل استخدام oklch() آمن في كود CSS الإنتاجي؟
نعم. جميع الإصدارات الحالية من Chrome وEdge وFirefox وSafari تدعمoklch()، وأصبحت الصيغة المفضلة لرموز التصميم (Tailwind CSS 4 يُعرّف لوحة ألوانه كاملة بها). للمتصفحات القديمة جدًا، قدّم قيمة HEX احتياطية في السطر السابق - هذه الأداة تمنحك القيمتين معًا.