appstoryoAppStoryolapnito.cz s.r.o.blog/camera-color-to-css-variables-web/arكيف تحوّل لوناً التقطته الكاميرا إلى متغيرات CSS لموقعك الإلكترونيLubor Šimůnek25082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0التقط ألواناً حقيقية بكاميرتك، حوّلها إلى HSL وأنشئ متغيرات CSS ورموز تصميم في دقائق. دليل خطوة بخطوة.
التصميمarticleAppStoryoلماذا يستلهم المصممون الألوان من العالم الحقيقيأفضل لوحات الألوان نادراً ما تولد على الشاشة. تنبثق من قماش يحدد هوية علامة أزياء، أو جدار صُوِّر خلال رحلة ليصبح اللون الرئيسي لموقع سياحي، أو منتج مادي يجب استنساخه بدقة في العالم الرقمي. المواد الجسدية تحمل أصالةً عاطفية يصعب على العينات الاصطناعية محاكاتها.
التحدي كان دائماً في الترجمة: ترى اللون وتحتاج الكود.
أساسيات متغيرات CSSالخصائص المخصصة في CSS — المعروفة بمتغيرات CSS — تتيح تعريف قيمة مرة واحدة وإعادة استخدامها في كل مكان. صرّح عنها في :root لكي يرثها كل عنصر في الصفحة:
:root {
--color-brand-500: hsl(220, 60%, 45%);
}غيّر القيمة في مكان واحد فقط وسيتوسع التغيير تلقائياً إلى كل المكوّنات التي تستخدمها.
خطوة بخطوة: من الكاميرا إلى متغير CSSافتح Color Picker Camera: HEX RGB، وجّه الكاميرا المباشرة نحو أي مادة — جدار، أو عبوة، أو كتالوج مطبوع — ثم اضغط لتثبيت اللون. يعرض التطبيق فوراً قيم HEX وRGB وHSL. انسخ قيمة HSL بضغطة واحدة.
الصقها مباشرةً في ورقة الأنماط وولّد مقياساً لونياً كاملاً بتعديل قيمة الإضاءة فحسب:
:root {
--color-brand-900: hsl(220, 60%, 20%);
--color-brand-500: hsl(220, 60%, 45%);
--color-brand-100: hsl(220, 60%, 90%);
}رموز التصميم والتكامل مع Figmaيتيح Color Picker Camera: HEX RGB تصدير لوحة الألوان المحفوظة كملف JSON — وهو التنسيق ذاته الذي تستهلكه أداة Tokens في Figma وأدوات مثل Style Dictionary. كما تقترح ميزة تناسق الألوان متغيرات تكميلية وثلاثية فور التقاط اللون، مما يتيح لك بناء لوحة كاملة قبل فتح الحاسوب.
سير العمل الكامل — التقاط بالكاميرا، تصدير JSON، متغيرات CSS — يُقلص المسافة بين العالم المادي وورقة الأنماط إلى دقائق معدودة.
حمّل Color Picker Camera: HEX RGB مجانًا لأجهزة iOS أو Android — بلا إعلانات، وبلا تتبّع، ويعمل دون اتصال بالإنترنت تمامًا.