الأدوات

لوحة ألوان أي موقع

أدخل عنوان موقع واحصل على لوحة ألوانه: كل لون مع دوره، بصيغة أكواد hex أو متغيرات CSS أو سمة Tailwind أو JSON.

stripe.com

تم القياس قبل 4 أيام.

background#ffffffsurface#e5edf5surface-2#ffe0efsurface-3#ffe0d1foreground#061b31muted-foreground#64748dprimary#533afdon-primary#ffffff

1#ffffff  background
2#e5edf5  surface
3#ffe0ef  surface-2
4#ffe0d1  surface-3
5#061b31  foreground
6#64748d  muted-foreground
7#533afd  primary
8#ffffff  on-primary
9#0f4d29  secondary
10#e5edf5  border

افتح صفحة الإجابة الكاملة افتح حزمة التصميم

كيف يعمل

يفتح Stylepack الموقع في متصفح حقيقي، ويقيس ما يُعرض فعلًا (لا ما يقوله ملف الأنماط) بأربعة عروض وفي كلا الوضعين، ويحفظ النتيجة كحزمة تصميم. الموقع المقاس سابقًا يجيب فورًا؛ والجديد يستغرق أقل من دقيقة. كل قيمة في هذه الصفحة تأتي من تلك الحزمة.

أسئلة

كيف تُقاس اللوحة؟

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

هل تشمل ألوان الوضع الداكن؟

عندما يكون للموقع سمة داكنة، تُقاس هي أيضًا ويحمل CSS كتلة داكنة بالقيم المقابلة.

هل يمكنني الحصول على اللوحة بصيغة Tailwind أو Figma؟

تقدّم النتيجة أكواد hex ومتغيرات CSS وسمة Tailwind v4 وJSON. وتضيف حزمة التصميم ملف tokens.json بصيغة W3C design tokens، التي تقرأها Style Dictionary وإضافات Figma.