أداة اختيار رموز الألوان
كل الصيغ، لون واحد
تحوّل أداة اختيار رموز الألوان هذه hex إلى rgb وrgb إلى hex، ثم كليهما إلى hsl وhsv وcmyk أثناء الكتابة. كما تضيف الشفافية وتدرجًا من الدرجات الفاتحة والداكنة وقراءة للتباين توضح هل يمكن قراءة النص فوق اللون.
- السعرمجاني
- الصيغ6
- التسجيللا يوجد
- مرفوعلا شيء
أداة اختيار رموز الألوان
HEX وRGB وHSL، مع التباين وسلّم للدرجات
- على الأبيض
- —
- على الأسود
- —
التباين يقرر إن كان يمكن وضع كلمات على هذا اللون. ويطلب AA نسبة 4.5:1 للنص العادي.
اللون لا ينجح ولا يفشل وحده. ضع لون النص على لون الخلفية، وستقرأ هذه الأداة النسبة كما يقرؤها WCAG.
تحرّك الأزرار الثلاثة أعلاه اللون حتى يتجاوز الزوج AA بنسبة 4.5:1. ويبقى التدرج والتشبع ثابتين، لذلك يظل اللون ضمن لوحتك.
النص الكبير يبدو هكذا
النص الصغير يبدو هكذا. إنه الحجم الذي كُتب به معظم صفحتك، لذلك هو ما يقرر إن كان الزوج صالحًا للاستخدام. اقرأ هذا السطر وثق بعينيك إلى جانب الرقم.
وهذه هي الحروف الصغيرة التي لا يصمم لها أحد.
جاهز. اكتب لونًا في أي من الحقول الثلاثة.
لون واحد، مكتوب بست طرق
ليس للون طريقة كتابة واحدة. فالأزرق نفسه هو #1B5FD1 في ورقة الأنماط، وrgb(27, 95, 209) في استدعاء canvas، وhsl(217, 77%, 46%) في رمز تصميم.
كلها تسمي البكسلات نفسها. لذلك فتحويل hex إلى rgb لا يغيّر شيئًا في اللون، بل فقط في من يستطيع قراءته.
المزعج أن كل صيغة تناسب عملًا مختلفًا. لذلك فالصفحة التي تعرض واحدة وتخفي البقية ترسلك للبحث عن صفحة أخرى.
تعرض أداة اختيار رموز الألوان هذه كل الصيغ معًا، وتعيد كتابة كل حقل لحظة تعديل أي منها.
ما الذي تجيده كل صيغة
hex قصير ويُلصق بسلاسة. إنه الصيغة التي يسلمك إياها المصمم، والتي تحملها معظم أوراق الأنماط.
يسمّي RGB القنوات الثلاث بوضوح. لذلك يناسب كل ما يجري حسابات على اللون: canvas، أو تدرج، أو shader.
يفصل HSL الصبغة عن الإضاءة. وهو ما تلجأ إليه حين تريد اللون نفسه أغمق بدرجة، لأنك تغيّر رقمًا واحدًا.
تنتمي الشفافية إلى rgba وhsla أكثر من hex، وإن كان hex المكون من ثماني خانات يحملها أيضًا. وتكتب هذه الصفحة الصيغة التي تحتاجها.
تحويل hex إلى RGB يدويًا
لون hex ثلاثة أزواج، وكل زوج قناة مكتوبة بالنظام الست عشري. لذلك #1B هو القناة الحمراء.
يتحول كل زوج إلى رقم من 0 إلى 255. والأحرف من a إلى f تتابع العد بعد 9 ببساطة، لذلك يعني 1B ستة عشر مرة واحدة زائد أحد عشر، أي 27.
hex المكون من ثلاثة أحرف يضاعف كل خانة. لذلك يعني #abc القيمة #aabbcc، وهو اختصار يستحق المعرفة حين تقرأ ورقة أنماط كتبها غيرك.
وفي الاتجاه المعاكس، من rgb إلى hex، تعود كل قناة خانتين ست عشريتين. ومرجع MDN لقيم الألوان يسرد كل صيغة يقبلها المتصفح.
لماذا رقم التباين هنا
السؤال الذي يلي "ما هذا اللون" هو دائمًا تقريبًا "هل يمكنني وضع نص فوقه". لذلك تقع الإجابة بجانب اللون لا في صفحة أخرى.
تقارن القراءتان لونك بالأبيض والأسود. فنسبة 4.5:1 تجتاز AA للنص العادي، بينما لا تجتاز 3:1 إلا للنص الكبير.
تأتي هذه العتبات من WCAG، وكل أداة فحص تحسبها بالطريقة نفسها. وهذه الأداة تتبع المعادلة بدقة بدل تقريبها.
اللون الذي يفشل كنص قد ينجح كخلفية أو حد أو تعبئة لرسم بياني. وتقول الملاحظة تحت القراءات أي حالة تنطبق عليك.
قراءة HSL دون رياضيات
الصبغة زاوية على عجلة الألوان. الصفر أحمر، و120 أخضر، و240 أزرق، والأرقام بينها تمزجها.
التشبع هو مقدار اللون. عند 0% تصبح كل صبغة رمادية، وعند 100% تكون زاهية بقدر ما تسمح الشاشة.
تمتد الإضاءة من الأسود عند 0% إلى الأبيض عند 100%. ولونك يقع عند 50%، ولهذا يقع لون العلامة التجارية عادةً قرب هناك.
لذلك فالزر الأغمق له الصبغة والتشبع نفسيهما مع إضاءة أقل. إنه رقم واحد، وتبقى العائلة متقاربة.
متى يجب ألا يلتقي لونان
بعض الأزواج تُقرأ بشكل سيئ حتى حين ينجح رقم التباين. والأحمر على الأخضر هو المثال المعتاد، لأن النسبة تتجاهل عمى الألوان.
نحو رجل من كل اثني عشر يرى الأحمر والأخضر بشكل مختلف. لذلك يفقد الرسم البياني الذي يفصل خطوطه بالصبغة وحدها تلك الخطوط.
بدلًا من ذلك أضف إشارة ثانية. فالتسمية أو نمط الخطوط المتقطعة أو الشكل يحمل المعنى حين لا يحمله اللون.
واختبر أيضًا بالتدرج الرمادي. فإذا بقيت الصورة مقروءة دون ألوان، فهي مقروءة للجميع.
وهناك زوج آخر يوقع الناس: رمادي متوسط على لون متوسط. كلاهما يقع قرب منتصف المقياس، لذلك تنخفض النسبة تحت ثلاثة وتذوب الكلمات في اللوحة خلفها.
أين ينتهي كل رمز
يقبل CSS الصيغ الثلاث، لذلك استخدم الأوضح في الملف. معظم الفرق تكتب hex للألوان الثابتة وhsl داخل الحسابات.
تميل أدوات التصميم إلى hex. فهذا ما يحمله ملف التسليم، وما سيلصقه المطور أولًا.
الجوال مختلف. فـSwift يريد كل قناة من 0 إلى 1، وAndroid يريد hex من ثماني خانات مع الشفافية في المقدمة.
تكتب هذه الصفحة كل تلك الصيغ، لذلك ينتقل اللون من ملف التصميم إلى التطبيق دون أن يجري أحد أي حساب.
السلّم يمزج ولا يخمّن
تمزج كل درجة لونك نحو الأبيض أو نحو الأسود بمقدار ثابت. وبذلك تبقى الصبغة ثابتة بينما تتغير الإضاءة، وهذا بالضبط ما يجب أن تفعله مجموعة الدرجات.
كيف تستخدم أداة اختيار رموز الألوان
اكتب في الحقل الذي لديك قيمته بالفعل. ويتبعه الحقلان الآخران.
- 1
الصق أي صيغة
hex مع علامة # أو دونها، أو rgb بأي علامات ترقيم، أو hsl. وتقرأ الأداة الثلاث كلها.
- 2
أو اختر من عينة اللون
يفتح المربع الملوّن في الشريط أداة اختيار الألوان في نظامك. وسحبه يحدّث كل حقل مباشرة.
- 3
اضبط الشفافية
اخفضها تحت 100 وستنتقل المخرجات إلى rgba وhsla، مع hex من ثماني خانات بجانبهما.
- 4
انسخ ما تحتاجه
خذ سطرًا واحدًا، أو الكتلة كلها مع صيغ CSS وSwift وAndroid مكتوبة مسبقًا.
ما الذي يميز أداة اختيار رموز الألوان هذه
تحويل hex إلى rgb يحتاج إلى أربعة أسطر من الشيفرة. والجزء المفيد هو كل ما حوله.
ثلاثة حقول، لون واحد
عدّل أي حقل وسيعيد الحقلان الآخران كتابة نفسيهما. لا شيء ينتظر زرًا، لذلك يمكنك اللصق والقراءة في حركة واحدة.
التباين مدمج
تقع النسبة مقابل الأبيض والأسود تحت العينة، مع حكم AA مكتوبًا بالكلمات بدل تركه رقمًا يحتاج إلى تفسير.
سلّم جاهز للاستخدام
تسع درجات من أفتح بأربعة أخماس إلى أغمق بأربعة أخماس، ولكل منها hex خاص. وهذه عادةً كل اللوحة التي يحتاجها المكوّن.
الشفافية بكل الصيغ
رقم واحد يحوّل المخرجات إلى rgba وhsla وhex بثماني خانات معًا، لأن الملفات المختلفة تريد صيغًا مختلفة.
يقرأ المدخلات غير المرتبة
تُفهم المسافات، وغياب علامة #، وعلامات النسبة المئوية، وصيغة الشرطة المائلة الأحدث كلها. وبذلك تعمل القيمة المنسوخة من أي مكان.
تبقى ملفاتك في هذه العلامة
تجري كل عملية تحويل في متصفحك. ولا يصل لون علامة تجارية لم يُطلق بعد إلى هذا الموقع أبدًا، لأنه لا يُرسل أي طلب.
العمل برموز الألوان بعقلانية
ست عادات تُبقي اللوحة مفيدة لا جميلة فقط.
- احتفظ بمصدر واحد للحقيقة. ضع اللون في متغير CSS وحوّل منه. فنسختان مكتوبتان يدويًا تتباعدان خلال شهر.
- غيّر الإضاءة لا الصبغة. لنسخة أغمق حرّك L في hsl. أما تعديل hex بالعين فيحرّك الصبغة أيضًا، فتفقد المجموعة تناسقها.
- افحص النص قبل أن تعتمد اللون. لون العلامة الذي يفشل عند 4.5:1 سيفشل في كل تدقيق. اكتشف ذلك الآن لا بعد التنفيذ.
- اكتب hex بأحرف صغيرة. كلا الشكلين يعمل، لذلك الأمر يخص الفروقات فقط. واتفاق واحد يُبقي سجل الإصدارات مقروءًا.
- أبعد الشفافية عن ألوان العلامة التجارية. اللون بنسبة 60% فوق خلفية مجهولة لا يمكن توقعه. لذلك اختر اللون الممزوج بدلًا منه، وسيمكنك اختباره.
- اختبر على الخلفية الحقيقية. نادرًا ما تكون صفحتك بيضاء تمامًا. لذلك افحص اللون مقابل القسم الذي سيقع عليه فعلًا، لأن هذا هو الزوج الذي يراه الزائر.
- احتفظ بدرجة وسطى احتياطية. اللوحة التي فيها فاتح وغامق فقط تنفد بسرعة. فالقيمة الوسطى تغطي حالات المرور والحدود والعناصر المعطلة، وستحتاجها أبكر بكثير مما تتوقع.
- سمِّ الدرجة لا الظل. سمّها blue-600 بدل dark-blue. ثم يغيّر تبديل اللوحة لاحقًا قيمة واحدة بدل كل الأسماء.
خمس طرق يفسد بها اللون
كل منها يحوّل قرار لون إلى خلل على غيرك أن يجده.
الوثوق بلقطة شاشة
الألوان المأخوذة من لقطة شاشة مضغوطة منحرفة ببضع نقاط. خذها بدلًا من ذلك من الملف الأصلي.
تجاهل الخلفية
التباين زوج، لا لون واحد أبدًا. فالأزرق الذي ينجح على الأبيض قد يفشل بوضوح على قسم صفحتك.
استخدام الشفافية للتفتيح
تخفيف اللون إلى 20% يعتمد على ما تحته. أما مزجه نحو الأبيض فيعطي المظهر نفسه ويبقى متوقعًا.
استخدام hex بثماني خانات في كل مكان
المتصفحات القديمة وعدة أدوات تصميم تتجاهل زوج الشفافية. لذلك اكتب rgba حيث يقرؤه أي شيء غير متصفح حديث.
تقريب HSL ثم التحويل مجددًا
يُقرَّب HSL هنا إلى أعداد صحيحة، لذلك قد تحرّك رحلة الذهاب والعودة قناة بمقدار واحد. احتفظ بقيمة hex كقيمة مرجعية.
استفساراتكم حول أداة اختيار رموز الألوان
كيف أحوّل hex إلى rgb بنفسي؟
قسّم الأحرف الستة إلى ثلاثة أزواج، واقرأ كل زوج بالنظام الست عشري. وبذلك يصبح #1B5FD1 هو 27 و95 و209. أما hex المكون من ثلاثة أحرف فيضاعف كل خانة أولًا.
لماذا تختلف نتيجة rgb إلى hex بواحد؟
غالبًا بسبب تقريب في مكان ما من السلسلة. فـhex يحفظ أعدادًا صحيحة من 0 إلى 255، لذلك قد تقع القيمة التي جاءت كنسبة مئوية أو عبر HSL نقطة واحدة أعلى أو أدنى.
ما hex المكون من ثماني خانات؟
الزوج الأخير هو الشفافية، من 00 للخفي إلى ff للمعتم. وكل المتصفحات الحالية تقرؤه، لكن بعض برامج التصميم القديمة تتجاهله بصمت.
أي صيغة يجب أن أحفظ؟
hex لألوان العلامة التجارية، لأنه دقيق وقصير. حوّل إلى HSL حين تحتاج إلى درجة أفتح أو أغمق، ثم احفظ قيمة hex الناتجة لا الحساب.
ما نسبة التباين التي أحتاجها؟
يطلب WCAG AA نسبة 4.5:1 للنص العادي و3:1 للنص بحجم 24px، أو 19px بخط عريض. ويطلب AAA نسبة 7:1، وهي تستحق السعي للقراءة الطويلة.
لماذا يبدو hex نفسه مختلفًا على شاشتين؟
تعرض الشاشات الألوان بطرق مختلفة، وبعضها يضيف ملف تعريف فوقها. والرمز دقيق، لذلك فالفرق في الشاشة لا في القيمة.
هل يمكنني استخراج لوحة كاملة من لون واحد؟
يمنحك السلّم هنا تسع درجات من الصبغة نفسها، وهذا يغطي معظم المكونات. لكن اللوحة الكاملة تحتاج أيضًا إلى رمادي محايد ولون مميز، وهذه اختيارات لا حسابات.
هل يُرسل لوني إلى أي مكان؟
لا. تجري كل عملية تحويل داخل علامة تبويب المتصفح، لذلك لا تصل لوحة ألوان لم تطلقها بعد إلى هذا الموقع أبدًا، ولا يسجلها أي سجل.
أدوات للعصر نفسه
ثلاث أدوات تحيط باختيار اللون.
ضاغط SVG
صغّر الأيقونة التي أعدت تلوينها للتو، وأزل ما يختبئ داخلها.
افتح الأداة ←تصغير CSS
اضغط ورقة الأنماط التي وصلت إليها متغيراتك الجديدة، دون كسر calc().
افتح الأداة ←مولّد رموز QR
أنشئ رمزًا بلون علامتك التجارية، ثم تحقق أنه ما زال يُمسح.
افتح الأداة ←
اقرأ اللون ثم استخدمه
الصق قيمة hex أو ثلاثية rgb أو قيمة hsl، وخذ الصيغة التي يطلبها ملفك. أداة اختيار رموز الألوان مجانية، ولا تحتاج إلى حساب، وتُبقي كل قيمة على جهازك.