محوّل الألوان
حوّل بين HEX وRGB وHSL وHSV وCMYK وOKLCH، وابنِ لوحات ألوان وتحقّق من التباين — داخل متصفحك.
محوّل الألوان — من HEX إلى RGB ومن RGB إلى HEX وHSL أونلاين
تعطيك أداة التصميم صيغة لون، ويطلب CSS صيغة أخرى، وتطلب واجهة canvas صيغة ثالثة. هذا المحوّل المجاني يقبل أيًّا من الصيغ الثلاث الشائعة — #0A84FF أو rgb(10,132,255) أو hsl(210,100%,52%) — ويعطيك المكافئ الدقيق بالصيغة التي تحتاجها فعلًا.
الصق القيمة، واختر صيغة الإخراج، واضغط تحويل. لا شيء تثبّته ولا حساب تنشئه، ولأن التحويل يجري في متصفحك فهو يعمل حتى دون اتصال.
الصيغ الثلاث ومتى تتفوّق كل واحدة
| الصيغة | الشكل | الأفضل لـ |
|---|---|---|
| HEX | #0A84FF | تسليم التصاميم ودلائل الهوية وكل موضع يُكتب فيه اللون أو يُلصق |
| RGB | rgb(10, 132, 255) | canvas وSVG ومعالجة الصور وأي شفرة تتعامل مع القنوات |
| HSL | hsl(210, 100%, 52%) | أنظمة التصميم: تعديل الإضاءة لحالات التمرير والتعطيل والوضع الداكن |
كل الصيغ التي يعيدها المحوّل
لا حاجة لتحديد ما تلصقه: خيار اكتشاف تلقائي يقرأ كود HEX بعلامة # أو بدونها، وصيغتي الفاصلة والمسافة في rgb() وhsl()، والقيم الحديثة oklch() وhwb() وlab()، إضافة إلى أسماء ألوان CSS الـ148 كلها. وإلى جانب HEX وRGB وHSL تحصل على HSV لمنتقيات الألوان، وCMYK لكل ما يتجه إلى الطباعة، وoklch() لرموز التصميم المتساوية إدراكيًا، وأقرب اسم لون في CSS. أما قناة الشفافية - في rgba() أو hsla() أو HEX من ثماني خانات - فتُنقل كما هي بدل أن تُهمل.
طريقة تحويل لون
- الصق اللون بأي صيغة أو اخترْه من منتقي الألوان، واكتشاف تلقائي يستنتج الصيغة. وفي المتصفحات التي تدعمه، مثل Chrome وEdge على الحاسوب، يلتقط زر التقاط من الشاشة لون أي بكسل على شاشتك؛ ولا يظهر الزر في غيرها.
- لسان التبويب الصيغ يعرض HEX وRGB وHSL وHSV وCMYK وOKLCH، ولكل سطر زر نسخ بجانبه. ويسمّي اللون أيضًا: اسم CSS إن طابق تمامًا أحد ألوان CSS المسمّاة، وإلا فـالأقرب إليه.
- لسان التبويب لوحة الألوان يمنحك تدرجًا جاهزًا من الفواتح والغوامق مع تناغمات متمم ومتجاور وثلاثي ورباعي.
- في لسان التبويب التباين حدّد لون الخلفية واقرأ نسبة التباين وفق WCAG مع نتيجتَي AA وAAA.
- استخدم عشوائي للاستكشاف أو مسح للتصفير قبل القيمة التالية.
كيف يعمل كود اللون السداسي
لون HEX هو ثلاثة أزواج من الأرقام الست عشرية، زوج للأحمر وزوج للأخضر وزوج للأزرق، ويغطي كل زوج المدى من 00 إلى FF أي من 0 إلى 255 بالنظام العشري. فـ #FF0000 أحمر خالص، و#000000 أسود، و#FFFFFF أبيض. وحين تتكرر الأرقام في الأزواج الثلاثة تنفع الصيغة المختصرة: #FFF تعني #FFFFFF. أما الأكواد المكوّنة من أربعة أو ثمانية أرقام فتضيف قناة شفافية، فـ #0A84FF80 هو الأزرق نفسه بشفافية 50% تقريبًا.
لماذا التفكير بـ HSL أسهل
يصف HSL اللون كما يصفه البشر: درجة اللون زاوية على عجلة الألوان، والتشبّع مقدار الحيوية، والإضاءة قربه من الأبيض أو الأسود. لذلك هو الخيار العملي لبناء لوحة ألوان. خذ درجة لون علامتك التجارية، وأبقِ التشبّع كما هو، وحرّك الإضاءة وحدها لتولّد حالة تمرير وحالة تعطيل ولون حدود ونسخة للوضع الداكن، كلها تنتمي بوضوح إلى العائلة نفسها. أما فعل الشيء نفسه بـ HEX فيعني تخمين ستة أرقام.
بناء لوحة ألوان كاملة من لون واحد
يحوّل لسان التبويب لوحة الألوان لون علامتك التجارية الواحد إلى المجموعة التي تحتاجها فعلًا. يحافظ تدرّج الفواتح والغوامق على درجة اللون والتشبّع ويغيّر الإضاءة وحدها عبر إحدى عشرة خطوة، مرقّمة من 50 إلى 950 كما في معظم أنظمة التصميم، فتبدو حالات المرور والحدود والتعطيل والوضع الداكن من عائلة واحدة بوضوح. وزر نسخ بصيغة CSS ينسخ التدرّج كاملًا كخصائص مخصصة جاهزة للصقها داخل :root.
وتحت التدرّج تأتي تناغمات عجلة الألوان: المتمم (الدرجة المقابلة)، والمتجاور (الجارتان على بُعد 30 درجة)، والثلاثي ومتمم منقسم للمسات متوازنة، والرباعي لمخطط من أربعة ألوان. انقر أي عينة لنسخ كود HEX الخاص بها، أو انقر نقرًا مزدوجًا لتجعلها اللون الحالي.
افحص التباين قبل النشر
يقيس لسان التبويب التباين نسبة التباين وفق WCAG بين لونك وأي خلفية. يعرض النسبة برقمين عشريين ويضع لكل عتبة علامة نجاح أو رسوب: AA نص عادي عند 4.5:1، وAA نص كبير عند 3:1، وAAA نص عادي عند 7:1، وAAA نص كبير عند 4.5:1، ومكونات الواجهة مثل الأيقونات وحدود الحقول عند 3:1. ويبدّل زر تبديل لوني النص والخلفية بنقرة واحدة. وتُظهر معاينة حيّة التركيبة بحجم 16 بكسل وبحجم 24 بكسل عريض، لأن نسبة لا تكفي للمتن قد تكفي لعنوان.
وحين تقصّر التركيبة يقترح الأداة أقرب درجة من اللون نفسه تبلغ 4.5:1، فتصحّح التباين دون التخلي عن لون العلامة. أما اللون نصف الشفاف فيُركّب على الخلفية أولًا لأن هذا ما يراه القارئ فعلًا؛ فحص قيمة rgba() الخام وحدها يعطي نتيجة أفضل من الواقع.
أين يظهر تحويل الألوان
- نقل ألوان الهوية من ملف تصميم إلى خصائص CSS المخصّصة.
- ضبط
fillStyleفي canvas أو سمة لون في SVG، وكلاهما يفضّل RGB. - بناء قوالب بريد HTML حيث تبقى HEX أضمن صيغة عبر برامج البريد المختلفة.
- توليد مجموعة متسقة من الدرجات الفاتحة والداكنة لنظام تصميم.
- اختيار لوحات الرسوم البيانية ولوحات المعلومات حيث تحتاج الدرجات تباعدًا منتظمًا.
- ترجمة لون من لقطة شاشة أو ملف PDF للهوية إلى قيمة صالحة في الشفرة.
اللون وسهولة القراءة
تحويل اللون لا يخبرك إن كان النص سيبقى مقروءًا فوقه. يعتمد التباين على الإضاءة النسبية، وتطلب إرشادات WCAG نسبة لا تقل عن 4.5 إلى 1 للنص العادي و3 إلى 1 للنص الكبير. وقيمة الإضاءة في HSL تقريب أولي مفيد - فإذا تقاربت قيمتا إضاءة فالتباين غالبًا غير كافٍ - ولسان التبويب التباين يحسم الأمر بدقة لأي زوج من الألوان قبل النشر.
تفاصيل تستحق المعرفة
- التقريب. يستخدم HSL درجات ونسبًا صحيحة، لذا قد ينزاح قناة بمقدار واحد عند التحويل من HEX إلى HSL والعودة. اجعل صيغة واحدة مرجعًا وحيدًا.
- الشفافية. تحمل
rgba()وHEX ذو الثمانية أرقام قيمة الشفافية، ولا يستطيع HEX ذو الستة تمثيلها. - النسب في RGB. الكتابة
rgb(100%, 0%, 0%)صالحة في CSS وتعني ما تعنيهrgb(255,0,0). - النطاق اللوني الواسع. دوال CSS الأحدث مثل
oklch()وcolor(display-p3 ...)تعبّر عن ألوان خارج sRGB لا يبلغها HEX. - الألوان المسمّاة. كلمات CSS المفتاحية مثل
tomatoتقابل قيم HEX ثابتة، لكنها محدودة ويصعب إدراجها في نظام.
يعمل محليًا
التحويل مجرد حساب يجري داخل متصفحك. ولا يُرفع أي لون تلصقه، وهو ما يهم حين تعمل على لوحة ألوان علامة تجارية لم تُنشر بعد.
معادلة التحويل من HEX إلى RGB، والتحويل في الكود
كود HEX هو ثلاثة بايتات مكتوبة بالنظام السداسي عشر. قسّم #0A84FF إلى 0A و84 وFF، وحوّل كل زوج إلى العشري (0A = 10، 84 = 132، FF = 255) فتحصل على rgb(10, 132, 255). وفي الاتجاه المعاكس اكتب كل قناة برقمين سداسيين عشريين وأضف صفرًا في البداية إن كانت أقل من 16.
| اللغة | من HEX إلى RGB | من RGB إلى HEX |
|---|---|---|
| JavaScript | parseInt(hex.slice(1, 3), 16) للأحمر، ثم 3-5 و5-7 | '#' + [r, g, b].map(c => c.toString(16).padStart(2, '0')).join('') |
| Python | tuple(int(h[i:i+2], 16) for i in (0, 2, 4)) | '#%02x%02x%02x' % (r, g, b) |
| PHP | sscanf('#0A84FF', '#%02x%02x%02x') | sprintf('#%02x%02x%02x', $r, $g, $b) |
| CSS (المتصفحات الحديثة) | rgb(from #0A84FF r g b) | لا حاجة للتحويل - كلا الصيغتين قيمتا لون صالحتان |
أدوات ذات صلة
عمل الواجهة الأمامية نادرًا ما ينتهي عند اللون. نسّق رموز التصميم عبر منسّق JSON، وضمّن أيقونة صغيرة كـ Data URI عبر مُرمِّز Base64، وابحث عن كل أكواد الألوان في ملف الأنماط عبر مختبِر التعابير النمطية، وحوّل الصور عبر محوّل الصور. ولتحويل الألوان إلى تدرّجات وظلال، استخدم مولّد CSS.