حزمة رموز ألوان العلامة — مقياس HEX HSL OKLCH
ابنِ حزمة رموز ألوان العلامة من لون أساس واحد في المتصفح. الخطوات: اختر الأساس (HEX أو منتقي الألوان)، اعرض HEX/RGB/HSL/OKLCH، أنشئ مقياس 50–950 مع أزواج نص أسود/أبيض لكل درجة، ثم انسخ متغيرات CSS أو JSON. يُحمَّل عند الفتح اللون الأزرق النموذجي #2563eb — لا يُرفع أي شيء.
كيف يعمل
أدخل أو اختر لونًا أساسيًا للعلامة. تعرض الصفحة HEX وRGB وHSL وOKLCH، ثم تبني مقياسًا من 11 درجة (50–950) مع معاينة واجهة. كل عينة توصي بنص أسود أو أبيض ونسبة تباين. انسخ متغيرات CSS أو JSON عندما يناسبك المقياس — كل المعالجة محلية.
قواعد يجب أن تعرفها
ما يمكن توقعه من المقياس ومساحات اللون وتلميحات التباين والخصوصية.
- الدرجة 500 هي أساسك. ما دونها يُفتح بالمزج مع الأبيض؛ وما فوقها يُغمق بالمزج مع الأسود (مزج خطي في sRGB).
- يعرض قسم الأساس HEX وRGB وHSL وOKLCH لنفس اللون. OKLCH يستخدم تحويل sRGB → خطي → OKLab لمقارنته بصيغة CSS الحديثة.
- كل عينة توصي بنص أسود أو أبيض — أيهما أعلى تباينًا على ذلك الخلفية. النسب تتبع السطوع النسبي WCAG؛ تسميات AA إرشادية فقط.
- الخصوصية: الإنشاء والمعاينة والنسخ محليًا في هذا التبويب — لا رفع لألوان العلامة.
مثال
حمّل النموذج (#2563EB). يعرض قسم المساحات HEX وRGB وHSL وOKLCH للأساس؛ وتُظهر الشبكة 50–950 مع نص أسود أو أبيض موصى به ونسبة تباين. نسخ CSS يعطي :root { --color-50: …; … --color-950: …; } جاهزًا لورقة الأنماط.
متى يناسب
- أنظمة التصميم: ابدأ من HEX علامة واحد وأخرج مقياس 50–950 متسقًا مع متغيرات CSS للمكوّنات.
- الوضع الداكن: راجع درجات فاتحة (50–300) للأسطح ودرجات عميقة (700–950) لقرارات النص على اللون.
- التسليم للمطور: انسخ رموز JSON أو خصائص CSS بدل إعادة كتابة HEX من لقطة شاشة.
Frequently asked questions
هل يغادر لوني المتصفح؟
لا. حساب الألوان والتصدير يتم بالكامل في هذا التبويب — لا تُرسل ألوانك إلى خادم.
كيف يُبنى مقياس 50–950؟
الدرجة 500 تطابق لونك الأساسي. الدرجات الأفتح (50–400) تمزج مع الأبيض؛ والأغمق (600–950) مع الأسود. المزج خطي في sRGB للحفاظ على ثبات اللون.
ماذا تعني أعمدة التباين؟
كل عينة تقارن النص الأسود والأبيض على ذلك الخلفية وتختار الأعلى تباين WCAG. تُظهر التسميات النسبة وما إذا كان النص العادي يلبي AA (4.5:1) أو AA للنص الكبير (3:1).
ماذا يتضمن نسخ CSS وJSON؟
نسخ CSS يُخرج خصائص :root (--color-50 إلى --color-950). نسخ JSON يقدم نفس المقياس مع مساحات الأساس كبيانات منظمة لرموز التصميم.
متى أستخدم فاحص التباين؟
هذه اقتراحات سريعة أسود/أبيض لكل درجة. لأزواج مخصصة أو مستويات WCAG دقيقة، افتح فاحص تباين WCAG والصق HEX أي عينة.
Related tools
استفسارات أو ملاحظات
هل هناك غموض أو خلل أو نقص؟ اكتب رسالة أدناه — نقرأ كل ملاحظة عن هذه الأدوات.