محول الألوان

قم بتحويل وعرض الألوان على الفور.

INPUT

خيارات متقدمة

تفعيل وضع الدفعة

تضمين "#" في HEX

عرض RGB كنسبة مئوية

عرض تناسق الألوان

عرض معاينة التدرج

الشفافية 100%

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

وفر الوقت وقلل من الأخطاء.

ميزات متقدمة

التحويلات المتعددة
توليد تدرج CSS
دعم الشفافية
التحقق من التباين
اقتراحات لتناغم الألوان

لماذا يعد تحويل الألوان مهمًا

يضمن اللون الدقيق تصميمات يمكن الوصول إليها.

FAQ — محول الألوان

Frequently Asked Questions

HEX, RGB, RGBA, HSL, HSLA, CMYK وغيرها.

نعم، باستخدام وضع الدفعة.

لا. تتم جميع عمليات المعالجة محليًا في متصفحك.

أدخل لونين أو أكثر وستعرض الأداة معاينة للتدرج اللوني مع مقتطف CSS جاهز للنسخ.

لا. تتم جميع عمليات المعالجة محليًا في متصفحك، ولا يتم حفظ أو نقل أي بيانات.

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

أدخل قيمة اللون
اكتب أو الصق أي قيمة لون — HEX (#3b82f6) أو RGB (59، 130، 246) أو HSL (217، 91٪، 60٪) أو CMYK. تقوم الأداة بالكشف التلقائي عن التنسيق.
شاهد جميع التحويلات على الفور
تحديث جميع التنسيقات المكافئة في الوقت الفعلي: HEX و RGB و RGBA و HSL و HSLA و HSV و CMYK و خاصية CSS المخصصة. انسخ أي قيمة بنقرة واحدة.
استخدم أداة اختيار الألوان
انقر على عينة اللون أو استخدم أداة اختيار الألوان في المتصفح لاختيار لون بصريًا والحصول على جميع تنسيقاته المكافئة في آن واحد.
انسخ واستخدم في مشروعك
انقر على زر نسخ أي تنسيق لإرساله إلى الحافظة. الصق مباشرة في CSS أو Sass أو Tailwind config أو Figma أو سير عمل الطباعة.

أمثلة على التحويلات

نفس اللون الأزرق معبر عنه في كل تنسيق مدعوم:

التنسيق	القيمة	الاستخدام
HEX	#3b82f6	CSS، HTML، Figma
RGB	rgb(59, 130, 246)	CSS، Canvas API
RGBA	rgba(59، 130، 246، 1)	CSS مع التعتيم
HSL	hsl(217، 91٪، 60٪)	CSS، رموز التصميم
CMYK	C:76 M:47 Y:0 K:4	طباعة / أوفست
HSV	217 درجة، 76٪، 96٪	محررو الصور

حالات الاستخدام الشائعة

تصميم المواقع الإلكترونية وواجهة المستخدم

تحويل ألوان HEX للعلامة التجارية إلى HSL لخصائص CSS المخصصة وتكوين Tailwind، مما يضمن اتساق المظهر في الوضعين الفاتح والداكن.

الطباعة وما قبل الطباعة

تحويل ألوان RGB أو HEX على الشاشة إلى CMYK للطباعة — تجنب المشكلة الشائعة المتمثلة في الألوان التي تبدو رائعة على الشاشة ولكنها تبدو باهتة عند الطباعة.

إرشادات العلامة التجارية

قم بتوثيق لوحة ألوان العلامة التجارية الكاملة بجميع التنسيقات — HEX للرقمية، CMYK للطباعة، مرجع Pantone — من مصدر واحد موثوق. محاكاة عمى الألوان والتحقق من تباين WCAG

فحوصات إمكانية الوصول

استرجع قيم الألوان الدقيقة لاختبارها في أداة فحص التباين، للتأكد من أن تركيبات النص والخلفية تفي بمتطلبات WCAG AA أو AAA. تحويل بيانات JSON وCSV وXML

سير عمل المطورين

ترجمة ألوان أدوات التصميم (Figma HEX) بسرعة إلى متغيرات CSS HSL من أجل تصميم موضوعات ديناميكية ومعالجة الألوان برمجياً.

كيف يعمل

تتم جميع عمليات التحويل على الفور في متصفحك دون أي تدخل من الخادم.

تحليل الألوان

تقوم الأداة بتحليل المدخلات إلى قيم RGB موحدة (0-255 لكل قناة)، ثم تطبق صيغ التحويل القياسية على كل تنسيق مستهدف.

تحويل HEX ↔ HSL

يتم اشتقاق HSL (الصبغة، التشبع، السطوع) من RGB عن طريق إيجاد القناة الدنيا/القصوى، وحساب السطوع كمتوسط لها، ثم حساب التشبع وزاوية الصبغة.

تقريب CMYK

يتم حساب CMYK من RGB عبر الصيغة: K = 1 - max(R,G,B)؛ C = (1-R-K)/(1-K)؛ إلخ. لاحظ أن RGB→CMYK يعتمد على الجهاز — CMYK الشاشة هو تقريب، وليس ملف تعريف طباعة.

لمن هذه الأداة

مطورو الواجهة الأمامية

ترجمة رموز التصميم بين تنسيقات CSS والتحقق بسرعة من قيم الألوان أثناء التطوير.

مصممو واجهة المستخدم/تجربة المستخدم

قم بتحويل عينات Figma أو Sketch إلى أي تنسيق يحتاجه نظام التصميم أو إطار عمل CSS الخاص بك.

مصممو الطباعة

قم بتحويل ألوان العلامة التجارية RGB إلى CMYK قبل إرسال العمل الفني إلى المطبعة، لتجنب المفاجآت المتعلقة بتغير الألوان.

مديرو العلامات التجارية

حافظ على لوحة ألوان موحدة للعلامة التجارية في جميع التنسيقات — الرقمية والمطبوعة — دون الحاجة إلى تبديل الأدوات.

مختبرو إمكانية الوصول

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

نصائح للعمل مع الألوان

استخدم HSL في خصائص CSS المخصصة (--color-primary: hsl(217, 91%, 60%)) حتى تتمكن من ضبط السطوع باستخدام calc() لحالات التمرير والتعطيل.
اطلب دائمًا نسخة تجريبية عند استخدام تحويلات CMYK من RGB — تتطلب مطابقة الألوان بين الشاشة والطباعة ملف تعريف ألوان الجهاز.
استخدم أداة اختيار الألوان في المتصفح لعينات الألوان مباشرة من لقطات الشاشة أو عناصر التصميم — دون الحاجة إلى نسخ القيم يدويًا.
بعد التحويل، اختبر ألوانك في أداة فحص التباين للتأكد من أن لوح الألوان الخاص بك يتوافق مع WCAG AA (4.5:1) للنص الأساسي.
قم بتخزين لوحة ألوان علامتك التجارية بجميع التنسيقات (HEX، RGB، CMYK) في وثائق نظام التصميم الخاص بك لتجنب التحويلات المتكررة.

لماذا يعد التحويل الدقيق للألوان أمرًا مهمًا

تعد قيم الألوان غير المتسقة بين فرق التصميم والتطوير أحد الأسباب الرئيسية لعدم الاتساق البصري في المنتجات المشحونة.
تحتل RGB و CMYK نطاقات مختلفة — فالألوان التي تبدو زاهية على الشاشة قد تبدو باهتة عند الطباعة دون تحويل مناسب.
CSS HSL يجعل إنشاء السمات الديناميكية (الوضع الفاتح/الداكن، التدرجات اللونية) أسهل بكثير من HEX — ولكنه يتطلب تحويلًا دقيقًا من HEX إلى HSL للبدء.
تتطلب عمليات تدقيق الامتثال للعلامة التجارية ألوانًا بتنسيقات متعددة — حيث يزيل محول واحد الأخطاء اليدوية ويوفر ساعات من العمل المتكرر.

الأداء والخصوصية

تتم كل عملية تحويل الألوان بالكامل داخل متصفحك باستخدام JavaScript العادي. لا يتم إرسال أي قيمة لونية أو لوحة ألوان أو بيانات استخدام إلى أي خادم. تستجيب الأداة في أقل من 10 مللي ثانية لكل عملية تحويل، وتعمل دون اتصال بالإنترنت بعد الزيارة الأولى، ولا تتطلب إنشاء حساب أو تسجيل.

ملاحظة تعليمية: شرح المساحات اللونية

RGB (إضافي)

يخلط RGB الضوء الأحمر والأخضر والأزرق. جميع القنوات عند 255 = أبيض؛ جميعها عند 0 = أسود. يستخدم في الشاشات والكاميرات ومتصفحات الويب.

HEX (اختصار ويب)

HEX هو ترميز RGB كقاعدة 16. #3b82f6 = R:59، G:130، B:246. وهو مطابق لـ RGB — فقط ترميز أكثر إيجازًا لـ CSS و HTML.

HSL (الإدراكي)

HSL يفصل بين درجة اللون (زاوية عجلة الألوان 0-360 درجة) والتشبع (الكثافة) والسطوع (اللمعان). أسهل في الفهم من RGB بالنسبة للمصممين.

CMYK (طرحية)

CMYK يمزج بين أحبار السماوي والأرجواني والأصفر والأسود (Key). ويطرح من الورق الأبيض. شاشة RGB لها نطاق ألوان أوسع — بعض ألوان RGB الزاهية لا يمكن إعادة إنتاجها في CMYK.

استكشاف الأخطاء وإصلاحها

تحويل الشاشة إلى CMYK هو تقريب رياضي. للحصول على طباعة احترافية، استخدم ملف تعريف ألوان ICC معاير في برنامج مثل Adobe Illustrator أو Photoshop.

استخدم إخراج RGBA بدلاً من ذلك. يدعم المتصفحات الحديثة الرمز السداسي عشري المكون من 8 أرقام (#3b82f6cc) ولكن لا تدعمه جميع الأدوات — RGBA أكثر أمانًا وتوافقًا على نطاق أوسع.

تقتصر أدوات اختيار الألوان في المتصفح على نطاق sRGB. سيتم تقييد الألوان ذات النطاق الواسع (P3، Rec2020) إلى أقرب ما يعادلها في نطاق sRGB.

تستخدم Figma HSB (تسمى أيضًا HSV)، وليس HSL. تنتج الأداة أيضًا HSV — تحقق من هذا العمود للحصول على تطابق مباشر.

هل تعلم؟

تم إدخال ترميز الألوان HEX إلى HTML في عام 1996 مع مواصفات HTML 3.2. قبل ذلك، كانت المتصفحات تتعرف فقط على 16 لونًا مسمىًا (مثل "الأحمر" و"الأزرق"). توسعت لوحة ألوان الويب الكاملة إلى 140 لونًا مسمىًا مع CSS1، ولكن HEX ظل التنسيق السائد — ولا يزال كذلك، بعد أكثر من 25 عامًا.