Color Picker - أداة اختيار الألوان
أداة Color Picker تتيح لك تحويل الألوان بين صيغ HEX وRGB وHSL مباشرة في المتصفح دون الحاجة لتحميل أي بيانات، مما يضمن خصوصيتك الكاملة.
Color Picker هي أداة تحويل ألوان تعمل بالكامل على جانب العميل داخل المتصفح، مما يعني أن جميع العمليات تتم محليًا دون رفع أي بيانات، وهذا يعزز الخصوصية والأمان. تدعم الأداة تحويل الألوان بين صيغ HEX (بما في ذلك الشيفرة المختصرة 3 أرقام مثل #rgb)، وRGB مع نطاق 0-255 لكل قناة، وHSL مع قياسات درجة اللون من 0 إلى 360 والتشبع والسطوع بنسبة 0-100%. تستخدم أداة Color Picker حسابات رياضية دقيقة لتحويل القيم بدون أي تبعيات خارجية، مما يجعلها مثالية لمصممي الويب والمطورين. يمكنك أيضًا توليد خصائص CSS مخصصة أو قيم Tailwind CSS مباشرة. جرب أيضًا أدواتنا الأخرى مثل Hash Generator وCss Minifier لتعزيز سير عملك.
كيفية استخدام Color Picker
- أدخل اللون في أحد الصيغ المدعومة: HEX (مثلاً
#1a2b3cأو المختصر#abc)، RGB (مثلrgb(26, 43, 60))، أو HSL (مثلhsl(210, 40%, 17%)). - اضغط على زر التحويل لترى اللون في الصيغ الأخرى مع كود CSS المخصص وTailwind CSS.
- انسخ الصيغة التي تناسب استخدامك في ملفات CSS أو مشاريع الويب الخاصة بك.
- يمكنك تعديل القيم يدويًا ومشاهدة التحديث الفوري للون.
كيف تعمل الأداة
تعتمد Color Picker على خوارزميات رياضية لتحويل القيم بين نظام الألوان الثلاثة دون الحاجة إلى مكتبات خارجية. تحويل HEX إلى RGB يتم بتحليل رموز الست عشري إلى أعداد عشرية لكل قناة لون (8 بت لكل قناة). أما تحويل RGB إلى HSL فيتم عن طريق حساب درجة اللون (Hue) من 0 إلى 360 درجة، التشبع (Saturation) والسطوع (Lightness) كنسب مئوية. الأداة تدعم أيضًا صيغة HEX المختصرة 3 أرقام بتحويلها أولاً إلى الشكل الكامل 6 أرقام.
مثال عملي
مدخل: #3a7bd5
تحويل RGB: rgb(58, 123, 213)
تحويل HSL: hsl(212, 65%, 53%)
خاصية CSS: --color: #3a7bd5;
Tailwind CSS: bg-[#3a7bd5]متى تستخدم Color Picker
- عند تصميم واجهات المستخدم وتحتاج لتحويل الألوان بدقة بين صيغ مختلفة.
- لتهيئة سمات CSS باستخدام خصائص مخصصة تعتمد على ألوان محددة.
- توثيق ألوان الهوية البصرية للعلامة التجارية بتنسيقات متعددة.
- للمطورين الذين يرغبون في استخدام قيم ألوان متوافقة مع Tailwind CSS بسرعة.
- لطلاب علوم الحاسوب الذين يدرسون أنظمة الألوان وتحويلاتها الرياضية.
تعمل الأداة بالكامل في المتصفح، فلا يتم رفع أي بيانات، مما يحافظ على سرية ألوان مشاريعك. يمكنك دمجها مع أدوات مثل Base64 Encode لتحويل الألوان إلى تمثيلات مشفرة أو مع Css Minifier لضغط ملفات CSS تحتوي على أكواد الألوان.
الأسئلة الشائعة
هل تدعم أداة Color Picker تحويل ألوان HEX المختصرة؟
نعم، تدعم الأداة تحويل رموز HEX المختصرة مثل #abc إلى الشكل الكامل #aabbcc قبل إجراء التحويل إلى RGB أو HSL.
كيف يتم حساب قيمة HSL من قيم RGB؟
يتم تحويل قيم RGB (كلها بين 0 و255) إلى نسب مئوية أولاً، ثم يتم حساب درجة اللون (Hue) من 0 إلى 360، التشبع (Saturation) والسطوع (Lightness) باستخدام معادلات رياضية تعتمد على أكبر وأصغر قيم RGB.
هل تحفظ الأداة بيانات الألوان التي أدخلتها؟
لا، تعمل أداة Color Picker بالكامل على جانب العميل داخل المتصفح ولا ترسل أو تخزن أي بيانات على الخادم، مما يضمن خصوصيتك التامة.
هل يمكنني استخدام نتائج الأداة مباشرة في مشاريع Tailwind CSS؟
نعم، توفر الأداة قيمة Tailwind CSS بصيغة bg-[#rrggbb] التي يمكنك استخدامها مباشرة في ملفات Tailwind لتطبيق الألوان.
هل الأداة تدعم ألوان شفافة أو RGBA؟
حالياً، الأداة تدعم فقط صيغ HEX، RGB، وHSL بدون قناة ألفا (شفافية). يمكن تطوير دعم RGBA مستقبلاً.