منشئ لوحات الألوان
جديدأنشئ لوحات ألوان متكاملة ومتجاورة وثلاثية وأحادية اللون.
Tint & shade scales (50–900)
WCAG contrast check
Contrast ratio of each color against white and black. AA needs 4.5:1 for normal text, AAA needs 7:1.
| Color | vs White | vs Black | Best text |
|---|
Runs entirely in your browser. Nothing is uploaded.
أنشئ لوحة ألوان بخمس طرق مختلفة
يحلّ هذا مولّد لوحات الألوان محلّ مجموعة من الأدوات المنفصلة. اضغط على «توليد» للحصول على لوحة ألوان عشوائية، أو اختر تناسقاً لونياً انطلاقاً من لون أساسي، أو استخرج الألوان من صورة أو فوتوغرافيا، أو وسّع رمز hex واحد إلى مخطط كامل، أو حوّل اسم لون أو كلمة إلى لوحة قابلة للتكرار. اضبط العدد من 3 إلى 10 ألوان، قفّل الألوان التي تعجبك وأعد توليد البقية — بدون حساب وبدون مغادرة متصفحك.
انقر على أي نموذج لنسخ قيمته، وبدّل بين HEX وRGB وHSL، واسحب النماذج لإعادة ترتيبها. اضغط Space لتوليد لوحة جديدة فوراً — نفس سير العمل الذي جعل Coolors مشهوراً، متاح هنا بدون اشتراك.
استخراج الألوان من صورة أو رمز hex أو اسم
من صورة: أسقط صورة فوتوغرافية وسيحلّلها الأداة على لوحة HTML5 مخفية باستخدام خوارزمية القطع الوسيطي لاستخراج الألوان السائدة — مفيد لمطابقة لوحة ألوان مع صورة منتج أو صورة علامة تجارية أو لوحة مزاجية. تبقى الصورة على جهازك ولا تُرفع إلى أي خادم أبداً. يتقاضى Coolors من المشتركين في الخطة المدفوعة مقابل هذه الميزة؛ هنا هي مجانية.
من رمز hex: الصق لون العلامة التجارية واحتفظ به كنقطة ارتكاز بينما يبني المولّد ألواناً متماثلة ومتكاملة وظلالاً حوله. من اسم: اكتب أي كلمة وسيولّد تجزئة حتمية اللوحة، بحيث ينتج الاسم نفسه دائماً ألواناً متطابقة — بديل موثوق دون اتصال لمولّدات اللوحات القائمة على الذكاء الاصطناعي.
تناسقات لونية مبنية على نظرية الألوان الحقيقية
يطبّق وضع التناسق نظرية الألوان بتدوير درجة اللون حول عجلة الألوان. الألوان المتكاملة تقع على بُعد 180° لتباين حاد؛ الألوان المتماثلة تبقى ضمن ±30° لمظهر هادئ وموحّد؛ الثلاثية تستخدم ثلاث درجات بتباعد 120°؛ الرباعية تستخدم أربعاً بتباعد 90°؛ المتكاملة المنقسمة تخفّف التباين عند 150°/210°؛ وأحادية اللون تحتفظ بدرجة واحدة وتغيّر درجة السطوع في اللوحة.
تأتي كل لون مُولَّد أيضاً مع مقياس كامل من الفتحات والظلال من 50 إلى 900 — الدرجات الأفتح والأغمق اللازمة لحالات التمرير وألوان الحدود وخيارات الخلفية في نظام تصميم واجهة المستخدم الفعلي.
مقارنة UtiloKit بـ Coolors وAdobe Color وPaletton
Coolors هو أشهر أدوات اللوحات مع سير عمل رائع للقفل وإعادة التوليد ومجتمع استكشاف كبير. يضع Coolors Pro (4 دولار/شهر) استخراج الصور والتصدير المتقدم وتاريخ اللوحات خلف جدار الدفع. التصدير الأصلي إلى Tailwind غير متاح في الخطة المجانية. يؤدي Adobe Color دوراً جيداً في التحقق من إمكانية الوصول WCAG وتصور التناسق اللوني، لكن حفظ اللوحات يستلزم حساب Adobe مجاني.
Paletton قوي في نظرية الألوان لكنه يعرض أربعة أنواع فقط من التناسق ولا يتضمن استخراج الصور. يجمع UtiloKit نقاط القوة في الثلاثة — القفل بأسلوب Coolors، ولوحة WCAG من Adobe Color، واستخراج الصور، والتصدير إلى Tailwind/SCSS — بدون حساب أو اشتراك أو إعلانات في الأداة.
قفّل المفضلة وتابع التكرار
تنشأ اللوحات الجيدة من التكرار لا من توليد واحد. قفّل نموذجاً ويبقى في مكانه. يتغير كل ما هو غير مقفّل عند الضغط على «توليد» أو مفتاح المسافة. احتفظ باللون السائد الذي أعجبك، غيّر ألوان التمييز، وضيّق الخيارات حتى تجد مجموعة ناجحة — ثم انتقل مباشرة إلى التصدير.
يمكنك قفل ألوان متعددة في آن واحد. قفّل اللون الأساسي لعلامتك التجارية وخلفية محايدة، ثم دع الأداة تقترح ألوان تمييز. قفّل هذه الألوان حين تجد المناسب منها وأعد توليد درجات الدعم. هذا يحاكي طريقة عمل المصممين يدوياً، لكن بسرعة أكبر بكثير.
تصدير إلى CSS وTailwind وSCSS وJSON وPNG ورابط قابل للمشاركة
حين تكون اللوحة جاهزة، صدّرها بالتنسيق الذي يحتاجه مشروعك. CSS يعطي كتلة :root من الخصائص المخصصة. Tailwind يعطي كائن theme.extend.colors جاهزاً للصق في tailwind.config.js. SCSS يعطي إعلانات $متغيرات متوافقة مع Sass. JSON يسرد كل لون بقيم HEX وRGB وHSL لجافاسكريبت أو خطوط أنابيب رموز التصميم. نزّل ورقة نماذج بصيغة PNG لوثيقة العلامة التجارية أو العرض التقديمي. انسخ رابطاً قابلاً للمشاركة يشفّر اللوحة في عنوان URL ليفتح زميلك بالضبط ما تراه.
فحص تباين WCAG مدمج
لا تكتمل اللوحة حتى يكون النص عليها مقروءاً. تعرض لوحة التباين نسبة تباين WCAG لكل لون مقارنةً بالنص الأبيض والأسود، مع شارات الاجتياز/الرسوب لـ AA وAAA. يستلزم WCAG 2.1 AA نسبة 4.5:1 للنص العادي و3:1 للنص الكبير. يستلزم AAA 7:1 للنص العادي. تتخطى معظم أدوات اللوحات هذه الخطوة أو تضعها خلف مستوى مميز — هنا هي مدمجة وتعمل في الوقت الفعلي أثناء التوليد أو التعديل.
بدون تسجيل، بدون رفع ملفات، لا شيء يغادر متصفحك. كل عملية للوحة — التوليد العشوائي واستخراج الصور وحسابات التناسق وفحص التباين والتصدير — تعمل في جافاسكريبت المحلي. احفظ هذا مولّد لوحات الألوان المجاني في مفضّلتك لتصميم المواقع وهوية العلامة التجارية والرسوم التوضيحية وعروض الشرائح ولوحات الألوان الموسمية أو ألوان الزفاف.
Frequently asked questions
ما أفضل مولّد لوحات ألوان مجاني؟
أفضل مولّد هو الذي يؤدي كل ما تحتاجه بدون حساب أو اشتراك أو معالجة على الخادم. تُنشئ هذه الأداة لوحات بخمس طرق — عشوائي، وتناسقات عجلة الألوان، ومن صورة، ومن رمز hex، ومن اسم لون — وتتيح قفل الألوان وإعادة توليد البقية، وتتحقق من نسب تباين WCAG، وتصدّر إلى CSS وTailwind وSCSS وJSON وPNG. يمتلك Coolors سير عمل جيداً لكنه يتطلب حساباً مدفوعاً (4 دولار/شهر) لاستخراج الصور والتصدير المتقدم. يُؤدي Adobe Color التناسقات جيداً لكنه يستلزم تسجيل الدخول للحفظ. يجمع UtiloKit الاثنين ويعمل بالكامل دون اتصال بالإنترنت ودون حساب.
كيف أنشئ لوحة ألوان من الصفر؟
اختر نقطة بداية — أسقط صورة، اكتب رمز hex، أدخل اسم لون، اختر نوع تناسق، أو اضغط «توليد» (أو مفتاح المسافة) للحصول على مجموعة عشوائية. اضبط حجم اللوحة على 3–10 ألوان، قفّل النماذج التي تريد الاحتفاظ بها وأعد توليد البقية حتى تستقر اللوحة الكاملة. انقر على أي نموذج لنسخ قيمته بصيغة HEX أو RGB أو HSL، ثم صدّر المجموعة بأكملها إلى CSS أو Tailwind أو ورقة نماذج PNG.
كيف أولّد لوحة ألوان من صورة أو فوتوغرافيا؟
بدّل إلى وضع 'الصورة' وأسقط صورة فوتوغرافية (أو انقر لاختيار واحدة). ترسم الأداة الصورة على لوحة HTML5 مخفية وتُطبّق خوارزمية التكميم بالقطع الوسيطي لاستخراج الألوان الأكثر هيمنة وتمييزاً بصرياً. كل شيء يحدث محلياً باستخدام Canvas API — الصورة لا تلامس أي خادم. يتطلب Coolors اشتراكاً مدفوعاً لاستخراج الصور؛ هنا مجاني.
ما الفرق بين الألوان المتكاملة والمتماثلة والثلاثية؟
إنها علاقات تستند إلى الموضع في عجلة الألوان مقاساً بدرجات درجة اللون. الألوان المتكاملة تقع على بُعد 180° لأقصى تباين — الأزرق والبرتقالي، الأحمر والأخضر. الألوان المتماثلة هي جيران ضمن ±30° لمظهر هادئ ومتماسك. الألوان الثلاثية هي ثلاث درجات متباعدة بالتساوي 120° لمخطط متوازن وحيوي. يولّد وضع التناسق كل ذلك — بالإضافة إلى الرباعي والمتكامل المنقسم وأحادي اللون — من أي لون أساسي تختاره.
كم لوناً ينبغي أن تحتوي اللوحة؟
تستخدم معظم لوحات العمل 3 إلى 5 ألوان: لون سائد، ولونان داعمان، ولون تمييز. تقترح قاعدة 60-30-10 نسبة 60% سائداً و30% ثانوياً و10% تمييزاً في التصميم. لتصميم واجهات المستخدم، ولّد 5 ألواناً أساسية واستخدم مقاييس الفتحات والظلال لكل لون (درجات 50–900) لحالات التمرير والحدود والخلفيات.
كيف أصدّر لوحة إلى CSS أو Tailwind أو SCSS؟
استخدم أزرار التصدير بعد توليد لوحتك. 'CSS' ينسخ كتلة :root من الخصائص المخصصة جاهزة للصق في ورقة الأنماط. 'Tailwind' ينسخ كائن theme.extend.colors جاهزاً لـ tailwind.config.js. 'SCSS' ينسخ إعلانات $color-n المتغيرة. 'JSON' يصدّر كل لون كائناً بقيم HEX وRGB وHSL للاستخدام في جافاسكريبت أو خطوط أنابيب رموز التصميم.
هل يعمل مولّد لوحة الألوان على iPhone وAndroid؟
نعم — إنه متجاوب بالكامل ويعمل على Safari للـ iPhone وChrome للـ Android وجميع متصفحات الجوال الحديثة. نماذج الألوان وآلية القفل وأزرار التصدير جميعها مناسبة للمس مع مناطق نقر كبيرة. استخراج الصور من ألبوم الكاميرا يعمل على الجوال عبر منتقي الملفات. مفتاح المسافة للتوليد يمتلك أيضاً زر توليد منفصل لشاشات اللمس.
Related tools
عرض كل الأدوات
جديد ساحة تجربة CSS Grid
اضبط أعمدة الشبكة والفجوات والمحاذاة مع معاينة مباشرة وشيفرة CSS.
جديد منشئ تأثير الزجاج Glassmorphism
صمّم بطاقة زجاجية ضبابية وانسخ شيفرة CSS، مع معاينة مباشرة.
جديد منشئ ظلال النص CSS
اضبط ظل نص CSS مع معاينة مباشرة وانسخ الشيفرة.
جديد خالط الألوان
امزج لونين بأي نسبة وانسخ النتيجة أو أي خطوة بينهما.
جديد منتقي ألوان الصور
اختر أي لون من صورة واستخرج لوحة ألوانها السائدة بصيغ HEX وRGB وHSL.
جديد Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.