الألوان والتصميم
اختر الألوان وحوّلها وادمجها، وأنشئ شيفرة CSS لتصاميمك.
- أداة تقليص الخطوط (Font Subsetter) قلّص الخط إلى المحارف التي تحتاج إليها باستخدام HarfBuzz في متصفحك، واحصل على ملف TTF/OTF وWOFF أصغر ومعاينة وقاعدة @font-face مع unicode-range.
- استخراج لوحة ألوان من صورة استخرج لوحة ألوان من أي صورة: ارفع صورة واحصل على ألوانها السائدة برموز HEX مع نسبة كل لون منها، جاهزة للنسخ أو التصدير.
- التقاط الألوان من الصور ارفع صورة وانقر على أي بكسل لتحصل على لونه بصيغ HEX وRGB وHSL وHSV وCMYK، مع عدسة تكبير ومتوسط للعيّنات وقائمة بالألوان الملتقطة في متصفحك.
- حاسبة نسبة العرض إلى الارتفاع حاسبة نسبة العرض إلى الارتفاع لتبسيط أي أبعاد، وتغيير الحجم مع الحفاظ على التناسب، ومقارنة 16:9 و4:3 و21:9، ونسخ شيفرة CSS.
- ساحة تجارب Flexbox وGrid ابنِ تخطيطات flexbox وCSS grid بصريًا: اضبط خصائص الحاوية والعناصر، وسمِّ مناطق الشبكة، وشاهد النتيجة مباشرةً، وانسخ شيفرة CSS وHTML نظيفة.
- فاحص تباين الألوان فاحص تباين مجاني وفق WCAG: أدخل لون النص ولون الخلفية لتحصل على نسبة التباين ونتائج AA وAAA وأقرب لون يجتاز الاختبار.
- محاكي عمى الألوان محاكي عمى ألوان مجاني: اعرض أي صورة بعمى الأحمر أو الأخضر أو الأزرق أو أشكالها الأخف أو عمى الألوان الكلي، جنبًا إلى جنب أو بمنزلق.
- محرّر منحنيات cubic-bezier صمّم منحنيات التسارع في CSS بمحرّر cubic-bezier قابل للسحب، وقارنها بالحركة الخطية في معاينة حية، وانسخ cubic-bezier() أو نسخة linear().
- محوّل PX إلى REM حوّل px إلى rem وem بأي حجم لخط الجذر، وأنشئ جدول تحويل جماعيًا، وحوّل كل قيم px في مقطع CSS إلى rem بنقرة واحدة.
- محوّل الألوان حوّل أي لون بين HEX وRGB وHSL وHSV وHWB وCMYK وLAB وLCH وOKLCH. الصق الرمز، وشاهد اللون، وانسخ أي صيغة بنقرة واحدة.
- معاينة تنسيق الخطوط عاين أزواج الخطوط للعناوين والنصوص مع 20 خطًا مفتوح الترخيص، واضبط الحجم وارتفاع السطر، وانسخ مجموعات font-family في CSS.
- معرفة اسم اللون اعرف اسم أي لون: أدخل رمز HEX أو RGB لتحصل على أقرب 5 أسماء من بين أكثر من 30000 لون مسمّى، وعلى أقرب اسم لون في CSS.
- منتقي الألوان منتقي ألوان مجاني على الإنترنت: اختر أي لون وانسخ فورًا رموزه بصيغ HEX وRGB وHSL وHSV وCMYK، مع نسب تباينه على الأبيض والأسود.
- مولّد border-radius للزوايا المستديرة صمّم خاصية border-radius في CSS بصريًا بمقابض قابلة للسحب: اضبط كل زاوية بـ px أو %، واستخدم الصيغة الإهليلجية بثماني قيم، وانسخ الشيفرة.
- مولّد clip-path لأشكال CSS ارسم أشكال clip-path في CSS بنقاط قابلة للسحب: مضلّعات ودوائر وقطوع ناقصة ومستطيلات داخلية، مع أشكال جاهزة كالنجوم والأسهم، وانسخ الشيفرة.
- مولّد التدرّجات اللونية CSS أنشئ تدرّجات CSS خطية وشعاعية ومخروطية مع معاينة مباشرة: أضف نقاط الألوان واسحبها، واضبط الزاوية، وانسخ شيفرة CSS نظيفة بنقرة واحدة.
- مولّد الظل box-shadow في CSS صمّم ظلال box-shadow في CSS بطبقات متعددة مع معاينة مباشرة: الإزاحة والتمويه والانتشار واللون والعتامة وinset، مع أنماط نيومورفيزم جاهزة.
- مولّد درجات الألوان الفاتحة والداكنة أنشئ الدرجات الفاتحة والداكنة لأي لون بخطوات 5 أو 10 أو 20 أو 25 %، بالمزج في OKLCH أو sRGB، وصدّرها متغيرات CSS أو إعدادات Tailwind.
- مولّد لوحات الألوان أنشئ لوحات ألوان من لون أساسي واحد وفق قواعد التناسق اللوني: المتكامل والمتجاور والثلاثي والرباعي والمربع والأحادي اللون.