NordVPN
SponsoredStrict no-logs VPN with 6,400+ servers in 111 countries. Threat Protection blocks ads, trackers, and malware while you work online.
Get NordVPN →محوّل الألوان (HEX وRGB وHSL — فوري)
اكتب كود hex أو ثلاثية RGB أو قيمة HSL — تتحدث الصيغ الأخرى فورًا مع عرض معاينة مرئية. مفيد للمصممين ومطوري الويب وكل من يطابق الألوان عبر الأدوات.
hex: #0ea5e9
rgb(14, 165, 233)
hsl(199, 89%, 48%)أدوات ذات صلة
كيف تعمل
ثلاث طرق لوصف اللون نفسه
HEX وRGB وHSL ثلاثة تدوينات للألوان sRGB. HEX اختصار لـ RGB: #FF6B35 يعني أحمر=255، أخضر=107، أزرق=53. يصف RGB اللون بمقدار ضوء الأحمر والأخضر والأزرق المُمزَج (0-255 لكل منهما). يُعيد HSL تشفير نفس لون RGB بدلالة درجة اللون (أي لون) والتشبع (مدى الحيوية) والإضاءة (مدى السطوع).
الثلاثة متكافئة — يمكنك التحويل ذهابًا وإيابًا دون خسارة. يُفضِّل المصممون HSL لضبط الظلال (رفع الإضاءة يُبقي درجة اللون ثابتة)، بينما يلصق المطورون عادةً HEX من أدوات التصميم مباشرةً في CSS. يظهر RGB غالبًا عند العمل مع معالجة الصور أو واجهات برمجة canvas.
متى تستخدم كل صيغة
HEX: النسخ من التصميمات وصادرات Figma وإرشادات العلامة التجارية وقيم CSS الحرفية للألوان. موجز لكن غامض القراءة.
RGB: العمل الاحتسابي على الألوان (canvas، معالجة الصور)، وفحوصات إمكانية الوصول (حسابات التباين تعمل بـ RGB الخطي)، وحين تريد قيمًا صحيحة دقيقة للضبط.
HSL: تعديل الألوان بالإحساس — إنشاء 'نسخة أكثر تشبعًا' أو 'متغيِّر أغمق لحالات hover' أو توليد لوحة ألوان بتدرُّج درجة اللون. أسهل بكثير في التفكير لهذه المهام مقارنةً بـ HEX.
ما لا تراه في هذه الأداة
نُهمِل قناة الشفافية (alpha) في الوقت الحالي — لكن #RRGGBBAA يعمل في جميع المتصفحات الحديثة إذا أضفت رقمَيْ hex للشفافية (00 = شفاف كامل، FF = معتم كامل).
كما لا نغطي مساحات الألوان الأوسع (P3، Rec.2020، OKLCH). لمعظم أعمال الويب، HEX/RGB/HSL القائمة على sRGB هي الخيار الصحيح. إذا كنت تستهدف شاشات HDR أو واسعة النطاق، استكشف صيغ CSS Color Module Level 4.
أسئلة شائعة
›هل يمكنني التحويل من HSL إلى HEX ذهابًا وإيابًا دون فقدان الدقة؟
في معظم الأحيان. يُخزَّن HSL كدرجات صحيحة ونسب مئوية، لذا 360 × 101 × 101 = 3.7 مليون قيمة HSL تُعيَّن على 16.7 مليون تركيبة RGB. قد يحدث تقريب طفيف في الحالات الحدية. استخدم HEX كمرجع دقيق للتخزين.
›هل يدعم هذا أكواد HEX ذات 3 أرقام؟
نعم. #f60 تُعامَل كـ#ff6600. كلتاهما تتوسع إلى نفس ثلاثية RGB.
›لماذا لا يصل HSL إلى 360 في التشبع/الإضاءة؟
درجة اللون بالدرجات (0-360 حول عجلة الألوان). التشبع والإضاءة نسب مئوية (0-100).
›هل HSL مثل HSB أو HSV؟
لا. يستبدل HSV (وHSB) 'الإضاءة' بـ'القيمة'، وهو نموذج سطوع مختلف. L=50% في HSL هو لون كامل؛ V=100% في HSV هو لون كامل. نستخدم HSL لأنه يتوافق مع CSS.
›هل يدعم الشفافية؟
ليس بعد. في الوقت الحالي، أضف alpha ثنائي الرقم إلى HEX (مثلًا: #00000080 لأسود بشفافية 50%).
›لماذا لا يُظهر RGB أعشارًا بين 0-1؟
لأن معظم السياقات (CSS، أدوات التصميم) تستخدم أعدادًا صحيحة 0-255. للعمل مع Shaders، اقسم على 255 للحصول على أعشار 0-1.
›أين يحصل المصممون على الألوان الصحيحة؟
إرشادات العلامة التجارية، ورموز التصميم، أو مولِّدات لوحة الألوان. يمكن لأداة فحص التباين التحقق من أن زوج المقدمة/الخلفية يستوفي WCAG AA/AAA.
›هل الحاسبة دقيقة؟
نعم. تستخدم رياضيات تحويل sRGB القياسية. اختلافات الرحلة الذهاب والإياب تنشأ فقط من أن HSL يُكمَّم بأعداد صحيحة.
خدمات موصى بها
إفصاحCloudways
SponsoredManaged cloud hosting for WordPress and web apps on DigitalOcean, Vultr, and AWS. Fast setup, no server headaches.
Try Cloudways →