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

مولد عينة لون SVG

احصل على عينة لون جاهزة للوثائق ومفاتيح الرسوم: يصبح #3498db مربعًا بصيغة SVG بحجم 24 في 24 مملوءًا بهذا اللون وموسومًا لقارئات الشاشة. اضبط الحجم واستدارة الزوايا عند الحاجة. مجاني في متصفحك.

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

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

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

مثال محلول

إذا أدخلت

اللون: #3498db

تحصل على

Hex: #3498db
سداسي عشري خام: #3498db
المقاومة (Ω): 52
G: 152

تحتاج أنظمة التصميم وأدلة الأسلوب والوثائق التقنية باستمرار إلى مستطيل صغير ملوّن بجوار رمز hex حتى يرى القارئ أزرق العلامة التجارية أو أحمر الحالة أو ألوان سلاسل المخطط دون فتح أداة لوحة منفصلة. كتابة SVG يدوياً في كل مرة تدعو إلى أخطاء في سمة fill وأبعاد غير متطابقة عبر الأسطورة وhex غير صالح يفشل لاحقاً فقط في المتصفح. يقبل مولد عينة اللون SVG هذا لوناً hex وعرضاً وارتفاعاً اختياريين ونصف قطر زاوية اختيارياً، ويتحقق من المدخلات، ويعيد ترميز SVG مضمّناً حتمياً يمكن لصقه في Markdown أو وثائق HTML أو دفاتر مكونات Storybook.

ما عينة لون SVG ومتى تحتاج إليها

عينة اللون مستطيل مملوء صغير يمثل رمز لون واحد: العلامة الأساسية أو حالة الخطر أو سلسلة مخطط A أو خطوة لوحة في نظام تصميم. على الويب أكثر التمثيلات قابلية للنقل هو عنصر SVG مضمّن مع rect واحد يتطابق fill فيه مع رمز hex مُطبَّع. بخلاف شريحة PNG نقطية، يتوسّع SVG بوضوح في وثائق الشاشات عالية الدقة، ويطبع بنظافة، ويُدمَج في عارضات Markdown التي تسمح بـ HTML أو SVG خام.

وبخلاف خلفية CSS على span، يكون الترميز مكتفياً بذاته: يمكن نسخ سلسلة واحدة إلى README أو صفحة Confluence أو قالب بريد يسمح بـ SVG أو ملاحظة Storybook دون إرسال ورقة أنماط. الفرق التي تنشر مكتبات مكونات تحتاج غالباً عشرات الشرائح المتطابقة التي تختلف فقط بالتعبئة والتسمية؛ توليدها يدوياً مرهق ومعرّض للخطأ، خاصة عندما يخلط المؤلفون الاختصار ثلاثي الأرقام والأحرف الكبيرة وبادئة الهاش الناقصة. نصف قطر الزاوية الاختياري يدعم شرائح واجهة حديثة دون إجبار كل مستدعٍ على تحرير بيانات path يدوياً.

أين تفيد عينة لون جاهزة

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

أبقِ الطلبات صغيرة وثبّت حقل svg في الاختبارات الذهبية، فتحصل على شرائح قابلة للتكرار لـ README وأدلة الأسلوب وكتل CMS وصفحات تسويق على الحافة دون إقامة خط أنابيب صور أو تنقيط الألوان إلى PNG عند كل تغيير رمز.

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

شرائح توثيق رموز التصميم

ولّد عينة SVG متسقة لكل لون علامة أو حالة في دليل أسلوب حتى يرى القرّاء التعبئة بجوار رمز hex.

أساطير المخططات والخرائط

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

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

ما صيغ hex التي يقبلها مولد عينة لون SVG؟

ألوان ست عشرية من ثلاثة أو ستة أرقام، مع أو بدون # بادئ، دون تمييز حالة الأحرف. الاختصار مثل #abc يتوسع إلى #aabbcc.

ما الأبعاد الافتراضية للعينة؟

العرض والارتفاع الافتراضيان كلاهما 24 وحدة مستخدم SVG. يمكن ضبط أحدهما أو كليهما إلى أي عدد صحيح من 1 إلى 512 لشرائح أكثف أو أكبر.

كيف أحصل على عينة مستديرة الزوايا؟

يجب ألا يتجاوز نصف الضلع الأصغر. عندما يكون rx صفراً أو محذوفاً، يكون للـ rect زوايا حادة بلا سمة rx.

هل تعرف قارئات الشاشة اللون الذي تعرضه العينة؟

نعم. تُعلَّم كل عينة على أنها صورة وتحمل وسمًا برمزها، مثل Color swatch #3498db، فتعلن قارئة الشاشة اللون بدل تجاوزه.

هل يمكنني لصق العينة في ملف README أو صفحة Markdown؟

نعم، حيثما يسمح العارض بـ HTML أو SVG مباشرة. فالعينة قطعة واحدة مستقلة لا تحتاج إلى ملف تنسيق، وتبقى حادة على الشاشات عالية الدقة وفي الطباعة.

أدوات ذات صلة

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

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

الـEndpoint

POSThttps://api.kit.forhosting.com/color/swatch-svg

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

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

curl -X POST https://api.kit.forhosting.com/color/swatch-svg \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"color":"#3498db"}'

const res = await fetch("https://api.kit.forhosting.com/color/swatch-svg", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "color": "#3498db"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/swatch-svg",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "color": "#3498db"
},
)
task_id = res.json()["task_id"]

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

body := bytes.NewBufferString(`{"color":"#3498db"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/swatch-svg", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

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

{
  "color": "#3498db"
}

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

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

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

الأسعار

لكل طلب$0.002

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

الأخطاء

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

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

المنطق النقي نفسه لمسار parse يغذي أداة المتصفح المجانية ومسار API، فلا تختلف خطوط أنابيب التوثيق والمحررون البشر حول الترميز الصادر. يُبلَّغ عن فشل التحقق كـ invalid_input ولا يُفوتر، مما يحافظ على أمان منشئي الأساطير الآليين عندما لا يزال حقل CMS يحمل اسم لون مسودة بدل رمز hex.

ما عينة لون SVG ومتى تحتاج إليها

توحّد هذه القدرة تلك الشريحة: ترسل سلسلة لون فتستلم SVG ثابتاً مع width وheight وviewBox وrole وaria-label يمكن الوصول إليه، إضافة إلى hex سداسي الأرقام الموسَّع وقنوات RGB للجداول بجانب الرسم.

عقد الإدخال وقواعد التحقق وحقول الاستجابة

الاختصار ثلاثي الأرقام مثل #abc يتوسع إلى #aabbcc ويُحوَّل إلى أحرف صغيرة لعقد مستقر. العرض والارتفاع الاختياريان أعداد صحيحة من واحد إلى خمسمئة واثني عشر inclusive؛ عند حذفهما تحصل على الشريحة الافتراضية أربعاً وعشرين في أربع وعشرين المستخدمة في الأساطير الكثيفة. يضبط rx الاختياري نصف قطر زاوية؛ يجب أن يكون عدداً محدوداً أكبر من أو يساوي صفراً ولا يتجاوز نصف الضلع الأصغر، والافتراضي صفر للزوايا الحادة. ترتيب السمات ثابت حتى تبقى المقارنة بايت بايت في الاختبارات مستقرة عبر محركات JavaScript. أرسل كائن JSON عبر POST مع حقل color مطلوب: سلسلة hex من ثلاثة أو ستة أرقام ست عشرية، مع أو بدون هاش بادئ. تُقبل الأسماء البديلة hex وfill وvalue وtext وinput لنفس الحقل حتى تعيد أدوات النماذج والسكربتات استخدام أسماء شائعة. الأطوال غير الصالحة والأحرف غير الست عشرية وبادئات 0x والأرقام العارية والسلاسل الفارغة تفشل بـ invalid_input مع تسمية المشكلة. عند النجاح يعكس الجسم اللون المطبَّع كـ color وhex، وhex_raw الأصلي بعد القص، والقنوات الصحيحة r وg وb، وwidth وheight وrx المحلولة، وسلسلة view_box، وعلامة shorthand، ورسالة قصيرة، وسلسلة SVG مرتين كـ svg وmarkup حتى يربط العملاء الذين يتوقعون أياً من الاسمين دون تعيين. يتضمن جذر SVG دائماً مساحة أسماء SVG وسمات width وheight متطابقة وviewBox من صفر صفر width height وrole يساوي img وaria-label يتضمن hex المطبَّع لقارئات الشاشة.

أين تثبت API عينة لون SVG قيمتها

يحتاج منشئو أساطير المخططات والخرائط إلى شرائح بحجم متطابق بتعبئات مختلفة؛ تثبيت width وheight مع تغيير اللون فقط يحافظ على محاذاة متوقعة في الجداول وصفوف flex. تستفيد مواقع المحتوى التي تترتب على مولد عينة لون SVG من أداة متصفح مجانية حية يطابق خرجها مسار الأتمتة المدفوع، فتبقى الدروس والمقالات وأمثلة API صادقة. لأن التنفيذ parse نقي من المستوى A، يكلف كل استدعاء ناجح السعر الأساسي المنشور $0.002 بلا رموز نموذج ولا شبكة صادرة، ولا يستهلك فشل التحقق الرصيد.

حالات التكامل

README وملاحظات Storybook مفحوصة في CI

أعد توليد عينات SVG مضمّنة من ملف JSON للرموز في التكامل المستمر وافشل عند انحراف الترميز أو الألوان.

أسئلة تقنية

ماذا تتضمن الاستجابة غير ترميز SVG؟

لون #rrggbb مطبَّع، hex_raw الأصلي، قنوات RGB، width، height، rx، view_box، علامة shorthand، رسالة قصيرة، ونفس الترميز تحت مفتاحي svg وmarkup.

كم يكلف مولد عينة لون SVG؟

أداة المتصفح مجانية. تستخدم طلبات API رصيد KIT مسبقاً الدفع بمقدار $0.002 لكل استدعاء ناجح؛ الإدخال غير الصالح لا يُفوتر.

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

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

مثال محلول

ما عينة لون SVG ومتى تحتاج إليها

أين تفيد عينة لون جاهزة

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

شرائح توثيق رموز التصميم

أساطير المخططات والخرائط

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

أدوات ذات صلة

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

الـEndpoint

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

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

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

الأسعار

الأخطاء

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

ما عينة لون SVG ومتى تحتاج إليها

عقد الإدخال وقواعد التحقق وحقول الاستجابة

أين تثبت API عينة لون SVG قيمتها

حالات التكامل

README وملاحظات Storybook مفحوصة في CI

أسئلة تقنية

شكرًا