محول الألوان Hex RGB HSL

محول ألوان مجاني: HEX إلى RGB، وRGB إلى HEX، بالإضافة إلى HSL، وHSV، وCMYK، وalpha. أشرطة التمرير المباشرة ومنتقي الألوان وEyeDropper والعينات المحفوظة والتناغمات وتباين WCAG ومعاينة عمى الألوان وتصدير التعليمات البرمجية، بدون اشتراك، تعمل محليًا.

تم بناؤه وصيانته بواسطة Shehzad Munir ·

محول الألوان Hex RGB HSL
Loading Color Converter
Share

تحويل الألوان في كل اتجاه، على الفور

قم بتحويل أي لون بين HEX وRGB وHSL وHSV/HSB وCMYK في أي اتجاه، فور الكتابة. مصمم للمصممين والمطورين، فهو يضيف أشرطة تمرير RGB/HSL/alpha تفاعلية مع مسارات متدرجة حية، ومنتقي الألوان، وEyeDropper للشاشة، والعينات المحفوظة والحديثة، وتناغمات الألوان الجاهزة، ومنحدر الصبغة/الظل، وخلاط لونين، ومعاينة عمى الألوان، وفحوصات تباين WCAG المباشرة ومقتطفات التعليمات البرمجية الجاهزة للنسخ لـ CSS وTailwind وSCSS وSwift وAndroid، كل ذلك في متصفحك، بدون تحميل أي شيء.

يكون محول الألوان مفيدًا فقط إذا كان يتحدث عن كل ملاحظة تقوم بها. تقوم هذه الأداة بتحويل HEX إلى RGB والعودة، كما تربط أيضًا HSL وHSV (وتسمى أيضًا HSB) وCMYK، كل ذلك مرة واحدة وفي الوقت الفعلي. اكتب HEX مثل #3b82f6 وستحصل على الفور على rgb(59, 130, 246)، وhsl (217، 91%، 60%)، وhsv (217، 97%، 96%) وcmyk (76%، 47%، 0%، 4%). قم بتغيير أي حقل واحد وتتبعه الحقول الأخرى، حتى تتمكن من التفكير في النموذج الذي يناسب المهمة: HEX للعلامات، وRGB للقماش والتدرجات، وHSL/HSV لتعديلات بديهية على الإضاءة والتشبع، وCMYK عندما يتجه التصميم إلى الطباعة.

سمات

  • ثنائي الاتجاه HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK، مع ألفا
  • أشرطة تمرير تفاعلية RGB وHSL وAlpha مع مسارات متدرجة حية
  • منتقي الألوان الأصلي + متصفح EyeDropper
  • التاريخ الحديث + العينات المحفوظة (المحفوظة في متصفحك)
  • دعم CSS للألوان المسماة (قرمزي، أزرق مخضر، ذهبي...)
  • التناغمات، منحدر الصبغة/الظل + خلاط لونين
  • معاينة عمى الألوان (عمى البروتانوبيا، عمى العمى الثنائي، عمى التثلثي)
  • شارات التباين المباشرة WCAG AA/AAA
  • تصدير جاهز للنسخ لـ CSS وTailwind وSCSS وSwift وAndroid

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

  1. 1

    اختر لونًا أو اكتبه

    استخدم منتقي الألوان، EyeDropper، أو اكتب قيمة HEX أو rgb() أو hsl() أو hsv()/hsb() أو cmyk() أو اسم لون CSS مثل "teal". يتم تحديث كل التنسيقات الأخرى على الفور.

  2. 2

    قراءة التحويلات

    تظل حقول HEX وRGB وHSL وHSV وCMYK جميعها متزامنة. قم بتحرير أي واحد منها وإعادة حساب الباقي مباشرة، حتى تتمكن من العمل بأي تدوين تفضله.

  3. 3

    استكشاف اللوحات والتناغمات

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

  4. 4

    انسخ وتحقق من التباين

    انسخ أي تنسيق بنقرة واحدة واقرأ شارات WCAG AA/AAA للتأكد من بقاء اللون قابلاً للقراءة باللون الأبيض أو الأسود قبل شحنه.

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

  • تحويل HEX إلى RGB (أو RGB إلى HEX) أثناء كتابة CSS أو JSX.
  • قم بترجمة علامة تجارية HEX إلى HSL/HSV من أجل تعديل السمات وألفا.
  • قم بتحويل اللون إلى CMYK لسير عمل الطباعة وما قبل الطباعة.
  • أنشئ لوحات يمكن الوصول إليها باستخدام تعليقات تباين WCAG الفورية.
  • إنشاء مخططات تكميلية ومماثلة لواجهة المستخدم والرسوم التوضيحية.
  • احصل على لون مباشرة من الشاشة باستخدام EyeDropper.

دليل مفصل

من HEX إلى RGB وHSL وHSV وCMYK بدون حسابات رياضية

تحت الغطاء، يقوم المحول بتطبيع كل إدخال إلى ثلاثية RGB واحدة، ثم يطبق صيغ sRGB القياسية لاشتقاق المساحات الأخرى، وهي نفس متصفحات الرياضيات وأدوات التصميم التي تستخدمها، بحيث تتطابق الأرقام مع ما تراه في Figma أو Photoshop أو Chrome DevTools. كما أنه يفهم أيضًا HEX المختصر (#fff)، وHEX المكون من 8 أرقام مع alpha (#3b82f6aa)، وrgb()/rgba()، وhsl()/hsla()، وألوان CSS الشائعة مثل القرمزي والأزرق المخضر والذهبي، لذلك لن تضطر أبدًا إلى حفظ صيغة أو تبديل علامات التبويب. يحتوي كل تنسيق على زر نسخ، وتعرض عينة المعاينة الكبيرة اللون الخاص بك على خلفية حقيقية حتى تتمكن من التحقق من سلامته في لمحة.

تصميم لوحات أفضل مع التناغمات والمنحدرات

اختيار لون واحد أمر سهل؛ بناء لوحة متماسكة هو الجزء الصعب. يقوم المحول بإنشاء تناغمات الألوان من قواعد نظرية الألوان، التكميلية (عكس العجلة)، المماثلة (الجيران)، الثلاثية والرباعية (متباعدة بشكل متساو)، كعينات قابلة للنقر يمكنك إسقاطها مباشرة في مشروعك. ينتقل منحدر الخفة من اللون الأسود القريب إلى اللون الأبيض القريب بنفس درجة اللون والتشبع، مما يمنحك الصبغات والظلال التي يصل إليها المصممون عندما يحتاجون إلى حالات التمرير والحدود والتعطيل. يتيح لك الخلاط ذو اللونين مزج أي زوج بنسبة مختارة لإنشاء الوسطيات، ويتيح لك صف الضبط الدقيق تفتيح اللون أو تغميقه أو تشبعه أو عدم تشبعه أو تدويره بنقرة واحدة.

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

اللون الجيد هو لون قابل للقراءة. يُظهر المحول نسبة تباين WCAG للون الخاص بك مقابل كل من الأبيض والأسود ويتوافق مع الأعلام AA (4.5:1) وAAA (7:1)، حتى تتمكن من التقاط نص منخفض التباين قبل شحنه، وهو رفيق طبيعي لمدقق التباين المخصص. ولأن كل شيء يعمل محليًا في متصفحك، فإن ألوانك لا تترك جهازك أبدًا: لا يوجد تحميل ولا حساب ولا تتبع، مما يحافظ على خصوصية عمل العلامة التجارية والعميل بينما تظل الأداة فورية.

الأسئلة المتداولة

كيف أقوم بتحويل HEX إلى RGB؟

اكتب أو الصق قيمة HEX (مثل #3b82f6 أو #fff) في الحقل HEX، أو استخدم منتقي الألوان. تظهر قيمة RGB على الفور كـ rgb(r, g, b)، ويمكنك نسخها بنقرة واحدة. يعمل التحويل بالطريقة الأخرى أيضًا، اكتب قيمة rgb() وستبدأ تحديثات HEX.

هل يمكنني التحويل إلى HSL وHSV وCMYK في نفس الوقت؟

نعم. كل الحقول: HEX، وRGB، وHSL، وHSV/HSB، وCMYK، تظل متزامنة. قم بتحرير أي واحد وسيتم إعادة حساب الآخرين على الفور، حتى تتمكن من قراءة جميع الرموز الخمسة لنفس اللون دون تشغيل أدوات منفصلة.

ما هو الفرق بين HSL و HSV؟

يصف كلاهما اللون حسب درجة اللون، لكن نموذجي HSL (الإضاءة) وHSV/HSB (القيمة/السطوع) للتشبع بشكل مختلف. يضع HSL الألوان النقية عند 50% من الإضاءة، بينما يضعها HSV على قيمة 100%، وبالتالي فإن نفس النسبة يمكن أن تبدو أفتح أو أغمق بين الاثنين. تعرض هذه الأداة كليهما حتى تتمكن من اختيار ما يتوقعه إطار العمل الخاص بك.

كيف يمكنني الحصول على قيمة CMYK للطباعة؟

اكتب اللون الخاص بك بأي تنسيق واقرأ حقل CMYK، على سبيل المثال #3b82f6 يصبح cmyk(76%, 47%, 0%, 4%). CMYK هو النموذج الطرحي الذي تستخدمه الطابعات، لذلك يكون هذا مفيدًا عندما يلزم مطابقة لون الويب في كتيب أو عبوة.

هل يمكنني اختيار لون من شاشتي؟

نعم، في المتصفحات المدعومة (Chrome وEdge والمتصفحات الأخرى التي تحتوي على EyeDropper API) يفتح زر "Pick" قطارة الشاشة حتى تتمكن من أخذ عينات من أي بكسل أو لون من صورة أو موقع ويب أو سطح المكتب، وتحميله مباشرة في المحول.

هل يمكنني ضبط الألوان باستخدام أشرطة التمرير وإضافة الشفافية؟

نعم. تعرض كل من أشرطة التمرير التفاعلية R وG وB وH وS وL وalpha مسارًا متدرجًا مباشرًا، بحيث يمكنك ضبط الظل عن طريق سحب قيمة محددة أو كتابتها. ينتج شريط التمرير ألفا مخرجات HEX مكونة من 8 أرقام وrgba()/hsla() للشفافية.

هل يوضح كيف يبدو اللون للمستخدمين المصابين بعمى الألوان؟

نعم. تحاكي معاينة عمى الألوان كيفية ظهور اللون في ظل عمى البروتانوبيا، وعمى العمى الثنائي، والعمى الثلاثي، وعمى الألوان الكامل، لذلك يمكنك التحقق من أن لوحة الألوان لا تزال تتواصل مع ما يقرب من 1 من كل 12 رجلاً و1 من كل 200 امرأة يعانون من نقص رؤية الألوان.

هل يمكنني تصدير اللون بتنسيق CSS أو Tailwind أو رمز التطبيق؟

نعم. توفر لوحة التصدير مقتطفات جاهزة للنسخ لمتغيرات CSS وrgb() وSCSS وإدخال تكوين Tailwind وSwift UIColor وAndroid Color.parseColor وJSON، بالإضافة إلى العينات الحديثة والمحفوظة المخزنة محليًا في متصفحك.

هل محول الألوان مجاني وخاص؟

نعم. إنه مجاني تمامًا بدون تسجيل، وكل التحويلات تتم محليًا في متصفحك. لا يتم أبدًا تحميل ألوانك إلى الخادم، لذلك يظل عمل العلامة التجارية والعميل خاصًا.

هل يمكنني تحويل RGB أو HEX إلى HSL وOKLCH؟

نعم. فهو يقوم بالتحويل بين HEX وRGB(A) وHSL وOKLCH الحديث حتى تتمكن من نسخ التنسيق الدقيق الذي تحتاجه CSS أو أداة التصميم.

هل يتعامل مع الشفافية (RGBA/HEX مع ألفا)؟

نعم. قم بتضمين قيمة ألفا وسينتج RGBA ورقم سداسي عشري مكون من 8 أرقام، لذلك يتم الحفاظ على العتامة عند نسخ اللون إلى أنماطك.

من المجلة

All articles →