محوّل صيغ الألوان
اختر لوناً أو أدخل قيمته يدوياً — سيتم تحويل جميع الصيغ تلقائياً.
مولّد لوحة الألوان
اختر لوناً أساسياً لتوليد ألوان متناسقة حسب نظرية الألوان.
تدرجات اللون
اختر لوناً لتوليد 10 تدرجات داكنة و10 فاتحة منه.
محوّل الألوان ولوحة الألوان
الألوان في التصميم الرقمي تُمثَّل بعدة صيغ أشهرها HEX (ست عشري) وRGB (أحمر-أخضر-أزرق) وHSL (صبغة-إشباع-إضاءة). صيغة HEX هي الأكثر استخداماً في CSS وتبدأ بعلامة # متبوعة بـ 6 أحرف ست عشرية. صيغة RGB تُعبّر عن اللون بقيم من 0 إلى 255 لكل قناة لونية. صيغة HSL تُعبّر عن اللون بزاوية الصبغة (0-360) ونسبة الإشباع والإضاءة.
نظرية الألوان تعتمد على عجلة الألوان — الألوان المكمّلة تقع على طرفي نقيض (180°)، الألوان التماثلية متجاورة (±30°)، والثلاثية موزعة بالتساوي (120° بينها). استخدام لوحات ألوان متناسقة يُحسّن تجربة المستخدم بشكل كبير.
مميزات الأداة
حوّل بين HEX وRGB وHSL فوراً مع معاينة حية للون
ولّد ألوان مكمّلة وتماثلية وثلاثية ورباعية من أي لون
أنشئ 10 درجات داكنة و10 فاتحة من أي لون تختاره
تأكد من أن ألوانك تحقق معايير الوصول لضعاف البصر
أسئلة شائعة
ما الفرق بين HEX وRGB وHSL؟
HEX هو تمثيل ست عشري للون (مثل #FF5733) يُستخدم كثيراً في CSS. RGB يُعبّر عن اللون بثلاث قيم (أحمر، أخضر، أزرق) من 0 إلى 255. HSL يُعبّر عن اللون بزاوية الصبغة (Hue 0-360°) ونسبة الإشباع (Saturation) والإضاءة (Lightness). جميعها تُمثّل نفس الألوان لكن بطرق مختلفة — HSL أسهل للفهم البشري بينما RGB أقرب لطريقة عمل الشاشات.
ما هو تناسق الألوان (Color Harmony)؟
تناسق الألوان هو استخدام مجموعة ألوان مرتبطة ببعضها وفق قواعد عجلة الألوان. الألوان المكمّلة (متقابلة بـ 180°) تُعطي تباين قوي. التماثلية (متجاورة بـ 30°) تُعطي شعور الانسجام. الثلاثية (متباعدة بـ 120°) تُعطي توازن وحيوية. الرباعية (متباعدة بـ 90°) تُعطي تنوع كبير.
ما هو معيار WCAG لتباين الألوان؟
WCAG (إرشادات الوصول لمحتوى الويب) تُحدد نسب تباين دنيا بين لون النص والخلفية. المستوى AA يتطلب نسبة 4.5:1 للنص العادي و3:1 للنص الكبير. المستوى AAA يتطلب 7:1 للنص العادي و4.5:1 للنص الكبير. كلما زادت النسبة كان النص أسهل في القراءة خاصة لذوي ضعف البصر.