محوّل رموز الألوان
حوّل رموز الألوان بين HEX وRGB وHSL وHSV وOKLCH وCMYK، وتحقّق أيضًا من نسبة التباين بين النص والخلفية (WCAG).
1. أدخل اللون
الصق رمز اللون، أو اضغط المربع الملوّن بجانب الحقل لاختيار لون.
مثال: #FF6B35، rgb(255, 107, 53)، hsl(16, 100%, 60%)، C0 M58 Y79 K0، tomato
2. نتيجة التحويل
استخدم الأزرار بجانب كل نتيجة لنسخها بصيغة جاهزة للصق في CSS.
- HEX
- —
- RGB
- —
- HSL
- —
- HSV (HSB)
- —
- OKLCH
- —
- CMYK (تقريبي)
- —
- اسم اللون في CSS
- —
3. تحقّق من نسبة التباين
تحقّق وفق WCAG (معايير إتاحة الويب) من أن تركيبة لون النص والخلفية سهلة القراءة.
استخدام اللون المُدخل
أدخل لونًا في الأعلى لتظهر المعاينة هنا.
نسبة التباين
—
- النص العادي AA4.5 : 1 أو أكثر—
- النص العادي AAA7 : 1 أو أكثر—
- النص الكبير AA3 : 1 أو أكثر—
- النص الكبير AAA4.5 : 1 أو أكثر—
النص الكبير هو ما كان 18pt (24px) أو أكبر، أو 14pt (نحو 18.7px) أو أكبر بخط عريض.
يجري التحويل داخل هذا الجهاز، ولا يُرسَل اللون الذي تدخله إلى أي مكان.
قيم CMYK تقديرية محسوبة دون إعدادات ألوان الطباعة (ملف تعريف ICC). تحقّق منها في برنامج التصميم قبل إرسال الملف إلى المطبعة.
هل كانت مفيدة؟ يسعدنا أن تشاركها
هل هناك ما لا يعمل، أو لديك فكرة لتحسينه؟
طريقة الاستخدام
1. إدخال رمز اللون
أدخل رمز اللون الذي تريد تحويله (مثل #FF6B35) في حقل «رمز اللون». تظهر فورًا في «نتيجة التحويل» بالأسفل صيغ RGB وHSL وHSV وOKLCH وCMYK واسم اللون في CSS.
أدخل رمز اللون الذي تريد تحويله (مثل #FF6B35) في حقل «رمز اللون» على اليمين. تظهر فورًا في «نتيجة التحويل» على اليسار صيغ RGB وHSL وHSV وOKLCH وCMYK واسم اللون في CSS.
2. اختيار لون وإدخاله
اضغط المربع الملوّن على يمين حقل «رمز اللون». تُفتح نافذة اختيار اللون، ويُكتب رمز اللون الذي تختاره في الحقل وتتغير النتائج.
انقر المربع الملوّن على يمين حقل «رمز اللون». تُفتح نافذة اختيار اللون، ويُكتب رمز اللون الذي تختاره في الحقل وتتغير النتائج.
3. نسخ النتائج
في «نتيجة التحويل»، اضغط الزر على يسار «RGB» لنسخه بصيغة rgb(…). واضغط «نسخ كل النتائج» في الأسفل لنسخ كل الصيغ، كل صيغة في سطر.
في «نتيجة التحويل»، انقر الزر على يسار «RGB» لنسخه بصيغة rgb(…). وانقر «نسخ كل النتائج» في الأسفل لنسخ كل الصيغ، كل صيغة في سطر.
4. التحقق من نسبة التباين
في «تحقّق من نسبة التباين» بالأسفل، اضغط «أسود» على يسار «لون الخلفية». تظهر معاينة للنص فوق خلفية سوداء، ونسبة التباين، وهل يستوفي النص العادي والنص الكبير معياري AA وAAA.
في «تحقّق من نسبة التباين» بالأسفل، انقر «أسود» على يسار «لون الخلفية». تظهر معاينة للنص فوق خلفية سوداء، ونسبة التباين، وهل يستوفي النص العادي والنص الكبير معياري AA وAAA.
متى تفيدك هذه الأداة
كتابة ألوان التصميم في CSS
الصق رمز HEX المنسوخ من برنامج التصميم لتحصل فورًا على صيغ rgb() وhsl() وصيغة oklch() الحديثة.
مطوّرو المواقع والتطبيقات
التأكد من وضوح لون النص
أدخل لون النص ولون الخلفية فقط لتعرف نسبة التباين وهل تستوفي معياري AA وAAA في WCAG.
المصممون المهتمون بإتاحة الويب
تقدير ألوان الشاشة بقيم CMYK للطباعة
عند تصميم منشور أو بطاقة عمل، تعرف تقريبًا ما يقابل ألوان الويب بقيم CMYK.
من يصمّمون المطبوعات
جمع ألوان العلامة التجارية بصيغ متعددة
بزر «نسخ كل النتائج» تنسخ كل الصيغ من HEX إلى CMYK دفعة واحدة، لتلصقها في مستند أو دليل الهوية.
مسؤولو التسويق والعلامة التجارية
قبل أن تبدأ
- قيم CMYK تقديرية محسوبة. للحصول على قيم دقيقة وفق إعدادات ألوان المطبعة (ملف تعريف ICC)، تحقّق منها في برنامج التصميم.
- لاستخراج الألوان من صورة، استخدم استخراج الألوان من صورة.
- لا يمكن التحويل إلى أرقام الألوان الخاصة مثل PANTONE ولا إلى قيم Munsell.
الفرق بين صيغ رموز الألوان
تُمثَّل ألوان الشاشة بشدة ألوان الضوء الأساسية الثلاثة (الأحمر والأخضر والأزرق). فـHEX (#FF6B35) وRGB (rgb(255, 107, 53)) هما القيمة نفسها مكتوبة بالنظام الست عشري والعشري، أما HSL وHSV فيحوّلانها إلى «تدرّج اللون والتشبع والسطوع» ليسهل على الإنسان ضبط اللون. وتعبّر OKLCH عن السطوع بطريقة قريبة من إدراك العين، فيسهل بها بناء لوحات ألوان متساوية السطوع، وقد بدأ استخدامها في CSS الحديثة.
أما CMYK فهي كميات أحبار الطباعة (السماوي والأرجواني والأصفر والأسود). ولأن ألوان الشاشة ضوء والطباعة حبر، لا يمكن إخراج اللون نفسه تمامًا. وقيم CMYK في هذه الأداة تقديرية محسوبة بمعادلة شائعة. ونسبة التباين تعبّر عن الفرق في السطوع بين النص والخلفية بقيمة من 1 إلى 21، ويشترط WCAG للنص العادي 4.5 على الأقل (AA) أو 7 على الأقل (AAA).
الأسئلة الشائعة
جمعنا هنا ما يتساءل عنه الناس غالبًا حول تحويل رموز الألوان ونسبة التباين.
هل يُرسَل اللون الذي أدخله إلى أي مكان؟
لا. يجري التحويل وحساب نسبة التباين داخل متصفح جهازك فقط.
ما الصيغ التي يمكنني إدخالها؟
تُقرأ صيغة HEX مثل #FF6B35 و#F63 (ويمكن حذف #)، وrgb() وrgba()، وhsl() وhsla()، وhsv() وhsb()، وoklch()، وcmyk() و«C0 M58 Y79 K0»، وأسماء الألوان في CSS مثل tomato. وإذا أدخلت أرقامًا فقط مثل «255, 107, 53» فتُقرأ على أنها RGB.
هل يمكن تحويل الألوان ذات الشفافية (ألفا)؟
نعم. عند إدخال HEX من 8 خانات مثل #FF6B3580 أو rgba(255, 107, 53, 0.5)، يظهر HEX بـ8 خانات، وتظهر RGB وHSL وOKLCH مع العتامة. أما HSV وCMYK فلا صيغة فيهما للعتامة، فيظهر اللون وحده.
لماذا تختلف القيمة بمقدار 1 عند التحويل إلى HSL ثم العودة؟
تُقرَّب قيم HSL وHSV إلى أعداد صحيحة، كما تفعل المواقع وبرامج التصميم الأخرى. وعند التحويل العكسي من القيم المقرَّبة قد تختلف RGB بمقدار 1 أو 2. إذا احتجت إلى قيمة دقيقة فاستخدم HEX أو RGB.
هل يمكن استخدام قيم CMYK مباشرة في الطباعة؟
استخدمها كقيم تقديرية. فاللون الفعلي في الطباعة يتغير بحسب الورق والحبر وإعدادات ألوان المطبعة (ملف تعريف ICC). وقيم هذه الأداة محسوبة بمعادلة عامة لا تستخدم تلك الإعدادات. تحقّق منها في برنامج التصميم أو مع المطبعة قبل إرسال الملف.
ما هي OKLCH؟
صيغة تمثّل اللون بالسطوع (L) والكروما أو التشبع (C) وتدرّج اللون (H)، وميزتها أنها قريبة من إدراك العين البشرية. فإذا تساوت قيمة السطوع بدت الألوان متقاربة السطوع حتى لو اختلف تدرّجها. ويمكن استخدامها في CSS في المتصفحات الحديثة بصيغة oklch().
اللون الذي أدخلته بصيغة OKLCH تغيّر قليلًا.
تتيح OKLCH كتابة ألوان زاهية لا تستطيع الشاشات العادية (sRGB) عرضها. وفي هذه الحالة يبقى السطوع وتدرّج اللون كما هما، ويُخفَّض التشبع إلى أقصى حدّ يمكن عرضه، وتظهر رسالة تنبيه أسفل حقل الإدخال.
ما معنى AA وAAA في نسبة التباين؟
هما مستويا الامتثال لمعايير إتاحة الويب (WCAG 2). للنص العادي: 4.5 أو أكثر يحقق AA، و7 أو أكثر يحقق AAA. وللنص الكبير (18pt أو أكبر، أو 14pt أو أكبر بخط عريض): 3 أو أكثر يحقق AA، و4.5 أو أكثر يحقق AAA.
لماذا لا تظهر نسبة التباين 4.49 على أنها 4.5؟
حتى لا تظهر تركيبة تقلّ عن المعيار بقليل على أنها «ناجح»، تُعرض النسبة مقطوعة عند منزلتين عشريتين دون تقريب، ويُحكم بهذه القيمة.
هل الأداة مجانية؟
نعم. بلا تسجيل ولا إعلانات.
أدوات أخرى
- حاسبة الضريبة (قبل الضريبة ⇔ شامل الضريبة)
أدخل السعر لترى فورًا المبلغ قبل الضريبة والضريبة والإجمالي. نسبتا اليابان 10% و8% جاهزتان، ويمكنك استخدام أي نسبة أخرى.
- حاسبة العمر
اختر تاريخ ميلادك لتعرف عمرك بالسنوات والأشهر والأيام، والأيام حتى عيد ميلادك القادم، مع جدول للأعمار حسب سنة الميلاد.
- حاسبة التاريخ (إضافة أيام وطرحها)
اعرف فورًا التاريخ واليوم بعد عدد من الأيام أو قبله، أو بعد عدد من أيام العمل. يمكنك أيضًا تخطي عطلة نهاية الأسبوع والعطل الرسمية.
- حاسبة الوقت (مجموع ساعات العمل)
احسب ساعات العمل من الحضور والانصراف والاستراحة واجمعها. ويمكنك أيضًا جمع الأوقات وطرحها وتحويلها إلى ساعات عشرية.
- حاسبة تقسيم الفاتورة
أدخل الإجمالي وعدد الأشخاص لترى فورًا حصة كل شخص. مع التقريب، ونسب مختلفة كأن يدفع المدير أكثر، وتعديل الفرق على المنظّم.
- محوّل وقت Unix (الطابع الزمني ⇔ التاريخ)
حوّل فورًا وقت Unix (الطابع الزمني بالثواني أو بالملّي ثانية) إلى تاريخ ووقت بتوقيت UTC أو اليابان، والتاريخ إلى وقت Unix.