مولّد لوحات الألوان

أعطه لونًا أساسيًا فيدوّر درجة اللون على العجلة ليبني ست لوحات. انقر لونًا لنسخ كود HEX، أو انسخ اللوحة كاملة كمتغيّرات CSS.

طريقة الاستخدام

  1. حدّد اللون الأساسي بكود HEX أو rgb() أو hsl() أو بمنتقي الألوان.
  2. استعرض اللوحات الست: متكامل، متجاور، ثلاثي وغيرها.
  3. انقر لونًا لنسخ HEX، أو انسخ اللوحة كمتغيّرات CSS.

تدوّر اللوحات درجة اللون في HSL فقط وتحفظ التشبع والإضاءة كما في لونك، فالمُدخل الباستيلي يعطي لوحات باستيلية والمشبع يعطي لوحات مشبعة.

الرقم على كل لون هو نسبة التضاد وفق WCAG مع لون النص المعروض. النص الأساسي يحتاج 4.5:1 والعناوين الكبيرة 3:1.

الأسئلة الشائعة

كيف يُختار اللون المتكامل؟

يقع على 180° من عجلة الألوان. تضاده الأقوى، فيصلح للتمييز لكنه مُتعِب على المساحات الواسعة — نحو 10 إلى 20% من المساحة مناسب.

أي لوحة أستخدم؟

المتجاور والأحادي آمنان للخلفيات والبطاقات، والمتكامل أو المتكامل المنفصل يناسب ما يجب أن يبرز: الأزرار والشارات والتنبيهات.

ماذا ينسخ زر CSS؟

قائمة متغيّرات باسم اللوحة مثل `--triadic-1: #3366CC;` جاهزة للّصق داخل `:root`.

هل يُرسل لوني إلى أي مكان؟

لا. كل تحويل وكل لوحة تُحسب داخل المتصفح.

أدوات ذات صلة