منتقي الالوان ومولد تدرجات CSS — أدوات المصمم

اختار أي لون واعرف كود HEX و RGB و HSL فورًا

أداة منتقي الألوان بتخلي الشغلانة كلها في شاشة واحدة: اضغط على العينة الكبيرة، اختار اللون من نافذة الألوان بتاعة متصفحك، والأداة بتحوّله لايف للصيغ التلاتة — HEX و RGB و HSL — وكل صيغة جنبها زرار نسخ خاص بيها. من غير قوايم فرعية، ومن غير تحويل يدوي، ومن غير إعلانات واقفة بينك وبين الكود.

ولأن القيم التلاتة بتتحدث مع بعض في نفس الوقت، الأداة بتشتغل كمحوّل في كل الاتجاهات: من HEX لـ RGB، ومن RGB لـ HSL، والعكس — من غير لصق ولا حسابات. ولما توصل للون المظبوط، ضغطة واحدة بتنسخ النص اللي محتاجه ملف الـ CSS أو أداة التصميم أو ملف هوية البراند، وزرار المشاركة بيحوّل العينة وأكوادها لصورة تبعتها في شات للعميل أو لزميلك.

HEX و RGB و HSL — إزاي الصيغ التلاتة مرتبطة ببعض

HEX و RGB و HSL هي تلات طرق لكتابة نفس اللون — مفيش واحدة «أصح» من التانية، كل واحدة بتجاوب على سؤال مختلف. خد برتقالي Carbide نفسه كمثال:

• HEX — #FF4D00: ست خانات ست عشرية، كل قناة بخانتين (الأحمر FF والأخضر 4D والأزرق 00). دي الصيغة المختصرة الافتراضية على الويب، وأول حاجة بتظهرلك في أغلب أدوات التصميم.
• RGB — rgb(255, 77, 0): نفس القنوات التلاتة بس بأرقام عشرية من ٠ لـ ٢٥٥. دي الصيغة الأنسب في الكود، خصوصًا لما تحتاج شفافية: rgba(255, 77, 0, 0.5).
• HSL — hsl(18, 100%, 50%): درجة اللون كموقع على عجلة الألوان (من ٠ لـ ٣٦٠ درجة)، وبعدها التشبع والإضاءة كنسب مئوية. دي الصيغة اللي تفكر بيها لما تكون عايز نسخة أفتح أو أغمق أو أهدى من نفس اللون.

إزاي تستخرج كود اللون من الصورة

أغلب أسئلة الألوان الحقيقية بتبدأ بصورة: لوجو، أو سكرين شوت، أو صورة منتج محتاج تطابق درجتها بالظبط. دي خطوات الشغل:

• ١. افتح الصورة على شاشتك — في تاب في المتصفح، أو في محرر الصور لو عايز تقص أو تقرّب على المنطقة المطلوبة الأول.
• ٢. افتح منتقي الألوان جنبها واضغط على العينة علشان تفتح نافذة الألوان بتاعة المتصفح.
• ٣. اختار القطّارة (أغلب متصفحات الكمبيوتر فيها قطّارة جوه النافذة دي) ودوس على البكسل اللي عايز تاخد لونه.
• ٤. اقرا النتيجة: الأداة بتوريك كود البكسل ده بالظبط بصيغ HEX و RGB و HSL، وكل كود على بعد ضغطة من الحافظة.

اعمل لوحة ألوان كاملة من لون واحد

لون أساسي واحد يكفي واجهة كاملة لو اشتغلت بصيغة HSL. خد قراءة الـ HSL من منتقي الألوان، ثبّت درجة اللون والتشبع، وغيّر الإضاءة بالتدريج — حوالي ٩٠٪ بتديك خلفية فاتحة، و٧٠٪ حالة الهوفر، و٥٠٪ اللون الأساسي، و٣٠٪ درجة غامقة تنفع للنصوص. ولو نزّلت التشبع بدل الإضاءة، هتطلعلك درجات محايدة هادية تقعد ورا المحتوى من غير ما تشد العين.

وللألوان المكمّلة، حرّك درجة اللون نفسها: زيادة ١٨٠ درجة بتديك اللون المكمّل، و±٣٠ درجة بتديك ألوان متجاورة شكلها مقصود ومتناسق. انسخ كود HEX لكل درجة وانت ماشي وهيبقى عندك لوحة ألوان في دقايق. دليل اختيار الألوان بيشرح اختيار الألوان وتنسيقها خطوة بخطوة، ولو اللوحة رايحة لشغل صور، دليل تعديل الصور اون لاين بيوريك كل لون بيتحط فين — في النصوص والأشكال والعلامة المائية.

صمّم تدرج CSS وانسخ الكود بضغطة واحدة

أداة مولد التدرجات بتختصر تصميم التدرج في تلات حركات: اختار لون البداية، اختار لون النهاية، واسحب شريط الزاوية من ٠ لـ ٣٦٠ درجة. المعاينة بتتحدث لايف مع كل تعديل، فبتحكم على المزيج بعينك بدل ما تخمّن بالأرقام.

ولما الشكل يعجبك، دوس نسخ CSS والأداة بتحط على الحافظة سطر كود كامل جاهز للصق — مثلًا: background: linear-gradient(90deg, #ff4d00 0%, #2f6bff 100%);. الزقه في أي ملف تنسيق أو خاصية style أو بلوك CSS-in-JS وهتلاقي النتيجة مطابقة للمعاينة تمامًا. والأداة شغالة على الموبايل زي الكمبيوتر بالظبط، فتقدر تجهّز خلفية متدرجة في أي وقت تيجي لك الفكرة.

الفرق بين التدرج الخطي والدائري — شرح كود CSS

نوعا التدرج بيشتركوا في نفس الأساس — قايمة نقاط ألوان مفصولة بفواصل — والاختلاف الوحيد في طريقة فرد الألوان:

• الخطي: background: linear-gradient(90deg, #ff4d00 0%, #2f6bff 100%); — الألوان بتمشي على خط مستقيم، والزاوية بتحدد الاتجاه (٠ درجة لفوق، و٩٠ درجة لليمين).
• الدائري: background: radial-gradient(circle, #ff4d00 0%, #2f6bff 100%); — الألوان بتنتشر من المنتصف للخارج، ومفيش زاوية أصلًا.
• علشان تحوّل من نوع للتاني، سيب قايمة الألوان زي ما هي وبدّل اسم الدالة بس — وشيل الزاوية في حالة الدائري.

الأسئلة الشائعة