🎨

أدوات التصميم

ألوان، خطوط، تدرجات، أنماط، QR وجرافيك

91 أداة

رموز QR متقدمة 8

مولّد رمز QR + ماسح

إنشاء QR codes مع تخصيص كامل + مسح وتحقق من QR

قارئ رمز QR

قراءة رموز QR من الصور أو الكاميرا

QR مخصص مع لوجو

إنشاء QR code بألوان مخصصة مع لوجو اختياري

إنشاء QR لمشاركة شبكة WiFi بسرعة

بطاقة تواصل QR

إنشاء QR لبطاقة جهة اتصال

QR حدث في التقويم

إنشاء QR code لإضافة حدث للتقويم

QR SMS / بريد / هاتف

إنشاء QR للرسائل والبريد وأرقام الهاتف

QR موقع GPS

إنشاء QR code لإحداثيات GPS

الباركود والرموز 10

مولّد باركود

CODE128 · EAN · UPC · ITF · Code39 مع تخصيص كامل

قراءة باركود من صورة

قراءة الباركود من صورة باستخدام ZXing-js

باركود Aztec

إنشاء رمز Aztec ثنائي الأبعاد مع تخصيص

باركود PDF417

إنشاء PDF417 مع تحكم في الأعمدة والأمان

باركود ISBN/ISSN

تحقّق وإنشاء باركود الكتب والمجلات

مختصر الروابط

اختصر أي رابط مع تتبع النقرات والتخصيص وحماية بكلمة مرور

QR محفظة عملات رقمية

إنشاء QR لعنوان محفظة BTC/ETH/...

إنشاء QR للدفع (IBAN / PayPal)

باركود ملوّن 2D

تشفير بيانات في باركود ملوّن قابل للتخصيص

منشئ علامة NFC

بناء محتوى علامات NFC (NDEF نص/URL)

تحليل الألوان وانتقاؤها 6

منتقي ومحوّل الألوان

اختيار لون وتحويله بين HEX/RGB/HSL/HSV/CMYK

فاحص التباين

فحص تباين الألوان حسب معايير WCAG

محاكي عمى الألوان

محاكاة كيف يرى الأشخاص ذوو عمى الألوان الصور

أسماء الألوان

البحث عن أقرب اسم لأي لون

استخراج لوحة ألوان

استخراج ألوان مع تحكم بالعدد، الدقة، التصدير

خلط الألوان

خلط لونين بأي نسبة

توليد الألوان والتدرجات 6

مولّد لوحة الألوان الاحترافي

7 خوارزميات + قفل الألوان + WCAG + تصدير CSS/Tailwind/SCSS/JSON/PNG

مولّد التدرج الاحترافي

محرر نقاط التوقف + Linear/Radial/Conic + زاوية بصرية + 20 قالب + تصدير CSS/PNG

متدرّج متعدّد المحطات

بناء linear-gradient غني

مولّد التدرج الشبكي

إنشاء تدرجات شبكية جميلة بـ CSS

مولّد التدرجات الفاتحة والداكنة

تفتيح وتغميق اللون بخطوات متدرجة

لوحة Tailwind CSS

توليد لوحة ألوان Tailwind CSS من لون أساسي

أدوات CSS والتصميم 13

مولّد الظلال الاحترافي

ظلال متعددة + قوالب جاهزة + معاينة حية + وضع داخلي + نسخ CSS

مولّد border-radius

تصميم زوايا فردية

مولّد مثلث CSS

مثلثات بـ border tricks

مولّد فقاعة كلام

CSS فقاعة محادثة

مولّد سبينر تحميل

سبينرات CSS بدون JS

تأثير زجاجي Glassmorphism

CSS glassmorphism

تأثير Neumorphism

ظلال ناعمة بارزة/غائرة

Skeleton Loader

متحرك تحميل بسطر CSS

مولّد فلاتر SVG

feGaussianBlur / feColorMatrix...

مولّد متغيرات CSS

توليد متغيرات CSS من ألوان العلامة التجارية

مطابقة Pantone

أقرب لون Pantone (تقريبي)

استخراج ألوان العلامة

استخراج لوحة الألوان من شعار/صورة

مولّد حركة CSS

إنشاء @keyframes جاهزة

أنظمة التصميم 5

مولّد مقياس الخطوط (Type Scale)

أنشئ مقياس خطوط متناسقاً لمشروعك باستخدام نسب رياضية مثبتة

مولّد نظام التباعد

أنشئ نظام تباعد متناسق لمشروعك بقاعدة 4px أو 8px

مولّد نظام الشبكة (Grid)

صمّم نظام شبكة احترافياً لمشروعك مع الأعمدة والمسافات

مواصفات عناصر UI

احصل على مواصفات الأحجام والتباعد القياسية لعناصر واجهة المستخدم

حاسبة تباعد الأسطر

احسب التباعد المثالي بين الأسطر لكل حجم خط لضمان قراءة مريحة

ألوان التصميم المتقدمة 4

مولّد لوحة الألوان المتناسقة

أنشئ لوحة ألوان متناسقة من لونك الأساسي باستخدام نظريات التناسق اللوني

مولّد تدرجات اللون

أنشئ 10 تدرجات (فاتح وداكن) من لونك الأساسي لنظام ألوان متكامل

منشئ نظام ألوان الواجهة

أنشئ نظام ألوان متكاملاً للواجهة من لونك الأساسي مع ألوان الحالات المختلفة

فاحص تباين الألوان (WCAG)

تحقق من نسبة تباين لونَي النص والخلفية وتأكد من التوافق مع معايير إمكانية الوصول WCAG

أبعاد وأحجام التصميم 5

أبعاد صور السوشيال ميديا

احصل على أبعاد الصور المثالية لكل منصة سوشيال ميديا في 2025

مرجع أحجام الطباعة

احصل على الأبعاد الدقيقة لأحجام الطباعة الشائعة بالبكسل والسنتيمتر

مرجع أحجام الأيقونات

احصل على الأحجام القياسية للأيقونات في مختلف المنصات والسياقات

حاسبة نسب الأبعاد

احسب أبعاد الصور والفيديوهات بناءً على النسبة المطلوبة مع الحفاظ على النسبة

حاسبة تناسب الشعار

احسب النسب الصحيحة لعرض شعارك في مقاسات وسياقات مختلفة

أدوات تصميم متنوعة 4

حاسبة النسبة الذهبية

احسب النسبة الذهبية لأبعاد تصميمك لنتائج بصرية مُثلى

مرشد تناسق الخطوط

اختر ثنائية خطوط متناسقة احترافية لمشروعك مع أسباب التناسق

قائمة تدقيق الهوية البصرية

قيّم اكتمال هويتك البصرية وتعرّف على العناصر الناقصة

مخطط الثمبنيل الاحترافي

خطط تصميم ثمبنيل يوتيوب أو محتوى مقنع يزيد معدل النقر

أنظمة التصميم المتقدمة 8

حاسبة توقيت الانيميشن (CSS/Motion)

احسب توقيتات انيميشن CSS المثالية وقيم cubic-bezier لحركات سلسة واحترافية

مقيّم التباعد والفراغ البصري

قيّم التباعد في تصميمك وفق مبادئ التصميم الاحترافي وأنظمة التباعد

مرشد نقاط الكسر (Breakpoints) للتصميم

احصل على نقاط الكسر الصحيحة وكود CSS لأي نظام تصميم أو إطار عمل

مرشد نظام Z-Index للواجهات

أنشئ نظام z-index منظم لمشروعك لتجنب فوضى التراكب بين العناصر

مولّد نظام الظلال (Elevation System)

أنشئ نظام ظلال متناسقاً لمشروعك يعكس مستويات الارتفاع البصري

حاسبة أبعاد الشبكة الدقيقة

احسب عرض الأعمدة والمسافات بدقة لأي شبكة تصميمية

محدد كثافة واجهة المستخدم

اختر مستوى كثافة الواجهة المناسب لتطبيقك وانتقل بإرشادات الأبعاد الصحيحة

مولّد رموز التصميم (Design Tokens)

أنشئ مجموعة رموز تصميم متكاملة جاهزة للاستخدام في CSS وTailwind وFigma

الألوان والإمكانية 4

محاكي عمى الألوان للمصممين

اختبر كيف يرى أشخاص عمى الألوان تصميمك وتحقق من إمكانية الوصول

مقارنة أزواج الخطوط للمشاريع

قارن بين أزواج خطوط Google Fonts المُثبتة وشاهد معاينة حية لكل زوج

مرشد أسلوب الأيقونات

حدد أسلوب الأيقونات المناسب لمشروعك وتحقق من اتساقها عبر التطبيق

مرشد نسب الصور في التصميم

اختر نسبة أبعاد الصور المثالية لكل سياق في تصميمك مع أبعاد دقيقة

أدوات أخرى 18

اختيار لون عشوائي

احصل على لون عشوائي جميل مع رمز HEX وRGB وHSL

فاحص تباين الألوان WCAG

تحقق من نسبة تباين الألوان وفق معايير إمكانية الوصول WCAG 2.1

حاسبة نسبة العرض للارتفاع

احسب أبعاد الصور ومقاطع الفيديو مع الحفاظ على نسبة العرض للارتفاع

منشئ تدرجات CSS

أنشئ تدرجات CSS احترافية وانسخ الكود جاهزاً للاستخدام

منشئ ظلال CSS Box Shadow

أنشئ ظلالاً CSS احترافية مع معاينة مباشرة ونسخ الكود

دليل توافق الخطوط

اكتشف توليفات الخطوط المثالية لمشاريعك التصميمية

معرّف ألوان Hex والأسماء

أدخل كود Hex واحصل على اسم اللون وقيمه RGB وHSL

حاسبة DPI والدقة للطباعة

احسب دقة الطباعة المطلوبة لأبعاد معينة وتحقق من جودة صورك للطباعة

مولّد لوحات الألوان المتناسقة

أنشئ لوحات ألوان متناسقة بناءً على نظريات الألوان

حاسبة مقياس الخطوط

أنشئ مقياس خطوط متناسق لمشروعك التصميمي

محوّل الخطوط العربية للعرض

اعرض نصك بأنماط خطوط عربية مختلفة لاختيار الأنسب

مولّد الفن التجريدي بـ CSS

أنشئ أعمال فنية تجريدية عشوائية بلغة CSS

مولّد CSS Animations

أنشئ كود CSS لتأثيرات الحركة وانسخه جاهزاً للاستخدام

محلل ألوان العلامات التجارية الكبرى

تعرّف على الألوان المستخدمة في الشركات الكبرى ونظرية الألوان خلفها

منشئ Design Tokens للمشاريع

أنشئ نظام Design Tokens متسق لمشروعك التصميمي

محاكاة عمى الألوان

تحقق من ظهور ألوانك لأصحاب عمى الألوان المختلفة

محوّل DPI لحجم الصورة

احسب حجم الطباعة المثالي بناءً على أبعاد الصورة ودقتها

مولّد لوحة ألوان عشوائية

أنشئ لوحات ألوان عشوائية احترافية بنقرة واحدة