تتيح لك أداة تحويل الألوان الخاصة بنا إمكانية التحويل بلا إجهاد بين جميع تنسيقات الألوان الرئيسية المستخدمة في تطوير الويب، والتصميم الجرافيكي، والطباعة. وسواء كنت بحاجة إلى تحويل رمز HEX إلى RGB لـ CSS، أو ترجمة قيم HSL لأدوات التصميم، أو تحويل RGB إلى CMYK للطباعة، تتعامل هذه الأداة مع كافة التحويلات في الوقت الفعلي مع معاينة حية للألوان.
color: #3B82F6; background: rgb(59, 130, 246); border: 1px solid hsl(217, 91%, 60%);
أدخل رمز HEX (مثل #FF5733)، أو قيم RGB (مثل rgb(255,87,51))، أو قيم HSL (مثل hsl(11,100%,60%)) في أي حقل إدخال.
انقر على مربع معاينة اللون لفتح منتقي الألوان الافتراضي واختيار أي لون بصرياً.
انقر على زر النسخ بجوار أي تنسيق لوني لنسخه إلى الحافظة. يتم تحديث جميع التنسيقات في الوقت الفعلي.
تستخدم تحويلات الألوان معادلات رياضية بين نماذج الألوان. HEX هو تمثيل أساس 16 لـ RGB. أما HSL و HSV فهما تمبلان بإحداثيات اسطوانية أكثر ملاءمة للمصممين. بينما يُستخدم CMYK في الطباعة ويمثل نسب الحبر.
HEX → RGB: R = parseInt(hex[1..2], 16), G = parseInt(hex[3..4], 16), B = parseInt(hex[5..6], 16)
رموز HEX هي التنسيق الأكثر شيوعاً لألوان الويب / CSS — احرص دائماً على تضمين بادئة #
RGB هو التنسيق الأصلي للشاشات — يتراوح نطاق كل قناة من 0 إلى 255
HSL أكثر بديهية للمصممين — اضبط درجة اللون (Hue) للون، والإشباع (Saturation) للحيوية، والإضاءة (Lightness) للسطوع
CMYK مخصص للطباعة فقط — قد تبدو ألوان RGB / HEX مختلفة عند طباعتها بصيغة CMYK
استخدم صيغة HEX المختصرة (#F00) للألوان التي تتكرر فيها الأزواج (#FF0000)
الشفافية / قناة ألفا: استخدم rgba() أو hsla() للألوان الشفافة
ألوان CSS المسماة (مثل 'tomato' و 'dodgerblue') ترتبط بقيم HEX محددة
يقوم محول الألوان المجاني الخاص بنا بترجمة الألوان فورياً بين جميع الصيغ الرئيسية. وسواء كنت مطور ويب تحتاج إلى حساب الوقت، أو مصمماً يتعامل مع قيم HSL، أو تجهز ملفات للطباعة باستخدام CMYK، فإن هذه الأداة تتعامل مع جميع تحويلات الألوان مع معاينة مباشرة.
HEX و RGB هما أكتر صيغ الألوان شيوعاً على الويب. أكواد HEX (مثل #RRGGBB) مدمجة وتستخدم على نطاق واسع في CSS، بينما تُستخدم قيم RGB (0-255 لكل قناة) في JavaScript وأدوات التصميم.
يقوم محول hex إلى rgb الخاص بنا بالترجمة بين هاتين الصيغتين فورياً، مما يسهل العمل عبر الأدوات وقواعد الأكواد المختلفة.
HSL (درجة اللون، التشبع، الإضاءة) هو نموذج الألوان الأكثر سهولة للمصممين. اضبط:
يجعل محول ألوان HSL من السهل إنشاء تباينات لونية، وبناء لوحات ألوان، وترجمة قيم HSL إلى HEX أو RGB للتنفيذ.
يتطلب التحويل من ألوان الشاشة (RGB) إلى ألوان الطباعة (CMYK) تحويلاً دقيقاً نظراً لأن النموذجين يعملان بشكل مختلف. RGB تجميعي (قائم على الضوء)، بينما CMYK طرحي (قائم على الحبر).
يقوم محول RGB إلى CMYK الخاص بنا بتوفير قيم طباعة تقريبية، رغم أن النتائج النهائية تعتمد على الطابعة والورق لديك.
لتحويل لون HEX إلى RGB، قسّم الكود المكون من ست خانات (#RRGGBB) إلى ثلاثة أزواج مكونة من حرفين وحول كل زوج من النظام الأساسي 16 (الست عشري) إلى النظام الأساسي 10 (العشري): R = 16 × d1 + d2، وهكذا للألوان الأخضر والأزرق.
على سبيل المثال، يعطي #FF5733 القيم التالية: FF = 255، 57 = 87، 33 = 51، أو rgb(255، 87، 51). كلا التسميتين تصفان نفس مساحة ألوان sRGB المعرفة بواسطة IEC 61966-2-1 والمشار إليها في مواصفات ألوان W3C CSS.
تمتد كل قناة من 0 إلى 255 (8 بت)، مما ينتج عنه 256³ = 16,777,216 لوناً محتملاً. يقوم رمز HEX المختصر (#F53) ببساطة بتكرار كل رقم في زوج.
يتم تحويل RGB إلى HSL و HSV باستخدام نفس الخطوة الأولى: تطبيع كل قناة لتصبح بين 0 و1 (بالقسمة على 255)، ثم إيجاد القيمة الكبرى والصغرى. تكون درجة اللون (Hue) متطابقة في كلا النموذجين، ومستمدة من القناة الأكبر.
بالنسبة لـ HSL، فإن الخفة (Lightness) = (الحد الأقصى + الحد الأدنى) / 2؛ أما بالنسبة لـ HSV، فإن القيمة (Value) = الحد الأقصى. يتم حساب الإشباع بشكل مختلف: يقسم HSL النقاء على 1 − |2L − 1|، بينما يقسم HSV النقاء على الحد الأقصى.
إن HSL و HSV هما تمثيلان أسطوانيان لمكعب RGB، وموحدان في وحدة ألوان CSS الخاصة بمنظمة W3C. يفضل المصممون هذين النموذجين لأن درجة اللون والإشباع والخفة تتطابق مع كيفية وصف البشر للألوان.
رمز اللون الست عشري (HEX) هو اختصار بالنظام الست عشري لقيم قنوات RGB، ومتبوع بعلامة #.
النظام الست عشري هو نظام ذو أساس 16، ويستخدم الأرقام 0–9 والحروف A–F، حيث A = 10 و F = 15. هذا الترميز المدمج هو سبب هيمنة HEX على CSS ومنتقيات الألوان في أدوات التصميم.
معظم قيم HEX و RGB التي تستخدمها على الويب هي sRGB، وهي مساحة الألوان القياسية المعرفة بواسطة IEC 61966-2-1 والتي يفترضها CSS ما لم يتم الإعلان عن مساحة أخرى. يغطي sRGB شريحة محدودة من الألوان التي يمكن للعين البشرية رؤيتها، لذا توجد مساحات ذات نطاق أوسع مثل Display P3 و Rec. 2020 للشاشات الحديثة.
تضيف وحدة ألوان CSS المستوى 4 من منظمة W3C وظائف مثل color() و oklch() للوصول إلى هذه النطاقات. تعمل هذه الأداة في مساحة sRGB، والتي تظل المساحة الأكثر أماناً وتوافقاً للعمل اليومي على الويب وتصميم واجهات المستخدم عبر مختلف المتصفحات والأجهزة.
محولات الألوان تقوم بتحويل لون واحد بين الصيغ المختلفة ليعمل بكفاءة في أي مكان مطلوب.
يزيل المحويل الحاجة للحساب اليدوي للأساس 16 ويحافظ على اتساق اللون عبر الكود وملفات التصميم والطباعة.
يعرف CSS 148 لوناً مسماً، مثل tomato (#FF6347) و dodgerblue (#1E90FF) و rebeccapurple (#663399)، وكل منها يمثل اسماً بديلاً دقيقاً لقيمة HEX في مساحة sRGB معينة. هذه الأسماء موحدة في وحدة ألوان CSS التابعة لـ W3C وم يدعومة من كل متصفح حديث.
وهي ملائمة للنماذج الأولية ولكنها لا تمثل سوى جزء ضئيل من 16.7 مليون لون يمكن الوصول إليها عبر HEX و RGB.
لأن اللون المسمى يعادل رمز HEX ثابت، يمكن للمحولات عرض أقرب لون مسمى لأي مدخل. ألوان الكلمات الرئيسية غير حاسة لحالة الأحرف في CSS، لذا فإن 'DodgerBlue' و 'dodgerblue' يظهران بشكل متطابق تماماً.
تجنب أخطاء تحويل الألوان المتكررة هذه:
كل صيغة لون تناسب مهمة مختلفة.
تشارك جميع صيغ الشاشات مساحة sRGB المحددة بواسطة IEC 61966-2-1 ووحدة ألوان CSS من W3C، لذا فإن HEX و RGB و HSL قابلة للتبديل بالكامل؛ وفقط CMYK تتطلب تحويلاً تقريبياً يعتمد على الجهاز.
Data sourced from trusted institutions
All formulas verified against official standards.