🎨 محول الألوان
حول الألوان فوراً بين HEX و RGB و HSL و OKLCH. مع معاينة مباشرة، وأداة قطارة الألوان، والبحث عن اسم اللون الأقرب.
HEX ، RGB ، HSL ، OKLCH - أيها يجب أن تستخدم؟
يمكن تمثيل أي لون تراه على الشاشة بصيغ متعددة متكافئة. لكل منها ميزاته الخاصة وسياق استخدام مناسب:
- HEX (
#6366f1) - مدمج وعالمي. يُستخدم في كل مكان في ملفات CSS وأدوات التصميم وأدلة الهوية البصرية. سهل النسخ واللصق ولكنه صعب القراءة لإجراء التعديلات اليدوية. - RGB (
rgb(99, 102, 241)) - قيم مباشرة لقنوات اللون الأحمر والأخضر والأزرق. مفيد عند إنشاء الألوان برمجياً أو عند الحاجة لقناة الشفافية (RGBA). - HSL (
hsl(239, 84%, 67%)) - الدرجة (Hue)، والتشبع (Saturation)، والإضاءة (Lightness). أسهل بكثير للتعديل يدوياً: قم بتغيير الدرجة لتغيير اللون، أو الإضاءة للحصول على درجات أغمق أو أفتح. - OKLCH (
oklch(0.59 0.21 280)) - مساحة لونية متسقة بصرياً. قيم الإضاءة المتساوية تبدو متساوية في السطوع للعين البشرية (على عكس HSL). تعتمده أنظمة التصميم الحديثة لضمان تباين دقيق وإنشاء لوحات الألوان.
كيفية استخدام محول الألوان هذا
- اكتب في أي حقل - قم بتغيير قيم HEX أو RGB أو HSL أو OKLCH وستتحدث جميع الصيغ الأخرى تلقائياً.
- اسحب شريط التمرير - اضبط القنوات الفردية (R ، G ، B ، H ، S ، L) مع معاينة مباشرة للون الناتج.
- اضغط على عينة اللون - ينسخ كود HEX الحالي مباشرة إلى الحافظة.
- استخدم القطارة - التقط أي لون من شاشتك (متصفحات Chrome و Edge فقط - تعتمد على EyeDropper API).
- قائمة الألوان الأخيرة - يتم حفظ كل لون تقوم بمعاينته محلياً حتى تتمكن من العودة إليه بسهولة لاحقاً.
🔒 100% خصوصية وأمان
تظل بياناتك بالكامل على جهازك. جميع عمليات تحويل الألوان تتم محلياً داخل متصفحك - لا نرفع ألوانك إلى أي خادم أبداً.
الأسئلة الشائعة
هل تدعم هذه الأداة الشفافية؟
ليس بعد - الإصدار الحالي يتعامل مع الألوان المعتمة فقط. دعم الشفافية (RGBA و HSLA و OKLCH مع الشفافية) مدرج في خططنا للتحديثات القادمة.
لماذا لا تعطي تحويلات HSL → OKLCH أرقاماً صحيحة دقيقة؟
نظاما HSL و OKLCH يعتمدان على نماذج رياضية مختلفة تماماً. HSL هو إعادة ترتيب هندسية بسيطة لـ RGB، بينما يعتمد OKLCH على مساحة اللون الإدراكية OKLab. التحويل يمر عبر حسابات معقدة مما ينتج قيم عشرية، لكن اللون النهائي يظل متطابقاً تماماً.
لماذا يظهر الرمز "-" في الاسم الأقرب أحياناً؟
تبحث الأداة عن أقرب تطابق من بين 147 اسماً قياسياً للألوان في CSS. إذا كان اللون الذي اخترته بعيداً جداً عن أي منها، يظهر الرمز "-" بدلاً من إعطاء اسم غير دقيق.
هل ميزة التقاط الألوان متاحة في جميع المتصفحات؟
لا. واجهة EyeDropper API متاحة حالياً في متصفحي Chrome و Edge فقط. يتم تعطيل زر الالتقاط تلقائياً في المتصفحات غير الداعمة مثل Firefox و Safari.