لا تحب الإعلانات؟ يذهب خالية من الإعلانات اليوم 

مُولد ورقة لونية

لونمطورصورة

إعلان · حذف؟

مدخل

عملية تلقائية

الألوان (واحدة في كل سطر)

الهكس (#abc، #aabbcc، #aabbccdd)، rgb()، rgba()، hsl()، hsla()، أو أسماء الألوان في CSS. السطور التي تبدأ بـ # متبوعة بمسافة (مثلاً # ملاحظة) تُعامل كملاحظات.

التصميم

العمود: 4

حجم العلامة (بالبيكسيل): 160

ارتفاع العلامة (بالبيكسيل): 120

المسافة (بالبيكسيل): 12

مسافة الورقة (بالبيكسيل): 24

نصف قطر الزاوية (بالبيكسيل): 8

خلفية الورقة

العلامات

إظهار علامة الهكس

إظهار اسم الألوان المطابق (عند التوافق)

لون العلامة

انتاج

جانب العميل

إعلان · حذف؟

مرشد

مُولد ورقة لونية

أدخل قائمة بألوان وانظرها فورًا كورقة مطبوعة للعينات مع علامات الهكس. اخلط أي صيغة لون CSS — الهكس القصيرة والطويلة، rgb()، rgba()، hsl()، hsla()، أو أسماء الألوان مثل tomato — ثم احفظ الورقة كصورة PNG عالية الدقة أو ملف SVG قابل للتوسيع للاستخدام في اليد أو الطباعة أو وثائق نظام التصميم.

كيفية استخدام

أدخل لونًا في كل سطر في الألوان المساحة النصية، أو انقر اختر مثالًا لتحميل لوحة مبدئية.
تعديل أعمدة, حجم العلامة, المسافةو، و مسافة الورقة لتناسب التصميم الذي تحتاجه.
اختر لون خلفية الورقة وقم بتحديد ما إذا كان يجب عرض علامات الهكس أو أسماء الألوان المطابقة على كل علامة.
اختر طريقة تلوين العلامات — تلقائي تستخدم تباينًا مع كل علامة، أو تفرض مُظلم دائمًا أو أبيض دائمًا.
انقر تنزيل PNG لإعادة التصدير بحجم 2x، أو تنزيل SVG لملف متجه يمكنك فتحه في Figma أو Illustrator أو أي متصفح.

خصائص

مدخلات متعددة التنسيق — تقبل الهكس (#abc، #aabbcc، #aabbccdd)، rgb()، rgba()، hsl()، hsla()، وأسماء الألوان في CSS في نفس القائمة.
معاينة SVG المُباشرة — تُعيد بناء الورقة أثناء الكتابة، لذا تُصبح تغييرات التصميم فورية.
مصفوفة قابلة للتعديل — قم بضبط عدد الأعمدة، وعرض العلامة وارتفاعها، المسافة، المساحة المُضافة، ونصف قطر الزاوية.
أسماء علامات ذكية — عرض كود الهكس، اكتشاف أسماء الألوان المطابقة تلقائيًا، وتحديد ألوان العلامات بحسب التباين أو التثبيت.
الألوان الشفافة — تُعرض العلامات ذات الشفافية فوق نمط مربعات بحيث يصبح التأثير على الشفافية واضحًا في المخرجات.
أثناء صيغة التصدير — صورة PNG عالية الدقة من خلال Canvas، بالإضافة إلى ملف SVG قابل للنسخ للاستخدام المتجه.
بالكامل من جانب العميل — الألوان لا تغادر المتصفح، لذا فهي آمنة للاستخدام مع مجموعات العلامات غير المُعلنة.

 التعليمات

ما هو كود اللون بالهكس ولماذا يكون هناك أحيانًا 8 أرقام؟

يستخدم كود اللون بالهكس ثلاث أزواج من الأرقام الهدية لتمثيل قناة الأحمر، الأخضر، والزرقة في لون sRGB (مثلاً #FF5733). تتراوح كل زوج من 00 إلى FF، أي 0 إلى 255 بالعشرية. زوج اختياري يُستخدم لتمثيل الشفافية (الشفافية) من 00 (مُشفّى بالكامل) إلى FF (مُكتمل الشفافية)، مما يُعطي الشكل المكون من 8 أرقام #RRGGBBAA المستخدم في CSS الحديث.
كيف يتم حساب التباين بين العلامة وعند عرضها؟

تستخدم معظم معايير التباين صيغة اللمعان المُعَدّة من قبل WCAG، والتي تحول كل قناة sRGB إلى قيمة خطية، ثم تُوزعها كـ 0.2126R + 0.7152G + 0.0722B. تُقرأ الألوان المُظلمة بشكل أفضل مع نص سوداء، والألوان الساطعة تُقرأ بشكل أفضل مع نص أبيض. هذا هو نفس الحساب المستخدم في نسبة التباين المُحددة من قبل WCAG للاختبارات المتعلقة بالوصول.
لماذا يفضل المصممون SVG على PNG للعينات اللونية؟

تُخزن العينات في SVG كأشكال متجهة ونص، وليس كمصفوفة ثابتة من البكسلات، لذا تبقى الورقة واضحة في أي حجم، وتُطبّق بوضوح عند الطباعة بجودة عالية، وتبقى قابلة للتعديل في أدوات التصميم مثل Figma أو Illustrator. يظل PNG مفيدًا عندما تحتاج إلى صورة متجانسة من أجل العروض أو الشاشات أو مشاركة سريعة حيث لا يمكن افتراض دعم الملفات المتجهة.
ما الفرق بين قيم الهكس في sRGB وقيمة RGB التي ترى في الكود؟

القيم مثل #FF5733 وقيمة rgb(255, 87, 51) تصف نفس المجموعة المكونة من sRGB — الهكس هو مجرد تمثيل مختصر بالأساس 16. تشير كلا القيمتين إلى المجموعة المعيارية sRGB المستخدمة على الويب. تُستخدم صيغ أعمق مثل display-p3 أو oklch لتمثيل ألوان خارج هذه المجموعة، ولا يمكن تبادلها مع نفس الأرقام في sRGB.