تخطي إلى المحتوى
Tutorial

تحويل الألوان بين hex وRGB وHSL باستدعاء API واحد

| 5 min read

أرسل لونًا بتنسيق HEX أو RGB أو HSL واحصل على التمثيلات الثلاثة مرة أخرى في منشور واحد. قم ببناء رموز التصميم المميزة، وتطبيع إدخال CMS، وإنشاء مقاييس السمة بدون مكتبة ألوان.

Code editor generating color design tokens from a brand color
Photo by Safar Safarov on Unsplash

إن رياضيات تحويل الألوان هي نوع التعليمات البرمجية التي تكتبها مرة واحدة، وتخطئ فيها بمهارة، وتنسخها فيما بينها المشاريع إلى الأبد. يعد Hex to RGB أمرًا مباشرًا؛ RGB إلى HSL هو مكان الأخطاء البعيدة عن الدرجة يعيش. تأخذ نقطة النهاية هذه لونًا بأي من التنسيقات الثلاثة وتعيدها جميعًا مرة واحدة تتوقف عن حمل وظائف التحويل.

الطلب

يمنحك الرد السلسلة السداسية {`{ r, g, b }`} كائن، و {`{ h, s, l }`} الكائن معا:

تنسيق الإدخال لا يهم. يمر rgb(62, 201, 151) أو سلسلة HSL وتحصل على نفس التمثيلات الثلاثة مرة أخرى. يعمل Hex مع أو بدون #:

قم بإنشاء مقياس تصميم مميز من لون علامة تجارية واحدة

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

قم بتشغيل ذلك في خطوة البناء واكتب الإخراج إلى ملف متغيرات CSS. تحصل على تنسيق لوحة من لون مصدر واحد، وتغيير لون العلامة التجارية يؤدي إلى إعادة إنشاء المقياس بأكمله:

هل تحتاج إلى لوحة كاملة بدلاً من تحويل واحد؟ ال /v1/color/palette تأخذ نقطة النهاية لونًا أساسيًا واحدًا وترجع مجموعة منسقة من الظلال والألوان التكميلية، حتى تتمكن من التركيز على لون العلامة التجارية دون اختيار كل عينة يدويًا.

تطبيع الألوان الملصقة في CMS

يقوم محررو المحتوى بلصق الألوان بأي تنسيق تصدره أداة التصميم الخاصة بهم: سداسي عشري من Figma، و rgb() من أداة لقطة الشاشة، أو HSL من مقتطف CSS. قم بتشغيل كل قيمة تم لصقها من خلال نقطة النهاية عند حفظ وتخزين الشكل السداسي الذي تمت تسويته. ثم يتعامل رمز العرض الخاص بك مع واحد التنسيق، ويستمر المحرر في لصق كل ما هو مناسب.

حيث يناسب

بالنسبة للرياضيات التفاعلية لواجهة المستخدم في المتصفح، تعد الوظيفة المحلية أمرًا جيدًا. تكتسب واجهة برمجة التطبيقات (API) مكانها في البناء الخطوات والواجهات الخلفية وأي لغة بدون حزمة ألوان ثابتة: يحل استدعاء HTTP واحد محل ملف التبعية. يعد تحويل الألوان واحدًا من حوالي 200 نقطة نهاية ذات غرض واحد في botoi، وكلها في الخلف مفتاح واحد مع 5 طلبات/دقيقة مجانًا.

جرب التحويل في ملعب تفاعلي, تصفح مستندات API الكاملة, أو توصيل خادم MCP لتحويل الألوان مباشرة من Claude أو Cursor.

FAQ

ما تنسيقات الألوان التي تقبلها واجهة برمجة التطبيقات (API) وترجعها؟
أرسل لونًا بتنسيق HEX أو RGB أو HSL وستقوم الاستجابة بإرجاع التمثيلات الثلاثة جميعها مرة واحدة. تعمل السلاسل السداسية مع أو بدون البادئة # البادئة. ستمنحك مكالمة واحدة السلسلة السداسية، والكائن {r، g، b}، والكائن {h، s، l}، لذلك لا تكتب حسابات التحويل يدويًا أبدًا.
لماذا يتم تحويل الألوان عبر واجهة برمجة التطبيقات بدلاً من المتصفح؟
لإجراء عمليات حسابية لواجهة المستخدم لمرة واحدة، قم بذلك في المتصفح. تكتسب واجهة برمجة التطبيقات (API) مكانها في خطوات البناء والواجهات الخلفية: إنشاء رموز التصميم المميزة في وقت الإنشاء، أو تطبيع الألوان الملصقة في نظام إدارة المحتوى (CMS)، أو إنتاج أصول ذات طابع خاص من جانب الخادم حيث لا تريد شحن مكتبة ألوان. إنها عبارة عن مكالمة HTTP واحدة من أي لغة، بما في ذلك اللغات التي لا تحتوي على حزمة ألوان جيدة.
هل يمكنني إنشاء لوحة كاملة، وليس فقط تحويل لون واحد؟
نعم. تأخذ نقطة نهاية اللون/لوحة الألوان لونًا أساسيًا وترجع مجموعة منسقة من الظلال والألوان التكميلية. استخدم اللون/التحويل عندما يكون لديك لون معروف وتحتاج إلى تمثيلات أخرى له، واللون/لوحة الألوان عندما يكون لديك لون علامة تجارية واحدة وتحتاج إلى مقياس لبناء سمة حوله.
كيف تساعد قيم HSL في تصميمها؟
يفصل HSL الصبغة عن التشبع والخفة، لذا يمكنك إنشاء مقياس الصبغة والظل من خلال الحفاظ على ثبات الصبغة والتشبع وتدرج الخفة. إن التفكير في هذا أسهل بكثير من دفع ثلاث قنوات RGB. قم بتحويل العلامة السداسية الخاصة بعلامتك التجارية إلى HSL مرة واحدة، ثم قم بإنشاء مقياس من 50 إلى 900 من خلال تحديد قيمة الخفة.
هل واجهة برمجة تطبيقات الألوان مجانية للاستخدام؟
نعم. يقع تحويل الألوان خلف نفس المستوى المجاني مثل بقية برامج botoi: 5 طلبات في الدقيقة دون الحاجة إلى مفتاح API، وحدود أعلى على الخطط المدفوعة. إنها واحدة من حوالي 200 نقطة نهاية ذات غرض واحد تحت مفتاح واحد.

ابدأ البناء مع botoi

أكثر من 150 نقطة نهاية API للبحث ومعالجة النصوص وتوليد الصور وأدوات المطورين. باقة مجانية، بدون بطاقة ائتمان.