ForHosting KIT · البيانات والملفات: تحويل وتنظيف

طريقة تحويل كود اللون بين HEX وRGB وHSL

أداة تحوّل كود اللون بين HEX وRGB وHSL، ذهابًا وإيابًا، دون أي تغيير في اللون نفسه — فقط طريقة كتابته. تلصق الكود، تنسخ النتيجة، وتستخدمها في CSS أو Figma أو إعدادات متجرك الإلكتروني. مجانية تمامًا وتعمل داخل متصفحك، ومتاحة أيضًا عبر الـAPI لمن يحوّل عددًا كبيرًا من الألوان دفعة واحدة.

● مستقرةمجاني · داخل متصفحك

شغّل الأداة مجانًا اطّلع على الـAPI

استخدمها من الويبAPIالبريدالتطبيق قريبًاTelegram قريبًا

نفس اللون، ثلاث طرق لكتابته

#1E90FF وrgb(30, 144, 255) وhsl(210, 100%, 56%) تصف اللون نفسه تمامًا. صيغة HEX مختصرة وشائعة في CSS وأدوات التصميم؛ صيغة RGB توضّح قنوات الأحمر والأخضر والأزرق كلًا على حدة، وهو ما تطلبه مكتبات برمجية كثيرة؛ أما HSL فتتحدث بلغة من يضبط الألوان فعليًا — درجة اللون والتشبع والإضاءة — ما يسهّل صنع نسخ أفتح أو أغمق من اللون نفسه. التحويل بين الصيغ لا يغيّر اللون؛ يغيّر فقط طريقة كتابته لتناسب كل سياق.

أين تتوقف مهمتك بسبب صيغة اللون

يسلّم المصمم لوحة الألوان بصيغة HEX، بينما يطلب المكوّن البرمجي قيم RGB منفصلة لكل قناة. كود الموقع القديم يستخدم rgb()، ودليل الهوية الجديد وصل بالكامل بصيغة HSL. منصة المتجر الإلكتروني لا تقبل إلا HEX من ستة أحرف، واللون نُسخ أصلًا بصيغة hsl(). مواقف صغيرة كهذه تقطع سير العمل عدة مرات أسبوعيًا، والتحويل اليدوي يعالجها بصعوبة لأنه يتطلب حسابًا دقيقًا لكل قناة لا يقوم به أحد ذهنيًا. اللصق والتحويل والنسخ أسرع من البحث عن المعادلة كل مرة.

الاستخدام من الصفحة وعبر الـAPI

في الصفحة، الصق كود اللون بأي صيغة واحصل على الصيغ الأخرى جاهزة للنسخ فورًا — مجانًا، بلا حدّ، ودون أن يغادر شيء متصفحك. وعبر الـAPI، تخدم الأداة نفسها أنظمة كاملة ضمن حمولة تصل حتى 25 MB لكل طلب: توحيد ألوان كتالوج منتجات، تحويل رموز نظام تصميم، أو معالجة ألوان اختارها المستخدمون بأنفسهم. كل طلب يكلّف $0.002، سعر معلن دون اشتراك؛ للون واحد تُستخدم الصفحة، ولألف لون تُستخدم الـAPI.

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

من Figma إلى CSS

يرسل المصمم لوحة ألوان جديدة بصيغة HSL. يحوّل خالد العتيبي كل درجة إلى HEX ويلصقها مباشرة في متغيرات CSS الخاصة بالموقع، دون تثبيت إضافة أو فتح آلة حاسبة.

لون العلامة التجارية متطابق في كل قناة

تريد صاحبة محل حلويات أن يكون اللون الذهبي نفسه على اللافتة والموقع وقائمة الأسعار المطبوعة. بعد تحويل الكود إلى الصيغة التي تطلبها كل أداة، لا ينحرف اللون في أي مكان.

وضع ليلي دون إعادة تصميم

لإنشاء نسخة داكنة من الموقع، يحوّل عبدالله المنصوري الألوان الأساسية إلى HSL، يعدّل درجة الإضاءة لكل لون، ثم يعيدها إلى HEX — نتائج متسقة دون الاعتماد على تقدير العين.

نظام تصميم عبر الـAPI

تحتفظ شركة الخليج الرقمية برموز ألوان لعدة عملاء. سكربت واحد يحوّل اللوحة كاملة بين HEX وRGB وHSL عند توليد ملفات كل منصة — مئات التحويلات بسعر معلن لكل واحدة.

الأسئلة الشائعة

هل يغيّر تحويل HEX إلى RGB اللون نفسه؟

لا، فـHEX وRGB طريقتان لكتابة القنوات الثلاث نفسها، والتحويل دقيق في الاتجاهين. في HSL قد يظهر تقريب بسيط جدًا في الكسور العشرية، غير ملحوظ للعين.

ما الصيغ التي تدخل وتخرج من الأداة؟

الصيغ القياسية على الويب: HEX وRGB وHSL، في أي اتجاه. تلصق اللون بإحداها وتحصل على مقابله في البقية فورًا.

هل تصلح الأداة لألوان الطباعة CMYK؟

تركّز هذه الأداة على ألوان الشاشة بمعايير الويب. أما CMYK فنموذج مختلف مخصص للطباعة، ومطابقته مع ألوان الشاشة تعتمد على إعدادات المطبعة، وهذا خارج نطاق هذه الصفحة.

هل أدفع مقابل استخدامها في العمل اليومي؟

لا، الاستخدام من الصفحة مفتوح بلا تسجيل وبلا حدّ للتحويلات. المدفوع فقط هو الاستخدام عبر الـAPI لمن يربطها بنظام آلي — $0.002 للطلب.

هل تحتفظون بالألوان التي أُحوّلها؟

لا شيء يُحفظ أو يُرسل؛ يجري التحويل داخل متصفحك على جهازك مباشرة. ألوان مشروع سرّي لعميل تبقى معك وحدك.

لماذا أستخدم HSL بدل التعديل المباشر على HEX؟

لأن كل رقم في HSL له معنى مرئي واضح: درجة اللون والتشبع والإضاءة. لتفتيح لون يكفي رفع قيمة الإضاءة؛ في HEX الأمر نفسه يتحول إلى تجربة وخطأ.

للمطوّرين — الوصول عبر API

كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.

الـEndpoint

POSThttps://api.kit.forhosting.com/data/color-convert

صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.

استدعِ الخدمة من بيئتك

curl -X POST https://api.kit.forhosting.com/data/color-convert \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d &#39;{"items":["valor-1","valor-2"]}'

const res = await fetch("https://api.kit.forhosting.com/data/color-convert", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "items": [
      "valor-1",
      "valor-2"
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/data/color-convert",
    headers={"Authorization": f"Bearer {os.environ[&#39;KIT_KEY']}"},
    json={
    "items": [
        "valor-1",
        "valor-2"
    ]
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/data/color-convert", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => &#39;{"items":["valor-1","valor-2"]}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"items":["valor-1","valor-2"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/data/color-convert", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

مثال على الطلب

{
  "items": [
    "valor-1",
    "valor-2"
  ]
}

مثال على الاستجابة

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "data.color_convert",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.

الأسعار

لكل طلب$0.002

السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.

الحدود

max_mb 25

الأخطاء

HTTP	الرمز	المعنى
`401`	`unauthorized`	مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك.
`402`	`insufficient_balance`	رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة.
`404`	`unknown_type`	نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب.
`429`	`rate_limited`	تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة.

اطّلع على توثيق KIT الكامل ←

شغّل الأداة مجانًا