Utils365

محوّل أكواد الألوان

الصق لوناً بأي صيغة CSS واحصل على كل الصيغ الأخرى، مع تباينه.

الصق HEX أو rgb()‎ أو hsl()‎ أو hwb()‎ أو اسم لون CSS، أو اختر لوناً

#3a5bd9

درجات أفتح وأغمق

القيم

HEX
#3a5bd9
RGB
rgb(58, 91, 217)
HSL
hsl(227.5, 67.7%, 53.9%)
HSV / HSB
hsv(227.5, 73.3%, 85.1%)
HWB
hwb(227.5 22.7% 14.9%)
CMYK
cmyk(73%, 58%, 0%, 15%)
قيمة تقريبية. يعتمد اللون المطبوع على الأحبار والورق، لذا اطلب القيم الدقيقة من المطبعة.
OKLCH
oklch(52.35% 0.1965 267.75)
أقرب اسم CSS
royalblue

التباين (WCAG)

نص بهذا اللون على كل خلفية. يحتاج النص العادي إلى 4.5:1 لمستوى AA و7:1 لمستوى AAA؛ ويحتاج النص الكبير (18pt، أو 14pt عريض) إلى 3:1 و4.5:1.

على الأبيض

نص كبير

نص تجريبي لمعاينة وضوح القراءة بهذا اللون

5.71:1

  • AA عادي ناجح
  • AAA عادي راسب
  • AA كبير ناجح
  • AAA كبير ناجح

على الأسود

نص كبير

نص تجريبي لمعاينة وضوح القراءة بهذا اللون

3.68:1

  • AA عادي راسب
  • AAA عادي راسب
  • AA كبير ناجح
  • AAA كبير راسب

على #ffffff

نص كبير

نص تجريبي لمعاينة وضوح القراءة بهذا اللون

5.71:1

  • AA عادي ناجح
  • AAA عادي راسب
  • AA كبير ناجح
  • AAA كبير ناجح

التالي: جعل الخلفية شفافة · صانع الرسوم البيانية

الإبلاغ عن مشكلة في هذه الأداة

كيفية استخدام محوّل الألوان

  1. أدخل لوناً

    الصق رمز HEX أو rgb()‎ أو hsl()‎ أو hwb()‎ أو اسماً مثل tomato، أو اختر لوناً بمنتقي الألوان.

  2. انسخ الصيغة التي تحتاجها

    تتحدث كل الصيغ أثناء الكتابة. انسخ أياً منها بزرها، أو اختر صيغتك المعتادة لزر النسخ الكبير.

  3. تحقق من التباين

    شاهد نسبة تباين WCAG على الأبيض والأسود وعلى خلفية من اختيارك، مع نتائج AA وAAA للنص العادي والكبير.

لماذا تستخدم Utils365

  • يقرأ أي لون CSS

    HEX بـ 3 و4 و6 و8 أرقام، وrgb()‎ وhsl()‎ بالصياغة القديمة بالفواصل أو الجديدة بالمسافات، وhwb()‎، والنسب المئوية، ووحدات التدرج، وكل أسماء الألوان الـ 148.

  • صيغ حديثة أيضاً

    احصل على OKLCH لأنظمة التصميم وCSS واسع النطاق اللوني، وHWB وHSV لمنتقيات الألوان، وHEX مع الشفافية للألوان شبه الشفافة.

  • إمكانية الوصول مدمجة

    تتبع نسب التباين WCAG 2 بدقة ولا تُقرَّب أبداً لتنجح، فلا تُحسب 4.49:1 على أنها 4.5:1.

  • درجات أفتح وأغمق

    خمس درجات أفتح وخمس أغمق تحت عينة اللون. انقر على إحداها لتصبح اللون الحالي.

الأسئلة الشائعة

ما الفرق بين HEX وRGB؟

لا فرق في اللون نفسه. كلاهما يحدد الأحمر والأخضر والأزرق من 0 إلى 255. يكتب HEX كل قيمة برقمين ست عشريين، فيكون rgb(58, 91, 217) هو #3a5bd9. صيغة HEX أقصر، بينما rgb()‎ أسهل في القراءة والتعديل يدوياً.

ما هو HSL؟

التدرج والتشبع والإضاءة. التدرج هو الموضع على عجلة الألوان بالدرجات (0 أحمر، 120 أخضر، 240 أزرق)، والتشبع هو مدى حيوية اللون، والإضاءة تمتد من الأسود عند 0% إلى الأبيض عند 100%. يسهّل كتابة نسخ أفتح أو أغمق أو أهدأ من اللون.

لماذا لا يطابق CMYK اللون المطبوع؟

الشاشات تمزج الضوء والطابعات تمزج الحبر، والنتيجة تعتمد على الأحبار والورق وملف تعريف الطابعة. يستخدم CMYK المعروض الصيغة القياسية البسيطة، فاعتبره نقطة بداية واطلب القيم الدقيقة من المطبعة.

ما هي نسبة تباين WCAG؟

مقياس لمدى اختلاف لونين في السطوع، من 1:1 (متطابقان) إلى 21:1 (أسود على أبيض). يتطلب WCAG AA ما لا يقل عن 4.5:1 للنص العادي و3:1 للنص الكبير؛ ويتطلب AAA نسبة 7:1 و4.5:1.

ما هو OKLCH؟

طريقة أحدث لكتابة الألوان في CSS بالإضاءة والصفاء والتدرج، مبنية على كيفية رؤية الناس للألوان. تغيير الإضاءة يُبقي التدرج يبدو كما هو، ما يجعله شائعاً في أنظمة التصميم وتدرجات الألوان.

كيف يعمل اسم اللون؟

إذا طابق اللون أحد أسماء ألوان CSS الـ 148 تماماً، يُعرض ذلك الاسم. وإلا تحصل على أقرب اسم من حيث المظهر، وهو مفيد لوصف اللون بالكلمات.

أدوات ذات صلة

جعل الخلفية شفافةاجعل لوناً واحداً شفافاًإضافة إطارأحط صورتك بإطار بأي لونمنشئ رموز QRرموز QR مخصصة لا تنتهي صلاحيتها أبداًصانع الرسوم البيانيةرسوم بالأعمدة والخطوط والدوائر كصور