كيف تحوّل لوناً التقطته الكاميرا إلى متغيرات CSS لموقعك الإلكتروني

لماذا يستلهم المصممون الألوان من العالم الحقيقي

أفضل لوحات الألوان نادراً ما تولد على الشاشة. تنبثق من قماش يحدد هوية علامة أزياء، أو جدار صُوِّر خلال رحلة ليصبح اللون الرئيسي لموقع سياحي، أو منتج مادي يجب استنساخه بدقة في العالم الرقمي. المواد الجسدية تحمل أصالةً عاطفية يصعب على العينات الاصطناعية محاكاتها.

التحدي كان دائماً في الترجمة: ترى اللون وتحتاج الكود.

أساسيات متغيرات 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 — بلا إعلانات، وبلا تتبّع، ويعمل دون اتصال بالإنترنت تمامًا.