الأدوات

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

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

linear.app

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

background#08090asurface#101112surface-2#1c1d1esurface-3#07220aforeground#f7f8f8muted-foreground#8a8f98primary#e5e5e6on-primary#111111

1#08090a  background
2#101112  surface
3#1c1d1e  surface-2
4#07220a  surface-3
5#f7f8f8  foreground
6#8a8f98  muted-foreground
7#e5e5e6  primary
8#111111  on-primary
9#5e6ad2  secondary
10#1c1d1e  border

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

كيف يعمل

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

أسئلة

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

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

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

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

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

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