Utilore

مولّد لوحات الألوان

اختر لونًا أساسيًا وستحسب الأداة بقيّة المجموعة وفق عجلة الألوان. انقر أي عيّنة لنسخ كودها، أو حمّل صورة لتأخذ اللوحة منها مباشرة.

نظام الألوان

انقر على العيّنة لنسخ الكود

    لوحة ألوان من صورة

    الصورة لا تغادر جهازك — يقرؤها المتصفّح نفسه.

      طريقة الاستخدام

      1. اكتب كود اللون أو افتح المنتقي — تُعاد اللوحة رسمًا مع كل اختيار.
      2. بدّل النظام: اللون المتكامل يقع مقابله على العجلة، والثلاثي يقسم الدائرة ثلاثًا.
      3. انقر عيّنة لنسخ الكود، أو انسخ المجموعة كلّها متغيّرات CSS.
      4. لأخذ الألوان من صورة، اختر ملفًا — تقرؤه أجهزتك وحدها.

      معلومات مفيدة

      من أين جاءت الزوايا

      نظام الألوان ليس مسألة ذوق بل هندسة على عجلة الألوان. اللون المتكامل يقع تمامًا في الجهة المقابلة عند 180°؛ والثلاثي يقسم الدائرة ثلاثة أقسام متساوية من 120°؛ والمتشابهة جيران ضمن ثلاثين درجة. تدير الأداة درجة اللون مع الإبقاء على التشبّع والإضاءة، فتخرج الألوان المرافقة بالحيوية والعمق نفسيهما.

      لماذا تُعطي الصورة ألوانًا حقيقية لا طينًا

      عدّ أكثر البكسلات تكرارًا لا ينجح مع الصور: في السماء وحدها مليون درجة زرقاء متقاربة، كل واحدة تظهر مرّة. تقسم هذه الأداة فضاء اللون نصفين عبر القناة الأوسع مدى وتكرّر ذلك حتى تكفي الصناديق — فتبقى السماء والوجه والظل كلٌّ على حدة بدل بنّي واحد متوسّط.

      الأسئلة الشائعة

      أي نظام يناسب موقع ويب؟

      الأحادي والمتشابه هما الخيار الآمن: تبقى الصفحة هادئة ولا تتنازع العناصر على الانتباه. أبقِ اللون المتكامل للعنصر الوحيد الذي يجب أن يُلاحَظ — زر أو شارة أو تنبيه.

      كيف أستخدم اللوحة في الكود؟

      انسخ كتلة متغيّرات CSS أسفل العيّنات وألصقها في ملف الأنماط. تخرج الأسماء بصيغة ‎--color-1‎ … ‎--color-6‎، وهي أوضح في مشروع غريب من صفٍّ من الأرقام الستّ عشرية.

      هل تُرفع صورتي إلى أي مكان؟

      لا. تُفكّ الصورة داخل الصفحة وتُصغَّر إلى 160 بكسل قبل عدّ الألوان — لا شيء يغادر الجهاز، ولذلك تظهر النتيجة فورًا.

      لماذا لا ينتهي صف الدرجات الداكنة بالأسود؟

      الأسود الخالص والأبيض الخالص لا يحملان معلومة — يعرفهما الجميع ولا يشغلان في اللوحة سوى مكان. يتوقّف الصف قبل الحافة، فتبقى كل عيّنة لونًا صالحًا للاستعمال.

      أدوات ذات صلة