منتقي الألوان
اختر الألوان وحولها
صيغ أخرى
التباين مع نص (WCAG 2)
التباين 3.67:1 · AA للنص الكبير فقط
التباين 5.70:1 · AA
درجات فاتحة (ممزوجة بالأبيض)
درجات داكنة (ممزوجة بالأسود)
تناسقات الألوان
انقر على لون لاستخدامه.
الألوان الأخيرة
تحفظ هنا الألوان التي تنسخها أو تلتقطها من صورة أو من الشاشة، في هذا المتصفح فقط.
لا توجد ألوان أخيرة بعد.
نبذة عن منتقي الألوان
يعرض منتقي الألوان معاينة كبيرة للون واحد مع قيمتيه HEX وRGB، واللون نفسه بصيغ HSL وHSV وHWB وCMYK وOKLCH مع اسمه في CSS. تختار اللون بمنتقي الألوان المدمج في متصفحك (العينة الصغيرة تحت المعاينة)، أو بالنقر على نقطة في صورة تفتحها، أو بزر «الالتقاط من الشاشة» في Chrome أو Edge، أو بكتابته في مربع الإدخال: رمز HEX مع علامة # أو بدونها، من 3 أو 4 أو 6 أو 8 أرقام، أو rgb() أو hsl() أو hwb() أو oklch() أو hsv() أو cmyk() أو اسم CSS مثل tomato. وتحمل الصيغتان ذواتا 4 و8 أرقام وrgba() قناة ألفا، تظهر فوق خلفية مربعات. وتعطي الصفحة أيضا الدرجات الفاتحة والداكنة وخمسة تناسقات للألوان وتباين WCAG لنص أبيض ولنص أسود فوق اللون.
مثال
رمز مكتوب بدون علامة # والقيم التي تعرضها الصفحة، كما يحسبها قارئ رموز HEX الخاص بها.
المكتوب في الإدخال
ff8800
البطاقات والحافظة
HEX: #ff8800 RGB: 255,136,0 زر نسخ تحت RGB يضع في الحافظة: rgb(255,136,0)
كيف تختار لونا وتحصل على قيمته RGB
- 1انقر على عينة اللون الصغيرة تحت المعاينة الكبيرة لفتح منتقي الألوان في متصفحك، ثم اختر لونا.
- 2أو اكتب لونا في «الإدخال»، مثل ff8800 أو #f80 أو rgb(255, 136, 0) أو hsl(32, 100%, 50%) أو orange: تتبعه المعاينة والعينة وكل البطاقات بمجرد اكتمال اللون.
- 3أو انقر على «فتح صورة» ثم على نقطة في الصورة (اختر «حجم العينة» لأخذ متوسط مربع صغير)، أو انقر على «الالتقاط من الشاشة» في Chrome أو Edge لأخذ لون من أي مكان على شاشتك.
- 4اقرأ بطاقة «RGB» التي تعرض قيم الأحمر والأخضر والأزرق مفصولة بفواصل، ثم قيمة ألفا إن كانت في الرمز.
- 5انقر على «نسخ» تحت «HEX» أو «RGB»: تنسخ بطاقة HEX الرمز كما يظهر، بأحرف صغيرة مع #، وتنسخه بطاقة RGB بالشكل rgb(r,g,b)، أو rgba(r,g,b,a) لرمز فيه ألفا.
- 6تحت «صيغ أخرى»، انقر على «نسخ» في بطاقة HSL أو HSV أو HWB أو CMYK أو OKLCH أو اسم CSS، وانقر على درجة فاتحة أو داكنة أو على أحد التناسقات لجعله اللون الحالي.
الصيغ والحدود
- الإدخال
- منتقي الألوان في المتصفح، أو نقطة من صورة مفتوحة، أو الشاشة (Chrome وEdge)، أو لون مكتوب في مربع الإدخال
- رموز HEX المقروءة
- 3 أو 4 أو 6 أو 8 أرقام (#rgb و#rgba و#rrggbb و#rrggbbaa)، و# اختيارية، بأحرف كبيرة أو صغيرة
- ألوان أخرى مقروءة
- rgb() وrgba() وhsl() وhsla() وhwb() وoklch() مع فواصل أو مسافات و/ ألفا اختيارية؛ وhsv() وhsb() وcmyk()؛ وثلاثة أعداد مثل 255, 136, 0؛ وأسماء ألوان CSS الـ148 وtransparent
- الناتج
- HEX بأحرف صغيرة مع #؛ وRGB يعرض بالشكل r,g,b (وr,g,b,a مع ألفا) وينسخ بالشكل rgb(r,g,b) أو rgba(r,g,b,a)
- صيغ أخرى
- hsl(217, 91%, 60%) وhsv(217, 76%, 96%) وhwb(217 23% 4%) وcmyk(76%, 47%, 0%, 4%) وoklch(62.3% 0.188 259.8)، واسم CSS المطابق أو الأقرب
- الصور
- PNG وJPEG وWebP وGIF وBMP وICO وAVIF التي يفتحها متصفحك (وHEIC في Safari)؛ بكسل واحد أو متوسط 3 × 3 أو 5 × 5 أو 9 × 9 بكسل؛ 8 ألوان رئيسية
- غير متاح
- لوحات الألوان المحفوظة وتصديرها، ومحاكاة عمى الألوان، والتدرجات، وصور TIFF (تحولها أداة TIFF إلى PNG أولا)
استخدامات شائعة
- لون نصف شفاف لظل CSS
- يكتب مطور واجهات أمامية 1e40af80، وهو أزرق داكن بقيمة ألفا 80، وينسخ rgba(30,64,175,0.502) من بطاقة RGB لخاصية box-shadow.
- توسيع رمز مختصر من دليل أسلوب
- يذكر دليل الأسلوب اللون #f80. فإذا كتب في «الإدخال» ظهر بالشكل #ff8800 في بطاقة HEX، وهي الصيغة ذات 6 أرقام التي تطلبها حقول ألوان كثيرة خارج CSS.
- أعداد RGB لقالب Office
- تطلب نافذة الألوان المخصصة في Word أو PowerPoint الأحمر والأخضر والأزرق ثلاثة أعداد؛ وتعرضها بطاقة RGB بهذا الترتيب، مثل 255,136,0.
- اللون الدقيق لشعار
- تفتح مصممة شعار عميل بصيغة PNG، وتنقر على لونه الأحمر، وتنسخ رمز HEX، ثم تتحقق تحت التباين من أن نصا أبيض فوقه يستوفي AA قبل استخدامه لزر.
أي أداة تختار
- محول الألوان: لتعديل لون حقلا حقلا، بأعداد RGB وHSL وHSV وCMYK وإعداد للعتامة؛ وهو ينسخ rgb(255, 136, 0) بمسافات، بينما تنسخ هذه الصفحة rgb(255,136,0).
- محول النظام الست عشري: لقراءة عدد ست عشري واحد بالنظام العشري أو الثنائي أو الثماني خارج أي لون، مثل FF بالقيمة 255.
المكان الذي يعالج فيه لونك
يبقى اللون الذي تختاره أو تكتبه، والصورة التي تفتحها، في هذه الصفحة: فالتحويلات وقراءة بكسلات الصورة تتم بشيفرة الصفحة نفسها، ولا يرسل اللون ولا الصورة إلى خوادمنا أبدا. وتستخدم أزرار النسخ حافظة متصفحك، وتحفظ الألوان الأخيرة في تخزين هذا المتصفح فقط. ونافذة منتقي الألوان وقطارة الشاشة تابعتان لمتصفحك، فما تقدمانه يتوقف على المتصفح لا على هذا الموقع.
الأسئلة الشائعة
هل تقرأ بطاقة RGB الرموز القصيرة مثل #f80؟
نعم. يقرأ #f80 على أنه #ff8800 ويعطي 255,136,0. والرمز ذو 4 أرقام مثل #f808 أو ذو 8 أرقام مثل #ff880080 يضيف قناة ألفا: تعرضها بطاقة RGB قيمة رابعة بين 0 و1 (255,136,0,0.502 للرمز #ff880080)، أما عينة المتصفح، وهي بلا ألفا، فتعرض اللون معتما.
هل يجب أن أكتب علامة #؟
لا. يعطي ff8800 و#ff8800 اللون نفسه، وتعرض بطاقة HEX عندئذ #ff8800. والنص الذي ليس رمز HEX من 3 أو 4 أو 6 أو 8 أرقام، ولا دالة لون مثل rgb()، ولا اسم لون في CSS، مثل ff880 أو orangee، يرفض مع رسالة، وتحتفظ المعاينة باللون السابق.
هل يمكنني الحصول على قيم HSL أو CMYK هنا؟
نعم. تعطي بطاقات «صيغ أخرى» اللون بصيغ HSL وHSV وHWB وCMYK وOKLCH، ولكل منها زر نسخ خاص بها. وCMYK هنا هو الصيغة البسيطة (K = 1 - max(R, G, B))، لا ملف تعريف طابعة، والقيم مقربة إلى أعداد صحيحة، لذلك إذا كتبت hsl(217, 91%, 60%) من جديد أعطى #3c83f6، على بعد درجة واحدة من #3b82f6.
هل يضيف زر النسخ rgb() حول قيمة RGB؟
نعم. تعرض بطاقة RGB القيمة 255,136,0 لكنها تنسخ rgb(255,136,0) جاهزة للصق في ورقة أنماط؛ ومع قناة ألفا تنسخ rgba(255,136,0,0.502). وتنسخ بطاقة HEX الرمز كما يظهر، بأحرف صغيرة مع علامة #.
كيف يتحول رمز HEX إلى RGB؟
كل زوج من الأرقام الست عشرية قناة من 0 إلى 255: في #ff8800، يساوي ff القيمة 255 للأحمر، و88 القيمة 136 للأخضر، و00 القيمة 0 للأزرق. والرمز ذو 3 أرقام يكرر كل رقم أولا، فيصبح f80 هو ff8800.
هل يمكنني كتابة قيمة RGB مثل rgb(255,136,0)؟
نعم. يقرأ «الإدخال» rgb(255,136,0) وrgb(255 136 0 / 50%) والأعداد الثلاثة 255, 136, 0 وحدها وhsl() وhwb() وoklch() وhsv() وcmyk() وأسماء مثل orange، وتعرض بطاقة HEX عندئذ الرمز: #ff8800.
لماذا تعرض بطاقة HEX أحرفا صغيرة مع أنني كتبت FF8800؟
تكتب الصفحة كل رمز بأحرف صغيرة مع علامة #، فيصبح FF8800 هو #ff8800. ويقرأ CSS الحالتين على أنهما اللون نفسه.
هل تتذكر الصفحة ألواني؟
نعم، في هذا المتصفح فقط. تظهر الألوان التي تنسخها أو تلتقطها من صورة أو من الشاشة تحت «الألوان الأخيرة» (16 لونا على الأكثر، الأحدث أولا)، وتبقى بعد إعادة تحميل الصفحة؛ ويزيلها زر «مسح». وعند إعادة التحميل تبدأ الصفحة من جديد من #3b82f6، اللون الأزرق المعروض عند الوصول.
كيف أحصل على لون بكسل في صورة أو شعار؟
انقر على «فتح صورة» ثم على النقطة التي تريدها: يعرض العرض المكبر البكسلات حول المؤشر، وتأخذ البطاقات لون ذلك البكسل. وفي الصورة الفوتوغرافية، يأخذ «حجم العينة» 3 × 3 أو 5 × 5 بكسل متوسط مربع صغير، فيتجنب التقاط بكسل شاذ من التشويش. وتعطي «الألوان الرئيسية في الصورة» ألوانها الغالبة الثمانية.
هل يمكنني التقاط لون خارج الصفحة؟
نعم، في Chrome وEdge وOpera على حاسوب: يحول زر «الالتقاط من الشاشة» المؤشر إلى قطارة تقرأ أي بكسل على شاشتك، حتى في نافذة أخرى؛ ويلغي مفتاح Esc الالتقاط. أما Firefox وSafari فلا يتيحانه لصفحات الويب، لذلك لا يظهر الزر فيهما: افتح بدلا من ذلك لقطة شاشة بزر «فتح صورة».
ماذا يعني AA وAAA تحت التباين؟
هما مستويا WCAG 2 لنص فوق هذا اللون: يتطلب AA تباينا قدره 4.5:1 للنص العادي و3:1 للنص الكبير، ويتطلب AAA نسبة 7:1. وتحسب الصفحة تباين نص أبيض ونص أسود، بعد وضع اللون الشفاف فوق الأبيض أولا، وتقتطعه إلى منزلتين عشريتين كما يفعل WebAIM.
ما أقرب اسم CSS؟
عندما لا يكون اللون أحد الألوان الـ148 المسماة في CSS، تعطي البطاقة أقربها في فضاء الألوان OKLab، فيعطي #3b82f6 مثلا dodgerblue، وهو أزرق مختلف. وعندما يكون اللون مطابقا تماما للون مسمى، تقول البطاقة «اسم CSS»، ويعطى الاسم الأول في الترتيب الأبجدي للألوان التي لها اسمان (aqua وcyan، وgray وgrey).