:root {
--color-100: #d0d9fb;
--color-200: #8aa0f4;
--color-300: #4466ee;
--color-400: #4466ee;
--color-500: #0f2da3;
--color-600: #0a1c67;
--color-700: #050f38;
}
يقوم مولد لوحة الألوان بتحويل لون أساسي واحد إلى مجموعة منسقة من الألوان باستخدام قواعد تناغم عجلة الألوان. اختر لون البداية واختر الوضع - الظلال والصبغات، أحادية اللون، أو تكميلية، أو مماثلة، أو ثلاثية، أو رباعية - وتقوم الأداة بحساب لوحة متوازنة بقيمة HEX وRGB وHSL لكل عينة.
مجموعات الألوان الجيدة تتبع العلاقات التي يمكن التنبؤ بها على عجلة ألوان HSL: تجلس الألوان التكميلية مع بعضها البعض ، والألوان المماثلة تجلس بجانب بعضها البعض ، والألوان الثلاثية متباعدة بشكل متساوٍ. إن العمل باليد يعني زوايا التدرج اللوني وقيم الخفة. تقوم هذه الأداة بالحسابات على الفور وتظهر النتيجة حتى تتمكن من اختيار مخطط يعمل.
كل شيء يعمل في متصفحك. اضبط اللون الأساسي ، أو أوضاع التبديل ، وانقر فوق أي حامل لنسخ قيمته ، أو تصدير اللوحة بأكملها كخصائص مخصصة لـ CSS. لا يوجد حساب ولا تحميلات ، ويستمر في العمل دون اتصال بمجرد تحميل الصفحة.
تأتي أوضاع التناغم من علاقات عجلة الألوان، وتدوير اللون بكميات ثابتة حول الدائرة: 180 درجة للتكامل، و120 للثلاثي، وخطوات صغيرة للتشابه. تتم الرياضيات بلغة HSL، وهي مريحة وغير موحدة إدراكيًا. تعامل خفة HSL اللونين الأصفر والأزرق بنفس قيمة الضوء المتساوي، وبالنسبة للعين ليسا كذلك، ولهذا السبب يمكن أن تبدو المجموعة الثلاثية متوازنة على الورق وغير متوازنة على الشاشة. تحقق من أي لوحة تخطط لاستخدامها للنص مقابل مدقق التباين بدلاً من الثقة في الأرقام. يتم إنتاج الظلال والصبغات عن طريق تحريك الخفة مع الاحتفاظ باللون والتشبع، مما يبقي الأسرة مرتبطة بشكل واضح وهو ما يجعلها مفيدة كمجموعة من متغيرات CSS.
استخدم منتقي الألوان أو اكتب قيمة سداسية لضبط اللون الذي تم تصميم لوحتك حوله.
التبديل بين الظلال والصبغات ، أحادية اللون ، تكميلية ، مماثلة ، ثلاثية ، ورباعية لرؤية مخططات منسقة مختلفة.
تعرض كل عينة قيمة HEX و RGB و HSL. انقر فوق عينة لنسخها أو نسخ اللوحة بالكامل كخصائص مخصصة لـ CSS.
استخدم الألوان التي تم إنشاؤها للخلفيات واللكنات والنص في التصميم أو ورقة الأنماط الخاصة بك ، مع الحفاظ على التناسق عبر واجهة المستخدم الخاصة بك.
الظلال والصبغات ، أحادية اللون ، تكميلية ، مماثلة ، ثلاثية ، و tetrical مخططات تغطي كل علاقة ألوان مشتركة
تعرض كل حامل تنسيقات الثلاثة جميعها، بحيث يمكنك إسقاط القيمة الصحيحة مباشرة في CSS أو أدوات التصميم أو التعليمات البرمجية
تصدير اللوحة بأكملها على النحو التالي: خصائص الجذر المخصصة ، جاهزة لللصق في ورقة الأنماط الخاصة بك كمقياس رمز للتصميم
يتم حساب التناغم في HSL بحيث تظل درجات التناغم متباعدة بشكل متساوٍ وتبدو الخطوات المضيئة متوازنة وليست موحلة
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
Convert color codes between HEX, RGB, HSL, HWB, and CMYK instantly
Pick colors and convert between HEX, RGB, and HSL formats
Generate tints, shades, and tones from any base color
0 comments
No comments yet. Be the first to share your thoughts!