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

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

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

Share
فئة
أدوات المطور
يشمل
مميزات 9
وصول
حر · لا الاشتراك
خصوصية
يعمل في المتصفح الخاص بك
محول الألوان Hex RGB HSL

Calibrating Color Converter......

Please wait a moment

كيفية الاستخدام

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

  1. 01

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

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

  2. 02

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

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

  3. 03

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

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

  4. 04

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

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

حالات الاستخدام

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

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

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

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

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

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

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

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

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

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

كيف أقوم بتحويل 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، بالإضافة إلى العينات الحديثة والمحفوظة المخزنة محليًا في متصفحك.

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

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