{
    "@context": "https://schema.org",
    "@type": "Article",
    "@id": "https://appstoryo.com/ar/blog/camera-color-to-css-variables-web",
    "url": "https://appstoryo.com/ar/blog/camera-color-to-css-variables-web",
    "identifier": "https://appstoryo.com/ar/blog/camera-color-to-css-variables-web",
    "name": "كيف تحوّل لوناً التقطته الكاميرا إلى متغيرات CSS لموقعك الإلكتروني",
    "headline": "كيف تحوّل لوناً التقطته الكاميرا إلى متغيرات CSS لموقعك الإلكتروني",
    "description": "التقط ألواناً حقيقية بكاميرتك، حوّلها إلى HSL وأنشئ متغيرات CSS ورموز تصميم في دقائق. دليل خطوة بخطوة.",
    "inLanguage": "ar",
    "datePublished": "2026-08-25",
    "dateModified": "2026-08-26",
    "author": {
        "@type": "Person",
        "name": "Lubor Šimůnek"
    },
    "publisher": {
        "@type": "Organization",
        "name": "lapnito.cz s.r.o.",
        "url": "https://appstoryo.com"
    },
    "isPartOf": {
        "@type": "WebSite",
        "name": "AppStoryo",
        "url": "https://appstoryo.com"
    },
    "license": "https://creativecommons.org/licenses/by/4.0/",
    "keywords": [
        "التصميم",
        "article",
        "AppStoryo"
    ],
    "articleSection": "التصميم",
    "image": "https://appstoryo.com/upload/blog/camera-color-to-css-variables-web-hero.jpg",
    "encoding": [
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/ar/blog/camera-color-to-css-variables-web.pdf",
            "encodingFormat": "application/pdf"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/ar/blog/camera-color-to-css-variables-web.md",
            "encodingFormat": "text/markdown"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/ar/blog/camera-color-to-css-variables-web.txt",
            "encodingFormat": "text/plain"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/ar/blog/camera-color-to-css-variables-web.json",
            "encodingFormat": "application/json"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/ar/blog/camera-color-to-css-variables-web.epub",
            "encodingFormat": "application/epub+zip"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/ar/blog/camera-color-to-css-variables-web.jats.xml",
            "encodingFormat": "application/xml"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/ar/blog/camera-color-to-css-variables-web.bib",
            "encodingFormat": "application/x-bibtex"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/ar/blog/camera-color-to-css-variables-web.ris",
            "encodingFormat": "application/x-research-info-systems"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/ar/blog/camera-color-to-css-variables-web.csl.json",
            "encodingFormat": "application/vnd.citationstyles.csl+json"
        }
    ],
    "cite": "Lubor Šimůnek (2026). كيف تحوّل لوناً التقطته الكاميرا إلى متغيرات CSS لموقعك الإلكتروني. AppStoryo, lapnito.cz s.r.o. https://appstoryo.com/ar/blog/camera-color-to-css-variables-web",
    "sections": [
        {
            "level": 2,
            "heading": "لماذا يستلهم المصممون الألوان من العالم الحقيقي",
            "text": "أفضل لوحات الألوان نادراً ما تولد على الشاشة. تنبثق من قماش يحدد هوية علامة أزياء، أو جدار صُوِّر خلال رحلة ليصبح اللون الرئيسي لموقع سياحي، أو منتج مادي يجب استنساخه بدقة في العالم الرقمي. المواد الجسدية تحمل أصالةً عاطفية يصعب على العينات الاصطناعية محاكاتها.\n\nالتحدي كان دائماً في الترجمة: ترى اللون وتحتاج الكود."
        },
        {
            "level": 2,
            "heading": "أساسيات متغيرات CSS",
            "text": "الخصائص المخصصة في CSS — المعروفة بمتغيرات CSS — تتيح تعريف قيمة مرة واحدة وإعادة استخدامها في كل مكان. صرّح عنها في :root لكي يرثها كل عنصر في الصفحة:\n\n:root {\n  --color-brand-500: hsl(220, 60%, 45%);\n}\n\nغيّر القيمة في مكان واحد فقط وسيتوسع التغيير تلقائياً إلى كل المكوّنات التي تستخدمها."
        },
        {
            "level": 2,
            "heading": "خطوة بخطوة: من الكاميرا إلى متغير CSS",
            "text": "افتح Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)، وجّه الكاميرا المباشرة نحو أي مادة — جدار، أو عبوة، أو كتالوج مطبوع — ثم اضغط لتثبيت اللون. يعرض التطبيق فوراً قيم HEX وRGB وHSL. انسخ قيمة HSL بضغطة واحدة.\n\nالصقها مباشرةً في ورقة الأنماط وولّد مقياساً لونياً كاملاً بتعديل قيمة الإضاءة فحسب:\n\n:root {\n  --color-brand-900: hsl(220, 60%, 20%);\n  --color-brand-500: hsl(220, 60%, 45%);\n  --color-brand-100: hsl(220, 60%, 90%);\n}"
        },
        {
            "level": 2,
            "heading": "رموز التصميم والتكامل مع Figma",
            "text": "يتيح Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) تصدير لوحة الألوان المحفوظة كملف JSON — وهو التنسيق ذاته الذي تستهلكه أداة Tokens في Figma وأدوات مثل Style Dictionary. كما تقترح ميزة تناسق الألوان متغيرات تكميلية وثلاثية فور التقاط اللون، مما يتيح لك بناء لوحة كاملة قبل فتح الحاسوب.\n\nسير العمل الكامل — التقاط بالكاميرا، تصدير JSON، متغيرات CSS — يُقلص المسافة بين العالم المادي وورقة الأنماط إلى دقائق معدودة.\n\nحمّل Color Picker Camera: HEX RGB مجانًا لأجهزة iOS (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) أو Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker) — بلا إعلانات، وبلا تتبّع، ويعمل دون اتصال بالإنترنت تمامًا."
        }
    ],
    "text": "لماذا يستلهم المصممون الألوان من العالم الحقيقي\n\nأفضل لوحات الألوان نادراً ما تولد على الشاشة. تنبثق من قماش يحدد هوية علامة أزياء، أو جدار صُوِّر خلال رحلة ليصبح اللون الرئيسي لموقع سياحي، أو منتج مادي يجب استنساخه بدقة في العالم الرقمي. المواد الجسدية تحمل أصالةً عاطفية يصعب على العينات الاصطناعية محاكاتها.\n\nالتحدي كان دائماً في الترجمة: ترى اللون وتحتاج الكود.\n\nأساسيات متغيرات CSS\n\nالخصائص المخصصة في CSS — المعروفة بمتغيرات CSS — تتيح تعريف قيمة مرة واحدة وإعادة استخدامها في كل مكان. صرّح عنها في :root لكي يرثها كل عنصر في الصفحة:\n\n:root {\n  --color-brand-500: hsl(220, 60%, 45%);\n}\n\nغيّر القيمة في مكان واحد فقط وسيتوسع التغيير تلقائياً إلى كل المكوّنات التي تستخدمها.\n\nخطوة بخطوة: من الكاميرا إلى متغير CSS\n\nافتح Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)، وجّه الكاميرا المباشرة نحو أي مادة — جدار، أو عبوة، أو كتالوج مطبوع — ثم اضغط لتثبيت اللون. يعرض التطبيق فوراً قيم HEX وRGB وHSL. انسخ قيمة HSL بضغطة واحدة.\n\nالصقها مباشرةً في ورقة الأنماط وولّد مقياساً لونياً كاملاً بتعديل قيمة الإضاءة فحسب:\n\n:root {\n  --color-brand-900: hsl(220, 60%, 20%);\n  --color-brand-500: hsl(220, 60%, 45%);\n  --color-brand-100: hsl(220, 60%, 90%);\n}\n\nرموز التصميم والتكامل مع Figma\n\nيتيح Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) تصدير لوحة الألوان المحفوظة كملف JSON — وهو التنسيق ذاته الذي تستهلكه أداة Tokens في Figma وأدوات مثل Style Dictionary. كما تقترح ميزة تناسق الألوان متغيرات تكميلية وثلاثية فور التقاط اللون، مما يتيح لك بناء لوحة كاملة قبل فتح الحاسوب.\n\nسير العمل الكامل — التقاط بالكاميرا، تصدير JSON، متغيرات CSS — يُقلص المسافة بين العالم المادي وورقة الأنماط إلى دقائق معدودة.\n\nحمّل Color Picker Camera: HEX RGB مجانًا لأجهزة iOS (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) أو Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker) — بلا إعلانات، وبلا تتبّع، ويعمل دون اتصال بالإنترنت تمامًا.",
    "markdown": "## لماذا يستلهم المصممون الألوان من العالم الحقيقي\n\nأفضل لوحات الألوان نادراً ما تولد على الشاشة. تنبثق من قماش يحدد هوية علامة أزياء، أو جدار صُوِّر خلال رحلة ليصبح اللون الرئيسي لموقع سياحي، أو منتج مادي يجب استنساخه بدقة في العالم الرقمي. المواد الجسدية تحمل أصالةً عاطفية يصعب على العينات الاصطناعية محاكاتها.\n\nالتحدي كان دائماً في الترجمة: ترى اللون وتحتاج الكود.\n\n## أساسيات متغيرات CSS\n\nالخصائص المخصصة في CSS — المعروفة بمتغيرات CSS — تتيح تعريف قيمة مرة واحدة وإعادة استخدامها في كل مكان. صرّح عنها في `:root` لكي يرثها كل عنصر في الصفحة:\n\n```\n:root {\n  --color-brand-500: hsl(220, 60%, 45%);\n}\n```\n\nغيّر القيمة في مكان واحد فقط وسيتوسع التغيير تلقائياً إلى كل المكوّنات التي تستخدمها.\n\n## خطوة بخطوة: من الكاميرا إلى متغير CSS\n\nافتح **[Color Picker Camera: HEX RGB](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)**، وجّه الكاميرا المباشرة نحو أي مادة — جدار، أو عبوة، أو كتالوج مطبوع — ثم اضغط لتثبيت اللون. يعرض التطبيق فوراً قيم HEX وRGB وHSL. انسخ قيمة HSL بضغطة واحدة.\n\nالصقها مباشرةً في ورقة الأنماط وولّد مقياساً لونياً كاملاً بتعديل قيمة الإضاءة فحسب:\n\n```\n:root {\n  --color-brand-900: hsl(220, 60%, 20%);\n  --color-brand-500: hsl(220, 60%, 45%);\n  --color-brand-100: hsl(220, 60%, 90%);\n}\n```\n\n## رموز التصميم والتكامل مع Figma\n\nيتيح **[Color Picker Camera: HEX RGB](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)** تصدير لوحة الألوان المحفوظة كملف JSON — وهو التنسيق ذاته الذي تستهلكه أداة Tokens في Figma وأدوات مثل Style Dictionary. كما تقترح ميزة تناسق الألوان متغيرات تكميلية وثلاثية فور التقاط اللون، مما يتيح لك بناء لوحة كاملة قبل فتح الحاسوب.\n\nسير العمل الكامل — التقاط بالكاميرا، تصدير JSON، متغيرات CSS — يُقلص المسافة بين العالم المادي وورقة الأنماط إلى دقائق معدودة.\n\n**حمّل Color Picker Camera: HEX RGB مجانًا لأجهزة [iOS](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) أو [Android](https://play.google.com/store/apps/details?id=com.tomas.color_picker)** — بلا إعلانات، وبلا تتبّع، ويعمل دون اتصال بالإنترنت تمامًا.",
    "html": "<h2>لماذا يستلهم المصممون الألوان من العالم الحقيقي</h2><p>أفضل لوحات الألوان نادراً ما تولد على الشاشة. تنبثق من قماش يحدد هوية علامة أزياء، أو جدار صُوِّر خلال رحلة ليصبح اللون الرئيسي لموقع سياحي، أو منتج مادي يجب استنساخه بدقة في العالم الرقمي. المواد الجسدية تحمل أصالةً عاطفية يصعب على العينات الاصطناعية محاكاتها.</p><p>التحدي كان دائماً في الترجمة: ترى اللون وتحتاج الكود.</p><h2>أساسيات متغيرات CSS</h2><p>الخصائص المخصصة في CSS — المعروفة بمتغيرات CSS — تتيح تعريف قيمة مرة واحدة وإعادة استخدامها في كل مكان. صرّح عنها في <code>:root</code> لكي يرثها كل عنصر في الصفحة:</p><pre><code>:root {\n  --color-brand-500: hsl(220, 60%, 45%);\n}</code></pre><p>غيّر القيمة في مكان واحد فقط وسيتوسع التغيير تلقائياً إلى كل المكوّنات التي تستخدمها.</p><h2>خطوة بخطوة: من الكاميرا إلى متغير CSS</h2><p>افتح <strong><a href=\"https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237\">Color Picker Camera: HEX RGB</a></strong>، وجّه الكاميرا المباشرة نحو أي مادة — جدار، أو عبوة، أو كتالوج مطبوع — ثم اضغط لتثبيت اللون. يعرض التطبيق فوراً قيم HEX وRGB وHSL. انسخ قيمة HSL بضغطة واحدة.</p><p>الصقها مباشرةً في ورقة الأنماط وولّد مقياساً لونياً كاملاً بتعديل قيمة الإضاءة فحسب:</p><pre><code>:root {\n  --color-brand-900: hsl(220, 60%, 20%);\n  --color-brand-500: hsl(220, 60%, 45%);\n  --color-brand-100: hsl(220, 60%, 90%);\n}</code></pre><h2>رموز التصميم والتكامل مع Figma</h2><p>يتيح <strong><a href=\"https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237\">Color Picker Camera: HEX RGB</a></strong> تصدير لوحة الألوان المحفوظة كملف JSON — وهو التنسيق ذاته الذي تستهلكه أداة Tokens في Figma وأدوات مثل Style Dictionary. كما تقترح ميزة تناسق الألوان متغيرات تكميلية وثلاثية فور التقاط اللون، مما يتيح لك بناء لوحة كاملة قبل فتح الحاسوب.</p><p>سير العمل الكامل — التقاط بالكاميرا، تصدير JSON، متغيرات CSS — يُقلص المسافة بين العالم المادي وورقة الأنماط إلى دقائق معدودة.</p><p><strong>حمّل Color Picker Camera: HEX RGB مجانًا لأجهزة <a href=\"https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237\">iOS</a> أو <a href=\"https://play.google.com/store/apps/details?id=com.tomas.color_picker\">Android</a></strong> — بلا إعلانات، وبلا تتبّع، ويعمل دون اتصال بالإنترنت تمامًا.</p>"
}