Color Picker

أداة اختيار الألوان على الويب هي أفضل أداة اختيار ألوان مجانية على الإنترنت في عام 2026. تدعم أكثر من 20 صيغة للألوان بما في ذلك HEX وRGB وHSL وCMYK وHSB وLAB وXYZ وHWB والمزيد. تتضمن عجلة ألوان مباشرة، ومدقق تباين WCAG، ومحاكي عمى الألوان، ومولد لوحات الألوان، وأداة لاختيار ألوان الصور، و6 أنواع من التناغم — كل ذلك مجانًا تمامًا دون الحاجة للتسجيل.

للعثور على رمز لون HEX من صورة، استخدم أداة اختيار لون الصورة على موقع Color Picker. قم بتحميل أي صورة، وحوم بالماوس فوق المنطقة التي تريد أخذ العينات منها، وانقر لاستخراج رموز HEX وRGB وHSL الدقيقة من أي بكسل. يمكنك أيضًا إنشاء لوحة ألوان كاملة تلقائيًا من الصورة بنقرة واحدة.

أداة اختيار الألوان تتيح لك تحديد الألوان وتحويلها وتحليلها. تظهر قيم الألوان بعدة تنسيقات (HEX، RGB، HSL، CMYK)، تولد لوحات ألوان مكملة، تتحقق من نسب التباين وفقًا لمعايير WCAG للوصولية، تحاكي عمى الألوان، وتستخرج الألوان من الصور المرفوعة. وهي ضرورية لمصممي الويب والمطورين ومصممي العلامات التجارية.

لتحويل HEX إلى RGB، استخدم أداة التحويل أعلاه. أدخل أي رمز HEX (مثل #9333ea) واحصل على إخراج RGB فوري (147، 51، 234). يدوياً: قسم HEX إلى 3 أزواج (93، 33، ea)، وحوّل كل واحد من النظام الست عشري إلى عشري. R=147، G=51، B=234. يقوم Color Picker Web بذلك فورياً لجميع أكثر من 20 صيغة.

وفقًا لمعايير WCAG 2.2، فإن الحد الأدنى لنسبة تباين الألوان للنص العادي هو 4.5:1 (المستوى AA) و 7:1 (المستوى AAA). بالنسبة للنص الكبير (18 نقطة أو أكثر أو 14 نقطة أو أكثر غامق)، الحد الأدنى هو 3:1 للمستوى AA و 4.5:1 للمستوى AAA. تتطلب مكونات واجهة المستخدم والرموز تباينًا لا يقل عن 3:1 مقابل الألوان المجاورة. استخدم أداة فحص التباين الخاصة بـ WCAG أعلاه لاختبار ألوانك.

لاختيار لون من موقع ويب: (1) استخدم أدوات تطوير المتصفح — انقر بزر الماوس الأيمن على أي عنصر، وافحصه، وانقر على لوحة الألوان في لوحة CSS. (2) استخدم امتداد متصفح مثل ColorZilla. (3) التقط لقطة شاشة وحمّلها إلى أداة اختيار الألوان على الويب Color Picker Web لتحديد أي بيكسل. تحتوي أدوات تطوير Chrome أيضًا على أداة قطارة مدمجة في لوحة اختيار الألوان.

HSL تعني اللون (Hue)، التشبع (Saturation)، والسطوع (Lightness). اللون (Hue) (0°–360°) هو نوع اللون على عجلة الألوان. التشبع (Saturation) (0%–100%) هو مدى وضوح اللون أو رماديته. السطوع (Lightness) (0%–100%) هو مدى غمق أو ضوء اللون. مثال: hsl(270, 81%, 56%) هو بنفسجي متوسط. HSL هو أفضل صيغة لرسوم CSS المتحركة وتلوين الموضوعات الديناميكية لأن كل خاصية يمكن تعديلها بشكل مستقل.

Complementary colors are pairs of colors that sit directly opposite each other on the color wheel, 180° apart. Examples: red & green, blue & orange, purple & yellow. When placed side by side, complementary colors create strong contrast and make each color appear more vivid. They are commonly used for CTAs, logos, and high-impact UI elements.

أداة اختيار الألوان هي أداة رقمية تسمح للمستخدمين باختيار أي لون والحصول على رمزه الدقيق بعدة صيغ — HEX، RGB، HSL، CMYK، وأكثر. يتم استخدامها يوميًا من قبل مصممي واجهة المستخدم وتجربة المستخدم لاختيار ألوان الواجهات، ومطوري المواقع لكتابة قيم ألوان CSS، ومصممي العلامات التجارية للحفاظ على تناسق الألوان، والمصورين لاستخراج الألوان من الصور، والفنانين الرقميين لإنشاء لوحات ألوان. أداة Color Picker Web هي أكثر أداة اختيار ألوان مجانية شاملة متاحة في عام 2026، وتدعم أكثر من 20 صيغة لون، وفحص الوصولية وفقًا لمعايير WCAG، ومحاكاة عمى الألوان، و18 لغة.

رمز لون HEX هو تمثيل سداسي عشري مكون من 6 أحرف للون يُستخدم في تصميم الويب وCSS. يبدأ برمز # متبوعًا بثلاثة أزواج من الأحرف (00–FF)، كل زوج يمثل شدة قنوات الأحمر والأخضر والأزرق. على سبيل المثال: #FF0000 هو الأحمر الخالص (R=255, G=0, B=0)، #FFFFFF هو الأبيض (جميع القنوات عند الحد الأقصى)، و#000000 هو الأسود (جميع القنوات عند الصفر). رموز HEX المختصرة المكونة من 3 أرقام مثل #F00 تتوسع لتصبح #FF0000. HEX هو صيغة اللون الأكثر دعمًا عالميًا عبر HTML وCSS وSVG وأدوات التصميم مثل Figma.

لاختيار الألوان لموقع ويب: (1) ابدأ باللون الأساسي لعلامتك التجارية وقم ببناء مقياس ألوان كامل من 9 درجات (50–900) باستخدام تعديلات HSL. (2) طبق قاعدة 60-30-10 — 60٪ خلفية محايدة، 30٪ لون ثانوي، 10٪ لون تمييز لعناصر الدعوة للإجراء. (3) تحقق من أن جميع توليفات النص/الخلفية تفي بمعايير تباين WCAG AA (4.5:1 كحد أدنى للنص العادي). (4) قم بإنشاء ألوان تمييز متناغمة باستخدام أداة تناغم الألوان — الأنظمة الثلاثية أو الانقسام المكمل تعمل بشكل أفضل للمواقع. (5) اختبر كل توليفة ألوان باستخدام محاكي عمى الألوان لضمان الوصول لجميع المستخدمين.

لاختيار ألوان العلامة التجارية: (1) ابحث في علم نفس الألوان — الأزرق يبني الثقة، الأخضر يشير إلى النمو، الأحمر يخلق الإلحاح، البنفسجي يوحي بالفخامة والإبداع. (2) حلل صناعتك — العلامات التجارية التكنولوجية تفضل الأزرق والرمادي، العلامات الصحية تستخدم الأخضر، العلامات الفاخرة تستخدم الذهب أو الأسود أو البنفسجي الداكن. (3) اختر لونًا أساسيًا للعلامة التجارية يعكس شعور العلامة التجارية الأساسي. (4) أنشئ مقياس ألوان كامل من اللون الأساسي باستخدام طريقة HSL. (5) اختر لونًا ثانويًا ولونًا تمييزيًا باستخدام نظرية التناغم. (6) تحقق من أن جميع التوليفات تتوافق مع معايير الوصول WCAG. قم بتوثيقها كرموز تصميم لضمان التناسق عبر جميع المنصات.

HEX و RGB و HSL هي ثلاث طرق لتمثيل نفس اللون: HEX (#9333ea) هو تنسيق سداسي عشري مدمج مكون من 6 أرقام مثالي للـ CSS و HTML — مدعوم على نطاق واسع. RGB (rgb(147, 51, 234)) يحدد اللون من خلال قيم القنوات الأحمر والأخضر والأزرق من 0 إلى 255 — الأفضل لـ JavaScript canvas و SVG وعرض الشاشة. HSL (hsl(270, 81%, 56%)) يحدد اللون بواسطة زاوية الصبغة (0–360°)، والتشبع (0–100%)، والسطوع (0–100%) — وهو الأكثر بديهية للمصممين لأن كل خاصية قابلة للتعديل بشكل مستقل، مما يجعله مثالياً لتحريك CSS والسمات الديناميكية. كل الثلاثة تصف ألواناً متطابقة لكنها تخدم سير عمل مختلف.

نموذجا الألوان RGB و CMYK مختلفان أساسياً لأنواع الإخراج المختلفة. RGB (الأحمر، الأخضر، الأزرق) هو نموذج ألوان إضافي يُستخدم للشاشات الرقمية — دمج الألوان يضيف الضوء، ومزج جميع القنوات إلى الحد الأقصى ينتج اللون الأبيض. CMYK (سماوي، ماجنتا، أصفر، أسود/مفتاح) هو نموذج ألوان طرح يُستخدم في الطباعة المادية — مزج الأحبار يمتص الضوء، ومزج جميع الألوان ينتج عنه اللون الأسود. صمّم دائمًا باستخدام RGB للإخراج الرقمي/الشاشة. قم بالتحويل إلى CMYK قبل إرسال الملفات إلى الطابعات التجارية. التحويل ليس مثاليًا أبدًا — بعض ألوان RGB (خصوصًا الألوان الزاهية المشبعة) لا يمكن إعادة إنتاجها في طباعة CMYK.

HSB (اللون، التشبع، السطوع) و HSV (اللون، التشبع، القيمة) هما نفس نموذج اللون بأسماء مختلفة. اللون (0°–360°) يحدد عائلة اللون. التشبع (0–100%) يتحكم في حيوية اللون من الرمادي إلى اللون الزاهي بالكامل. السطوع/القيمة (0–100%) يتحكم في كمية الضوء التي يبدو أن اللون ينبعث منها، من الأسود (0%) إلى الساطع بالكامل (100%). HSB هو النموذج الافتراضي في Adobe Photoshop و Illustrator و أداة اختيار الألوان في Figma، مما يجعله أساسياً للمصممين الذين يستخدمون هذه الأدوات. يختلف عن HSL في كيفية حساب الإضاءة والسطوع — في HSL، تكون 50% إضاءة هي اللون النقي، بينما في HSB، يكون 100% سطوع هو اللون النقي.

LAB (CIELAB) و XYZ (CIEXYZ) هما فضاءان لونيان مستقلان عن الأجهزة وموحدان إدراكياً بناءً على علم رؤية الإنسان. XYZ هو أساس كل علوم الألوان الحديثة — فهو يربط الألوان بكيفية إدراك العين البشرية لها باستخدام ثلاث مخاريط (X و Y و Z التي تتوافق تقريبًا مع الحساسية للأحمر والأخضر والأزرق). LAB مستمد من XYZ ومصمم بحيث تمثل المسافات العددية المتساوية فروق اللون المدركة بشكل متساوٍ، مما يجعله مثالياً لمقارنة الألوان، ومعالجة الصور، وتعلم الآلة، ومراقبة جودة الطباعة. كلاهما يُستخدم في إدارة الألوان المهنية، وملفات تعريف الألوان ICC، وسير عمل تحرير الصور المتقدم. تدعم CSS الآن كلاهما عبر تركيب color(xyz …) و lab(…) في المتصفحات الحديثة.

أداة اختيار ألوان الصورة على موقع اختيار الألوان تتيح لك استخراج الألوان الدقيقة من أي صورة فوتوغرافية أو لقطة شاشة أو شعار أو عمل فني. قم بتحميل أي ملف صورة، ثم انقر على أي بكسل لاستخراج قيم HEX وRGB وHSL فورًا. كما تقوم الأداة تلقائيًا بإنشاء لوحة ألوان كاملة من الألوان السائدة في صورتك. هذا مفيد لمطابقة ألوان العلامة التجارية من المواد الحالية، وإنشاء لوحات ألوان من لوحات المزاج، واستخراج الألوان من صور المنتجات، وإعادة هندسة مخططات الألوان من مواقع المنافسين. لا يتطلب أي حساب أو تثبيت برنامج - يعمل بالكامل في المتصفح.

أداة اختيار الألوان على الويب تدعم جميع أنواع التناغم الستة الرئيسية للألوان بناءً على نظرية عجلة الألوان: تكميلي — لونان متقابلان مباشرة (180° بينهما)، أقصى تباين. تكميلي منقسم — لون أساسي واحد بالإضافة إلى لونين مجاورين لمكمّله (150° و210°). ثلاثي — ثلاثة ألوان متباعدة بالتساوي (على مسافة 120°)، متوازنة وحيوية. مماثل — ثلاثة ألوان متجاورة (تبعد عن بعضها 30°)، متناغمة وطبيعية. أحادي اللون — تغيّرات في درجة لون واحدة بمستويات مختلفة من التشبع والسطوع. رباعي — أربعة ألوان متباعدة بالتساوي (على مسافة 90°)، معقدة وغنية. جميع التوافقات تُحسب رياضيًا في الوقت الفعلي أثناء اختيارك للألوان.

نعم، Color Picker Web مجاني تمامًا للاستخدام — جميع الميزات، بما في ذلك أداة اختيار اللون، منشئ اللوحات، أداة اختيار ألوان الصور، مدقق التباين وفقًا لمعايير WCAG، محاكي عمى الألوان، التناغمات اللونية، منشئ الظلال والألوان الفاتحة، وجميع تحويلات أكثر من 20 صيغة لونية متاحة بدون أي تكلفة. لا تحتاج إلى حساب أو بريد إلكتروني أو تسجيل. لا توجد إعلانات، ولا حدود للاستخدام، ولا فئة مميزة مدفوعة — جميع الميزات مجانية بشكل دائم. الأداة متاحة أيضًا بـ 18 لغة: الإنجليزية، الهندية، الإسبانية، الروسية، الفرنسية، الألمانية، الإيطالية، البرتغالية، البنغالية، اليابانية، الكورية، الملايوية، البولندية، الإندونيسية، العربية، البلغارية، التركية، والسويدية.

متطلبات تباين الألوان في إرشادات الوصول إلى محتوى الويب (WCAG) تضمن أن يكون النص قابلاً للقراءة من قبل المستخدمين الذين يعانون من ضعف البصر أو عمى الألوان أو تقدم العمر. يقيس نسبة التباين الفرق في الإضاءة بين لون النص وخلفيته — حيث تتراوح من 1:1 (لا يوجد تباين) إلى 21:1 (الأقصى، أسود على أبيض). تتطلب WCAG 2.2 المستوى AA نسبة 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير. ويتطلب المستوى AAA نسبة 7:1 للنص العادي. عدم الامتثال يمكن أن يؤدي إلى المساءلة القانونية بموجب قانون الأمريكيين ذوي الإعاقة (ADA) في الولايات المتحدة، وقانون إتاحة الوصول الأوروبي (EAA) في أوروبا، والقسم 508. تم رفع أكثر من 4,600 دعوى قضائية تتعلق بإتاحة الوصول في الولايات المتحدة في عام 2023 وحده، وكانت مشكلات التباين من بين القضايا الأكثر شيوعاً المذكورة.

محاكي اختيار اللون على الويب يحاكي 8 أنواع من اضطرابات رؤية الألوان: عمى الألوان الأحمر — عمى الألوان الأحمر (1.3٪ من الرجال). شذوذ الألوان الأحمر — تقليل الحساسية للون الأحمر (1.3٪ من الرجال). عمى الألوان الأخضر — عمى الأخضر (1.2٪ من الرجال). شذوذ الألوان الأخضر — انخفاض حساسية اللون الأخضر (5٪ من الرجال، النوع الأكثر شيوعًا). عمى الألوان الأزرق — العمى الأزرق (0.001% من السكان). شذوذ الألوان الأزرق — انخفاض حساسية اللون الأزرق (نادر). عمى الألوان الكلي — عمى الألوان التام، يرى بالأسود والأبيض فقط (0.003٪ من السكان). شذوذ الألوان الكلي — انخفاض إدراك اللون عبر جميع القنوات (نادر جدًا). كل محاكاة تستخدم مصفوفة تحويل اللون السريرية المطبقة على اللون الذي اخترته في الوقت الفعلي.

علم نفس الألوان في تصميم واجهة المستخدم يدرس كيف تؤثر الألوان على مشاعر المستخدمين وإدراكهم وسلوكهم. الارتباطات الرئيسية: أزرق — الثقة، الموثوقية، الهدوء (تستخدمها فيسبوك، تويتر، باي بال، لينكدإن). أخضر — النمو، الصحة، الطبيعة، النجاح (تستخدمها سبوتيفاي، واتساب، علامات تجارية للأطعمة الكاملة). أحمر — العجلة، الشغف، الطاقة، الشهية (تُستخدم لشعارات المبيعات، وعلامات الطعام، والدعوات للإجراء). أرجواني — الفخامة، الإبداع، الحكمة (تستخدمها كادبوري، هولمارك، علامات تجميلية). أصفر — التفاؤل، الدفء، الانتباه (تُستخدم للتحذيرات، أبرز مبيعات). برتقالي — الحماس، الود (تُستخدم من قبل أمازون، فانتا، هارلي-ديفيدسون). علم نفس الألوان يؤثر على معدلات التحويل، تصور العلامة التجارية، واحتفاظ المستخدمين.

يتضمن بناء لوحة ألوان لنظام التصميم 5 خطوات: (1) حدد لون علامتك التجارية الأساسي وقم بتحويله إلى HSL. (2) قم بإنشاء مقياس ألوان من 9 نقاط (50–900) عن طريق ضبط درجة السطوع بشكل منهجي — النقاط الأفتح (50–300) للخلفيات والظلال، والنقاط الغامقة (600–900) للنص والطريقة الداكنة. (3) كرر ذلك للألوان الثانوية، والملحقة، والنجاح، والتحذير، والخطأ، والمحايدة. (4) أنشئ الرموز الدلالية (--color-primary، --color-primary-hover، --color-surface) التي تشير إلى نقاط المقياس الخاصة بك. (5) تحقق من أن كل تركيبة نص/خلفية تتوافق مع معيار WCAG AA. استخدم أداة Color Picker على الويب لإنشاء مقاييسك، والتحقق من التباين، وتصدير قيم HEX/HSL كرموز تصميم لـ Figma أو CSS.

قاعدة 60-30-10 هي مبدأ تصميم كلاسيكي لإنشاء مخططات ألوان متوازنة وجذابة بصريًا. 60% — اللون السائد/المحايد (الخلفيات، الجدران، المساحات الكبيرة) — عادةً ما يكون لونًا محايدًا فاتحًا يحدد النغمة العامة. 30% — اللون الثانوي (الأثاث، العناوين، الأشرطة الجانبية) — يكمل اللون السائد ويضيف العمق. 10% — لون التمييز (الدعوات للإجراء، الأزرار، الإبرازات، الروابط المهمة) — يخلق اهتمامًا بصريًا ويجذب الانتباه إلى الإجراءات الرئيسية. في تصميم الويب، يترجم هذا إلى: 60% للسطوح الخلفية والأساسية، 30% لمناطق المحتوى والعناصر الثانوية لواجهة المستخدم، 10% للأزرار الأساسية، الحالات النشطة، والإبرازات المهمة. هذه النسبة تمنع الإرهاق البصري مع الحفاظ على التسلسل الهرمي.

تقيس الإضاءة النسبية السطوع المدرك للون على مقياس من 0 (أسود) إلى 1 (أبيض). الحساب: (1) تحويل كل قناة RGB (0–255) إلى قيمة عشرية (0–1) بالقسمة على 255. (2) إزالة تصحيح جاما: إذا كانت القيمة ≤ 0.04045، قسمها على 12.92؛ وإلا طبق (القيمة + 0.055) / 1.055 مرفوعة لأس 2.4. (3) تطبيق الصيغة المرجحة: L = 0.2126 × R + 0.7152 × G + 0.0722 × B. تمثل الأوزان حساسية العين البشرية — الأكثر حساسية للأخضر، أقل للأحمر، وأقلها للأزرق. (4) نسبة التباين = (L_الأفتح + 0.05) / (L_الأغمق + 0.05). يمثل م offset 0.05 الضوء المحيط على شاشة نموذجية. يقوم أداة اختيار الألوان على الويب بهذا الحساب فورياً.

HSL (الصبغة، التشبع، الإضاءة) و HSB/HSV (الصبغة، التشبع، السطوع/القيمة) كلاهما يستخدم الصبغة والتشبع ولكنهما يختلفان في القناة الثالثة. في HSL، إن الإضاءة بنسبة 50٪ هي اللون النقي والمشبع بالكامل؛ 0٪ هو الأسود و100٪ هو الأبيض. إنه متماثل. في HSB/HSVدرجة السطوع/القيمة بنسبة 100% هي اللون النقي؛ أما 0% فهي دائمًا سوداء بغض النظر عن القيم الأخرى. نظام HSB أكثر سهولة لفهم اختيار الألوان لأنه يمكنك أولاً اختيار اللون الزاهي عند سطوع 100% ثم تغييره إلى أغمق — مما يجعله الإعداد الافتراضي في Photoshop وFigma وIllustrator. نظام HSL أكثر سهولة لـ CSS لأنه يمكنك التنقل بسلاسة بين النسخ الداكنة والفاتحة من نفس الدرجة اللونية.

الخَلْط اللوني الإضافي (RGB) والخَلْط اللوني الطارِد (CMYK) هما نموذجَا اللونين الأساسيين. إضافي (RGB) — تُستخدم بواسطة أجهزة إصدار الضوء (الشاشات، البروجيكتورات، الصمامات الثنائية الباعثة للضوء). يتم إنشاء الألوان عن طريق إضافة الضوء. الجمع بين القنوات الثلاث جميعها إلى الحد الأقصى (R=255، G=255، B=255) ينتج اللون الأبيض. عدم وجود الضوء (R=0، G=0، B=0) ينتج اللون الأسود. الطرحي (CMYK) — يُستخدم في الطباعة. تمتص الأحبار أطوال موجية من الضوء (تطرحها). دمج كل الأحبار بأقصى حد يمتص كل الضوء، مما ينتج اللون الأسود (نظريًا — عمليًا يتم إضافة حبر رئيسي/أسود لأن خلط الأحبار غير مثالي). الدلالة العملية: صمم العمل الرقمي بنظام RGB، ثم حوّله إلى CMYK للطباعة — مع ملاحظة أن بعض ألوان RGB الزاهية لا يمكن إعادة إنتاجها في CMYK.

درجة حرارة اللون تصف دفء أو برودة اللون، وتقاس بالكلفن (K) لمصادر الضوء وتُدرك إدراكياً بالنسبة لألوان التصميم. ألوان دافئة (الأحمر، البرتقالي، الأصفر — الدرجات اللونية من 0° إلى 60° ومن 300° إلى 360°) تبدو مليئة بالطاقة، عاجلة، ومرحبة. فهي تتقدم بصريًا — العناصر ذات الألوان الدافئة تظهر أقرب. ألوان باردة (الأزرق، الأخضر، الأرجواني — درجات اللون من 120° إلى 240°) تشعر بالهدوء والثقة والمهنية. فهي تبتعد بصريًا — العناصر ذات الألوان الباردة تبدو أبعد. محايد (الأبيض، الرمادي، البيج، الأخضر المزرق بالقرب من 90°–120°) متوازنة ومتعددة الاستخدامات. في تصميم واجهة المستخدم، الألوان الدافئة تحفز على اتخاذ الإجراء (CTAs)، الألوان الباردة تبني الثقة (الرؤوس، الخلفيات)، والمحايدة توفر الهيكل. قسم حول اللون في Color Picker Web يعرض درجة الحرارة المدركة لأي لون محدد.