مُفتِّح اللون
تفتيح #3366cc بنسبة 20% يعطي #5c85d6: ترتفع الإضاءة من 50% إلى 60% ويحتفظ الأزرق بصبغته وتشبعه. اصنعوا درجات أهدأ من لون علامتكم دون أن يميل إلى الرمادي. مجانًا في متصفحكم.
- مجاني
- يعمل في متصفحك
- دون تسجيل
- بياناتك لا تغادر جهازك
شغّل الأداة مجانًا
مثال محلول
- لون hex
- #3366cc
- المقدار
- 20
- رمز hex
- #5c85d6
- الإضاءة قبل
- 50
- الإضاءة بعد
- 60
يأخذ مُفتِّح اللون رمز hex في CSS ونسبة مئوية، ثم يُرجع نسخة أفتح برفع قناة الإضاءة فقط في فضاء HSL. تبقى الدرجة اللونية والتشبع كما هما، فتظل زُرق العلامة التجارية زرقاء وحُمرها حمراء بينما يصبح السطح أنعم لحالات التمرير والخلفيات والدرجات الفاتحة الملائمة للوصولية. المقدار نسبة مئوية من الهامش المتبقي بين الإضاءة الحالية والأبيض النقي: صفر بالمئة يترك العينة دون تغيير، ومئة بالمئة تنتج أبيض نقيًا، والقيم بينهما تتدرج بسلاسة لأي درجة بداية. تُرفض سلاسل hex غير الصالحة والنسب خارج صفر إلى مئة بخطأ تحقق واضح بدل القصّ الصامت.
كيف يعمل التفتيح في HSL
ابدأ بلون hex في CSS مثل #3366cc أو الشكل المختصر #36c. يوسّع المحلل الرموز ثلاثية الأرقام، ويحوّل الأرقام إلى أحرف صغيرة، ويحوّل كل زوج إلى أعداد صحيحة للأحمر والأخضر والأزرق من صفر إلى مئتين وخمسة وخمسين. تُربط هذه القنوات بالدرجة اللونية والتشبع والإضاءة بصيغ CSS وW3C القياسية: الإضاءة متوسط كسور القناة القصوى والدنيا، والتشبع يعتمد على تلك الإضاءة، والدرجة تُقاس بالدرجات حول عجلة الألوان مع رمادي لا لوني يبلّغ درجة صفر.
التفتيح لا يمزج اللون نحو الأبيض في RGB؛ بل يرفع نسبة الإضاءة فقط مع ثبات الدرجة والتشبع. الإضاءة الجديدة هي القديمة زائد المسافة المتبقية حتى مئة، مضروبة في المقدار على مئة. عند amount صفر تكون الصيغة هوية خالصة؛ وعند amount مئة تكون النتيجة أبيض نقيًا بإضاءة مئة؛ وعند amount عشرين يتقدم أزرق متوسط النغمة عشرين بالمئة من إضاءته الحالية نحو الأبيض.
بعد معرفة الإضاءة الجديدة، يعيد مسار CSS نفسه من الدرجة إلى RGB تحويل HSL إلى قنوات صحيحة ورمز hex من ستة أرقام بأحرف صغيرة. لا بذور عشوائية ولا طوابع زمنية ولا استدعاءات شبكة، فنفس المدخلات تعطي دائمًا نفس المخرج. تُرفض أشكال hex ذات ألفا بأربعة أو ثمانية أرقام لأن هذا العقد RGB غير شفاف فقط.
النسب دون صفر أو فوق مئة تفشل في التحقق حتى لا يتجاوز العملاء النطاق المسموح بصمت.
ما الذي ترسله وما الذي تستقبله
أرسل حقلين: color كسلسلة hex وamount كعدد محدود بين صفر ومئة شاملين. عند النجاح تعيد الاستجابة اللون المُطبَّع بست أرقام والمقدار المنظف، ثم توفّر عينتي original وresult. سلسلة formula قصيرة توثّق قاعدة L الأولية للوثائق والدعم.
فحوصات شائعة: تفتيح #3366cc بعشرين بالمئة، وتفتيح الأحمر النقي بخمسين بالمئة، والتأكد أن amount صفر يعيد hex الأصلي. استخدم نموذج المتصفح المجاني لمراجعات التصميم والدرجات السريعة، ثم استدعِ العقد ذاته من السكربتات عند الحاجة إلى توليد جماعي لرموز التمرير أو مقاييس السمة. أبقِ amount ضمن النطاق الموثق بدل الاعتماد على قصّ صامت — تفشل هذه الأداة بصراحة كي تبقى أنظمة التصميم قابلة للتوقع.
أين يظهر مُفتِّحو الألوان في العمل الفعلي
يبني مصممو المنتج حالات التمرير والنشط بتفتيح ألوان العلامة الأساسية دون إزاحة الدرجة، فيبقى تفتيح عشرين بالمئة لزر CTA كحلي كحليًا بدل أن يغسل نحو الرمادي أو السماوي. يستكشف مراجعو الوصولية مرافقين أفتح لألوان النص أو الأيقونة مع خلفيات داكنة، ثم يسلّمون المرشحين لمدقق تباين بدل تخمين الدرجات الوسطى بالعين. تنتج فرق التسويق عينات باستيل للحملات من شعارات مشبعة لافتات التواصل ورؤوس البريد مع الحفاظ على هوية درجة العلامة.
يبرمج مهندسو الواجهة الأمامية منحدرات الظل في التكامل المستمر ليُنتج لون علامة واحد سلمًا موثقًا من خطوات أفتح للرسوم والرقائق والأزرار الثانوية. إن احتجت لاحقًا إلى تعتيم لون أو تحويل HSL إلى RGB أو بناء لوحة مماثلة أو فحص تباين WCAG، فاعاملها كنيات بحث وصفحات هبوط منفصلة بدل إثقال صفحة التفتيح هذه.
حالات الاستخدام
درجات تمرير ونشط لواجهة المستخدم
اشتق خلفيات تمرير أفتح من رموز hex للعلامة مع ثبات الدرجة والتشبع لحالات مكوّن متسقة.
منحدرات ظل برموز التصميم
ولّد خطوات باستيل وسطح ناعم من لون أساس للسمات ومتغيرات CSS وأنظمة متعددة العلامات.
باستيل تسويقي من الشعارات
أنتج عينات أفتح جاهزة للحملة من ألوان شعار مشبعة للافتات والشرائح والإبداعات على وسائل التواصل.
الأسئلة الشائعة
كيف يغيّر مُفتِّح اللون هذا رمز hex الخاص بي؟
يحوّل hex إلى HSL، ويرفع الإضاءة بـ L' = L + (100 − L) × (amount / 100)، ويبقي الدرجة والتشبع ثابتين، ثم يعيد التحويل إلى hex وRGB.
ما نطاق المقدار المسموح؟
يجب أن يكون amount عددًا محدودًا من 0 إلى 100 شاملين.
ماذا يحدث عند 0% و100%؟
0% يترك اللون دون تغيير. 100% ينتج أبيض نقيًا (إضاءة 100) مع الإبلاغ عن الدرجة والتشبع الثابتين من اللون الأصلي.
ما تنسيقات hex المقبولة؟
hex CSS بثلاثة وستة أرقام، مع أو بدون علامة تجزئة بادئة. تُرفض أشكال الألفا (#rgba / #rrggbbaa) والأحرف غير hex.
هل التفتيح هو نفسه خلط اللون بالأبيض؟
لا. ترتفع الإضاءة وحدها بينما تبقى الصبغة والتشبع كما هما، لذلك يصبح #3366cc عند 20% اللون #5c85d6 ويظل أزرق حيويًا بدل أن يبهت.
أدوات ذات صلة
للمطوّرين — الوصول عبر API
كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.
الـEndpoint
صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.
استدعِ الخدمة من بيئتك
curl -X POST https://api.kit.forhosting.com/color/lighten \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3366cc","amount":20}'const res = await fetch("https://api.kit.forhosting.com/color/lighten", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3366cc",
"amount": 20
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/lighten",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3366cc",
"amount": 20
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/lighten", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3366cc","amount":20}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3366cc","amount":20}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/lighten", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)مثال على الطلب
{
"color": "#3366cc",
"amount": 20
}مثال على الاستجابة
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.lighten",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.
الأسعار
السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.
الأخطاء
| HTTP | الرمز | المعنى |
|---|---|---|
401 | unauthorized | مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك. |
402 | insufficient_balance | رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة. |
404 | unknown_type | نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب. |
429 | rate_limited | تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة. |
ملاحظات تقنية
بلا استدعاءات شبكة ولا بذور عشوائية ولا انحراف نموذج — اللون والمقدار المتطابقان ينتجان دائمًا نفس JSON.
ما الذي ترسله وما الذي تستقبله
يقبل color أيضًا الاسمين البديلين hex وbase؛ ويقبل amount الاسمين percent وpct. الحقول الناقصة والأحرف غير hex والأطوال الخاطئة وNaN وInfinity والمقادير خارج الفترة المغلقة تفشل بـ invalid_input ولا تُحصَّل. تتضمن كل عينة role وhex وأعداد r g b الصحيحة وأرقام الدرجة والتشبع والإضاءة وسلاسل rgb وhsl القابلة للطباعة. hex على المستوى الأعلى هو اللون المُفتَّح لعملاء السطر الواحد؛ وlightness_before وlightness_after تجعل خطوة النسبة قابلة للتدقيق دون إعادة اشتقاق HSL. تسعير استدعاءات API الناجحة هو الأساس المنشور $0.002 لكل عنصر؛ وفشل التحقق لا يستهلك الرصيد المدفوع مسبقًا.
أين يظهر مُفتِّحو الألوان في العمل الفعلي
تولّد مسارات رموز التصميم درجات خلفية ناعمة من hex أساس واحد وتخزّن الـ hex المشتق في JSON أو متغيرات CSS لأسطح الوضع الفاتح. لأن هذه القدرة محرك تحليل نقي، تسعير API هو الأساس المنشور $0.002 لكل عنصر ناجح والتحقق الفاشل لا يستهلك الرصيد.
أسئلة تقنية
كم التكلفة؟
أداة المتصفح مجانية وتعمل محليًا. طلبات API تستخدم رصيد KIT المدفوع مسبقًا بسعر $0.002 لكل عنصر ناجح؛ والمدخل غير الصالح لا يُحصَّل.