استوديو الألوان
اللوحات والتدرجات والعجلات وكل الطرق للعثور على اللون المثالي.
مولد لوحات ألوان بالذكاء الاصطناعي
صِف حالة مزاجية واحصل على لوحات ألوان مطابقة — مدعوم بشبكة عصبية حقيقية تعمل بالكامل في متصفحك. بدون خوادم، بدون انتظار، بياناتك لا تغادر جهازك.
ذكاء اصطناعي · عصبيدليل الأنماط بالذكاء الاصطناعي
صِف علامتك التجارية واحصل على نظام تصميم كامل — لوحة ألوان وثنائي خطوط ومقياس طباعة ومسافات وزوايا وظلال — تطابقه الشبكة العصبية وتجمعه في كتلة CSS جاهزة للنسخ.
ذكاء اصطناعي · نظام تصميممحول الألوان
قم بالتحويل بين HEX وRGB وHSL وCMYK وOKLCH مع التحويل الفوري ثنائي الاتجاه.
محول · جميع الأشكالتناغمات الألوان
أنشئ لوحات ألوان مكملة وثلاثية ومتشابهة ومكملة مقسمة من أي لون أساسي. انقر على أي عينة لنسخ رمزها السداسي.
اللون · النظريةتسمية الألوان بالذكاء الاصطناعي
أدخل أي قيمة لونية واعثر على أقرب الأسماء — ألوان CSS القياسية والألوان الصينية التقليدية والواغايرو اليابانية و12 ثقافة أخرى. يجد علم الألوان الإدراكي المطابقة الحقيقية، ويقترح نموذج الذكاء الاصطناعي موضوعات لوحات مرتبطة.
ذكاء اصطناعي · علم الألوانعجلة الألوان
عجلة الألوان التفاعلية لاستكشاف الأشكال والتشبعات وعلاقات الألوان. انقر لتحديد وقفل الألوان.
تفاعلية · مرئيةمولد التدرجات
صمم تدرجات خطية وشعاعية جميلة مع معاينة Canvas في الوقت الفعلي. انسخ كود CSS على الفور.
التدرج · تصدير CSSإعدادات التدرج المسبقة
تصفح وانسخ 15 إعدادًا مسبقًا رائعًا للتدرج.
إعدادات مسبقة · نقرة واحدةلوحة من الصورة
استخرج لوحات الألوان الجميلة من أي صورة باستخدام تقنية تكميم الألوان الذكية.
الاستخراج · ذكيمولد الألوان
أنشئ أنظمة ألوان متناغمة باستخدام الأوضاع أحادية اللون، والتكميلية، والمتماثلة، والثلاثية. معاينة في الوقت الحقيقي مع تصدير CSS.
اللون · تفاعليمولّد الدرجات والظلال
أنشئ سلسلة كاملة من الدرجات والظلال من أي لون — 20 خطوة مع تصدير HEX و SCSS.
الدرجات والظلال, سلم ألوانالتأثيرات والعمق
الظلال والزجاج ونصف القطر — التفاصيل الدقيقة التي تجعل واجهة المستخدم تبدو حقيقية.
صانع الأشكال العضوية
أنشئ أشكالًا عضوية ناعمة للخلفيات والصور الرمزية وفواصل الأقسام. توليد عشوائي بنقرة واحدة، وضبط الانحناء، ونسخ كود border-radius أو SVG.
CSS · عضويمولد الزوايا الدائرية
محرر نصف قطر الحدود المرئي مع معاينة في الوقت الفعلي. انسخ كود CSS مع التحكم الفردي في الزاوية.
CSS · محرر مرئيمولد الظلال
أداة إنشاء ظل الصندوق التفاعلية مع معاينة Canvas متعددة الطبقات في الوقت الفعلي ومخرجات CSS.
CSS · الطبقاتمولّد أزرار CSS
صمّم أزراراً جميلة في ثوانٍ — 6 أنماط وألوان مخصصة ونصف قطر وحشوة، مع CSS جاهز للنسخ.
مولّد أزرار, زر CSS, تصميم أزرارمولد فلاتر CSS
أنشئ تأثيرات بصرية مع CSS filter() — تمويه وسطوع وتباين وتدوير درجة اللون وسيبيا والمزيد. معاينة مباشرة على صورة نموذجية، وانسخ سلسلة الفلاتر كاملة فورًا.
CSS · مؤثرات الصورمولد الزجاجية
أنشئ بطاقات زجاجية مصنفرة مع ضبابية الخلفية والشفافية وحدود دقيقة. معاينة في الوقت الفعلي وCSS جاهز للنسخ.
UI · زجاج مصنفرمولّد النص المتدرج
أبرز النص بتعبئة متدرجة وحركة — اضبط الزاوية والألوان وانسخ CSS فوراً.
نص متدرجمولد ظل النص
صمم ظلال نصية متعددة الطبقات مع معاينة في الوقت الفعلي. اضبط الإزاحة والتمويه واللون والتعتيم — انسخ CSS فورًا.
CSS · الطباعةصندوق أدوات عملي
فحوصات وتحويلات وأنظمة تحافظ على تصميماتك قابلة للوصول ومتسقة.
مقتطفات CSS بالذكاء الاصطناعي
صِف التأثير الذي تريده — زر متوهج، مؤشر تحميل، بطاقة زجاجية — وستجد الشبكة العصبية مقتطف CSS المطابق. شاهده معروضًا مباشرة وانسخ الكود الجاهز.
ذكاء اصطناعي · مكتبة أكوادمحاكي عمى الألوان
محاكاة كيف تظهر الألوان للمستخدمين المصابين بعمى الألوان.
إمكانية الوصول · محاكاةمدقق التباين
تحقق من توافق WCAG AA/AAA فيما يتعلق بألوان النص والخلفية. احصل على تقييمات إمكانية الوصول الفورية.
إمكانية الوصول · AA/AAAمولد منحنيات بيزيه
صمم منحنيات تباطؤ CSS مخصصة مع معاينة مباشرة وحركة. اسحب نقاط التحكم، واختر من الإعدادات المسبقة، وانسخ دالة cubic-bezier() فورًا.
CSS · الحركةمحول PX إلى REM
حوّل البكسل إلى REM والعكس فورًا، مع حجم خط أساسي قابل للتعديل وجدول تحويل كامل. ضروري لـCSS قابل للوصول وقابل للتوسع.
CSS · الوحداتمولد تحويلات CSS
تصور وقم بإنشاء تحويلات CSS — التدوير والتكبير والترجمة والانحراف مع معاينة تفاعلية مباشرة. انسخ خاصية التحويل الكاملة فورًا.
CSS · الرسوم المتحركةنظام ألوان الواجهة
قم بإنشاء لوحات رمزية كاملة للتصميم من لون بذرة واحد. تصدير إلى Tailwind أو CSS أو SCSS.
رموز التصميم · الريح الخلفيةالتخطيط والشبكة
الشبكات والنسب — العمود الفقري الهيكلي لكل واجهة.
حاسبة نسبة العرض
احسب وقم بتحجيم أي نسبة عرض إلى ارتفاع — 16:9 و4:3 و1:1 و9:16 ومخصصة. غيّر الأبعاد مع الحفاظ على النسب، مع إعدادات مسبقة للدقات الشائعة.
أداة · النسبةمولد شبكة CSS
أنشئ تخطيطات CSS Grid بصريًا مع معاينة في الوقت الفعلي.
CSS · محرر بصريحاسبة النسبة الذهبية
احسب أبعاد النسبة الذهبية (1:1.618) للتخطيطات والطباعة والشعارات. احصل على القيم الذهبية الأكبر والأصغر فورًا، مع معاينة مرئية.
التخطيط · النسبةمولّد الموجات SVG
أنشئ فواصل موجية SVG ناعمة لموقعك — اضبط السعة والطول والطبقات وانسخ كود SVG.
موجة SVG, فاصل موجيمشغل الطباعة
إقران الخطوط والمقاييس — صوت تصميمك.
تنسيق الخطوط بالذكاء الاصطناعي
صِف مشروعك واحصل على توليفات احترافية من خطوط Google تنسّقها شبكة عصبية حقيقية تعمل في متصفحك. شاهدها معروضة مباشرة وانسخ كود CSS الجاهز.
ذكاء اصطناعي · خطوطحاسبة Clamp
أنشئ طباعة سائلة مع CSS clamp(). حدد الأحجام الدنيا والمفضلة والقصوى — احصل على صيغة clamp() المثالية ومعاينة مرئية للمقياس.
CSS · الطباعة السائلةاقتران الخطوط
اكتشف أزواج الخطوط المتناغمة للعناوين والنص الأساسي من المجموعات المنسقة.
الطباعة · أكثر من 300 خطمولد مقياس الطباعة
أنشئ مقياس طباعة معياري متناغم مع النسبة الذهبية والثالث الكبير ونسب كلاسيكية أخرى. عاين الأحجام بصريًا وانسخ CSS الكامل.
الطباعة · المقياس14 لغة
كل أداة، كل تسمية، كل دليل - مترجم بالكامل.
إمكانية الوصول أولاً
تتضمن كل لوحة درجات تباين WCAG. التصميم شامل من البداية.
تصدير صديق للتطوير
CSS، وTailwind، وSCSS، وJSON — انسخ التنسيق الذي يحتاجه مشروعك.