ForHosting KIT · تحرير الصور وتحليلها

مولد نقاط توقف ألوان التدرج بتوزيع متساوٍ

احصل على كل نقاط توقف الألوان بين طرفين: من #FF0000 إلى #0000FF في 5 نقاط ينتج #BF0040 عند 25% و#800080 عند 50% و#4000BF عند 75%، مع تضمين الطرفين. مجاناً في متصفحك.

مجاني
يعمل في متصفحك
دون تسجيل
بياناتك لا تغادر جهازك

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

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

يحوّل مولّد نقاط توقف ألوان التدرج لونَي النهاية إلى تسلسل كامل ومتوقع يمكن استعماله في CSS ورموز التصميم والمخططات وcanvas والأعمال المرسومة برمجيًا. أدخل لون البداية ولون النهاية والعدد الإجمالي للنقاط. تشمل النتيجة الطرفين وجميع الألوان الوسيطة، ويرتبط كل لون بموضعه النسبي المئوي.

أنشئ قائمة كاملة انطلاقًا من لونَي النهاية

يبدأ التدرج عادة بتوجيه تصميمي بسيط: الانتقال من لون علامة تجارية إلى لون آخر عبر عدد محدد من الخطوات. لكن تحويل هذا التوجيه إلى بيانات قابلة لإعادة الاستخدام يصبح مرهقًا عندما يلزم حساب كل لون وسيط وكل موضع بطريقة متسقة. يستقبل هذا المولّد لون بداية سداسيًا ولون نهاية سداسيًا والعدد الإجمالي المطلوب للنقاط.

يضع البداية عند صفر في المئة والنهاية عند مئة في المئة، ثم يوزع سائر النقاط على فواصل مئوية متساوية. تُوحّد كل نتيجة في صيغة سداسية من ستة محارف كبيرة، ولذلك ينتج الإدخال المختصر مثل #f00 قيمة ثابتة هي #FF0000. تصبح المصفوفة الناتجة جاهزة للتحويل إلى تدرجات CSS أو تعريفات SVG أو شيفرة canvas أو إعدادات المخططات أو عملية بناء رموز التصميم.

ولأن العدد يتضمن الطرفين، فإن طلب خمس نقاط يعني الحصول على المواضع 0 و25 و50 و75 و100 في المئة. تجعل هذه القاعدة حجم الاستجابة واضحًا وتمنع الإضافات الخفية التي قد تفسد فهرسة المصفوفة في المراحل اللاحقة.

افهم طريقة الاستيفاء الحتمية

يُستوفى اللون بصورة مستقلة عبر قنوات الأحمر والأخضر والأزرق. يحسب المولّد في كل موضع المسافة النسبية من قيمة بداية القناة إلى قيمة نهايتها، ثم يقرّب الناتج إلى أقرب عدد صحيح صالح بين 0 و255. تُعرف هذه الطريقة عادة بالاستيفاء الخطي في RGB.

وقد اختيرت لتكون مباشرة وقابلة لإعادة الإنتاج؛ فلا تعتمد على العشوائية أو البحث في ملف تعريف لوني أو عرض المتصفح أو أي خدمة خارجية. تُحسب المواضع المئوية بقسمة فهرس النقطة على عدد الفواصل، وتُقرّب الكسور الدورية إلى ست منازل عشرية. فعند طلب أربع نقاط مثلًا، يظهر الموضعان الأوسطان عند 33.333333 و66.666667 في المئة من دون عرض آثار مزعجة لحسابات الفاصلة العائمة.

لا يُقدَّم RGB الخطي بوصفه نموذجًا متساويًا إدراكيًا؛ فقد لا تبدو الخطوات الرقمية المتساوية متساوية في السطوع للعين البشرية.

تحقق من المدخلات وادمج النقاط الناتجة

يقبل حقلا لونَي النهاية ثلاثة أرقام سداسية أو ستة، ويمكن أن يسبقهما رمز المربع. تُحذف المسافات المحيطة بالقيمة، لكن المسافات الداخلية وقنوات ألفا وأسماء الألوان والمحارف غير السداسية تُرفض. يجب أن يكون عدد النقاط عددًا صحيحًا فعليًا بين 2 و256.

يضمن الحد الأدنى وجود موضع ذي معنى لكل طرف، بينما يحافظ الحد الأعلى على إمكانية توقع حجم الناتج ومدة التنفيذ. تكرر الاستجابة الناجحة لونَي النهاية بعد توحيدهما، وتعرض العدد الذي جرى التحقق منه، وتقدم مصفوفة stops تحتوي سجلاتها على الحقلين color وpercentage. يمكنك جمع هذه السجلات في قيمة CSS من نوع linear-gradient، أو حفظها كرموز تصميم، أو إدراجها في قائمة نقاط SVG، أو استخدام النسب كمعالم موحّدة في محرّك عرض آخر.

تحسب الخوارزمية المحدودة نفسها سجلات الطرفين والقيم الوسيطة، ويقلل الحساب الصحيح في بسط القناة انحرافات الفاصلة العائمة غير الضرورية.

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

إنشاء تعريفات تدرج CSS

أنشئ ألوانًا سداسية موحّدة ومواضع يمكن جمعها في تعريف linear-gradient أو radial-gradient قابل لإعادة الإنتاج.

بناء سلالم رموز التصميم

حوّل لونَي نهاية معتمدين إلى تسلسل ثابت الطول للسمات أو المكوّنات أو تصورات البيانات.

تعبئة رسومات SVG وcanvas

استخدم كل زوج من اللون والنسبة كنقطة حتمية في الرسومات والمخططات والتأثيرات المُنشأة.

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

هل يتضمن الناتج لونَي النهاية؟

نعم. النقطة الأولى هي لون البداية الموحّد عند 0 في المئة، والنقطة الأخيرة هي لون النهاية الموحّد عند 100 في المئة.

ما الفضاء اللوني المستخدم في الاستيفاء؟

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

هل يمكنني استخدام لون سداسي من ثلاثة أرقام؟

نعم. تُوسّع القيم مثل #f00 إلى ستة أرقام قبل الاستيفاء، وتستخدم جميع الألوان الناتجة صيغة #RRGGBB بالأحرف الكبيرة.

كم نقطة يمكنني طلبها؟

يجب أن يكون العدد صحيحًا من 2 إلى 256 شاملًا. وهو يمثل طول النتيجة الكامل بما في ذلك الطرفان.

كيف أنشئ تدرجاً من الأحمر إلى الأزرق بخمس نقاط؟

أدخل #FF0000 بداية و#0000FF نهاية و5 عدداً للنقاط. ستحصل على #FF0000 عند 0% و#BF0040 عند 25% و#800080 عند 50% و#4000BF عند 75% و#0000FF عند 100%.

أدوات ذات صلة

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

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

الـEndpoint

POSThttps://api.kit.forhosting.com/color/gradient-stops

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

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

curl -X POST https://api.kit.forhosting.com/color/gradient-stops \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"start_color":"#FF0000","end_color":"#0000FF","count":5}'

const res = await fetch("https://api.kit.forhosting.com/color/gradient-stops", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "start_color": "#FF0000",
    "end_color": "#0000FF",
    "count": 5
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/gradient-stops",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "start_color": "#FF0000",
    "end_color": "#0000FF",
    "count": 5
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/gradient-stops", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"start_color":"#FF0000","end_color":"#0000FF","count":5}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"start_color":"#FF0000","end_color":"#0000FF","count":5}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/gradient-stops", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

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

{
  "start_color": "#FF0000",
  "end_color": "#0000FF",
  "count": 5
}

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

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

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

الأسعار

لكل طلب$0.002

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

الحدود

max_stops 256

الأخطاء

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

ملاحظات تقنية

يكشف التحقق الصارم الألوان غير الصحيحة والأعداد غير المسموح بها قبل دخولها في مسار عمل إنتاجي، بينما يضمن استيفاء RGB الحتمي أن تُنتج المدخلات نفسها دائمًا JSON مطابقًا.

افهم طريقة الاستيفاء الحتمية

غير أن ميزته تكمن في عقد واضح لتوليد الشيفرة واختبارات الانحدار والأنظمة التي تتطلب النتيجة نفسها في المتصفح وفي worker خاص بالـ API.

تحقق من المدخلات وادمج النقاط الناتجة

تبلغ تكلفة API للأتمتة $0.002 لكل طلب، أما منفّذ المتصفح فيناسب العمل التفاعلي السريع.

أسئلة تقنية

ما تكلفة طلب API؟

سعر API هو $0.002 لكل طلب. ويمكن أيضًا تنفيذ الحساب الحتمي نفسه مجانًا في المتصفح على هذه الصفحة.

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

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

أنشئ قائمة كاملة انطلاقًا من لونَي النهاية

افهم طريقة الاستيفاء الحتمية

تحقق من المدخلات وادمج النقاط الناتجة

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

إنشاء تعريفات تدرج CSS

بناء سلالم رموز التصميم

تعبئة رسومات SVG وcanvas

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

أدوات ذات صلة

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

الـEndpoint

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

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

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

الأسعار

الحدود

الأخطاء

ملاحظات تقنية

افهم طريقة الاستيفاء الحتمية

تحقق من المدخلات وادمج النقاط الناتجة

أسئلة تقنية

شكرًا