أداة مجانية، دون تسجيل

استخرج لوحة ألوان أي موقع ويب

الصق رابطًا لتحصل على ألوان العلامة التجارية والنص والخلفية والتمييز في الموقع بأكواد hex، مرتبة حسب الاستخدام. مجانًا ودون تسجيل. اطّلع على أمثلة كاملة مثل ملف DESIGN.md الخاص بـ Stripe وملف DESIGN.md الخاص بـ Linear، أو تعرّف على ما يضيفه ملف DESIGN.md فوق ذلك.

جرّب

استخدم لوحة الألوان هذه في شيفرتك

تجمع الأداة الألوان حسب الدور (الخلفية، والسطح، والنص، والعلامة التجارية، ولون التمييز، والحدود) وترتّبها حسب المساحة التي يغطيها كل لون من الصفحة. لإعادة استخدامها، أعطِ كل دور اسمًا بدلًا من لصق أكواد hex في كل مكان من أنماطك، حتى يحدّث تغيير واحد كل موضع يظهر فيه اللون.

1. سمِّ الألوان حسب الدور لا حسب درجة اللون. يظل --color-text-muted مفهومًا بعد إعادة التصميم؛ أما --gray-600 فلا يوضح مكان استخدامه. ضع أكواد hex التي نسختها مكان القيم هنا.

:root {
  --color-brand: #635bff;
  --color-text: #0a2540;
  --color-text-muted: #425466;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f9fc;
  --color-border: #e3e8ee;
}

body { background: var(--color-surface); color: var(--color-text); }
a, .button-primary { color: var(--color-brand); }

2. استخدمها في Tailwind. يصبح كل متغيّر مجموعة من الأدوات المساعدة مثل bg-surface و text-ink-muted و border-line.

/* app.css, Tailwind CSS v4 */
@theme {
  --color-brand: #635bff;
  --color-ink: #0a2540;
  --color-ink-muted: #425466;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f9fc;
  --color-line: #e3e8ee;
}

3. افحص أزواج الألوان التي تستخدمها. يحتاج النص الأساسي إلى نسبة تباين لا تقل عن 4.5:1 مع خلفيته، والنص الكبير إلى 3:1. تعرض الأداة نسبة تباين لون النص الرئيسي مع خلفية الصفحة؛ افحص أي زوج آخر تنوي استخدامه قبل النشر.

الألوان طبقة واحدة من نظام التصميم. يحفظها ملف DESIGN.md إلى جانب سلّم الخطوط والمسافات وقواعد المكونات، فيستخدم وكيل البرمجة لديك اللون الصحيح في المكان الصحيح.

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

أسئلة عن لوحة الألوان

إجابات قصيرة عن الأداة المجانية: ⁨أداة استخراج لوحة ألوان المواقع⁩.

تُحمَّل الصفحة في متصفح حقيقي، وتُقاس الألوان التي يرسمها حسب المساحة التي تغطيها من الصفحة. ويحصل كل لون على أرجح دور له: الخلفية أو اللوحة أو النص أو العلامة التجارية أو لون التمييز أو الحدود.

تعرض لوحة الألوان الألوان التي تستخدمها الصفحة فعلًا، مرتبة حسب التغطية وبحد أقصى اثني عشر لونًا. لا تُحتسب الألوان الموجودة داخل الصور أو مقاطع الفيديو، ولا الألوان التي تظهر فقط عند تمرير المؤشر، ولا الألوان المستخدمة في صفحات أخرى من الموقع.

لا. تقرأ الأداة الصفحة بالسمة التي يراها الزائر الجديد افتراضيًا، وهي فاتحة في الغالب. أما المواقع الداكنة افتراضيًا فتظهر نتيجتها داكنة. ويغطي ملف DESIGN.md الكامل الوضع الداكن إذا كان الموقع يوفره.

ليس كملف. يمكنك نسخ أكواد hex: اختر عيّنة لنسخ كود واحد، أو انسخها كلها مرة واحدة، كودًا في كل سطر.

نعم، بكسلًا واحدًا في كل مرة. في Chrome أو Edge، انقر بزر الماوس الأيمن على عنصر، واختر Inspect (فحص)، ثم انقر المربع الملوّن بجوار أي لون في لوحة Styles؛ يحتوي منتقي الألوان فيه على قطّارة تقرأ أي نقطة في الصفحة. ويوفّر Firefox القطّارة نفسها في شريط أدوات Inspector.

هذه الأداة تعرض الألوان فقط. أما ملف DESIGN.md فيغطي الألوان مع أدوارها، وسلّم الخطوط والمسافات وقواعد المكونات لموقع ما، في ملف واحد يستطيع وكيل البرمجة لديك اتّباعه.

المزيد من الأدوات المجانية

عرض كل الأدوات المجانية

  • مدقّق DESIGN.md

    الصق ملف DESIGN.md لفحص بنيته ورموزه ومعاينته، مباشرةً في المتصفح.

    افتح ⁨مدقّق DESIGN.md⁩

هل تحتاج إلى نظام التصميم كاملًا؟

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

احصل على ملف DESIGN.md