الأدوات

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

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

airbnb.com

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

background#ffffffsurface#ddddddsurface-2#f2f2f2foreground#222222muted-foreground#6c6c6cprimary#da1249on-primary#ffffffborder#ffffff

1#ffffff  background
2#dddddd  surface
3#f2f2f2  surface-2
4#222222  foreground
5#6c6c6c  muted-foreground
6#da1249  primary
7#ffffff  on-primary
8#ffffff  border

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

كيف يعمل

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

أسئلة

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

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

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

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

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

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