تحويل الألوان
محوّل ألوان مجاني عبر الإنترنت يتعرف على HEX (3، 4، 6، 8 أرقام)، rgb()، hsl()، hwb()، lab()، lch()، oklab()، oklch()، صيغة CSS Color 4 الجديدة (مفصولة بمسافات)، جميع 147 لونًا مسمى CSS وأيًا منها مع ألفا. يُخرج كل صيغة دفعة واحدة، قابلة للنسخ بشكل فردي. لوحة مدمجة تولّد درجات داكنة وفاتحة وألوان مكمّلة ومتماثلة وثلاثية ورباعية. فاحص تباين WCAG يُظهر ما إذا كان اللون يحقق AA / AAA مقابل الأبيض والأسود للنص العادي والكبير. افتح قطّارة النظام (Chrome / Edge) لاختيار أي لون على الشاشة.
كيفية الاستخدام
أي صيغة: HEX، RGB، HSL، OKLCH، حتى أسماء CSS مثل tomato.
تظهر كل إحدى عشرة دفعة واحدة، انسخها بنقرة واحدة.
درجات، تدرجات وتناغمات مشتقة من لونك.
تباين WCAG مقابل الأبيض والأسود مع حكم AA/AAA.
تحويل بين 11 صيغة لون، بناء لوحات، فحص تباين WCAG — في مكان واحد
كل الصيغ
التباين (WCAG)
اللوحة
الأحدث
المميزات
الاستخدامات النموذجية
- البحث عن OKLCH للون HEX علامة تجارية لنظام تصميم CSS Color 4.
- تحويل قيم بكسل RGB من لقطة شاشة إلى HSL لمحور رسم بياني.
- إيجاد لون مكمّل لحالة hover للزر.
- فحص ما إذا كان نص الجسم يحقق WCAG AA مقابل خلفية مختارة.
- اختيار لون من علامة تبويب أو نافذة أخرى عبر قطّارة النظام.
لماذا هذا
كثير من المحولات تفعل HEX↔RGB↔HSL فقط. نضمّن OKLab و OKLCH — الفضاءات الجديدة CSS Color 4 التي تطابق الإدراك البشري بشكل أفضل بكثير من HSL (لا قفزات مفاجئة في الإضاءة عند تغيير الصبغة). يجري توليد اللوحة في OKLab بحيث تبدو الخطوات متساوية إدراكيًا، لا حسابيًا. يُحسب التباين في فضاء WCAG 2 luminance مع توضيح عتبات 4.5:1 و 3:1.
الأسئلة الشائعة
ما هو OKLCH؟
فضاء ألوان متجانس إدراكيًا قُدّم كجزء من CSS Color 4. على عكس HSL — حيث الإضاءة 50٪ قد تبدو مختلفة جدًا عند صبغات مختلفة — إضاءة OKLCH متسقة عبر الطيف، مما يجعل tokens التصميم قابلة للتنبؤ. إذا كنت تبني نظام تصميم حديثًا، يستحق OKLCH التعلم.
هل يتضمن لوني ألفا؟
نعم — أي من HEX ثماني الأرقام، rgba()، hsla()، أو صيغة مساحة بلاحقة ألفا (rgb(255 0 0 / 50%)) تُحلَّل وتنعكس في كل صيغة إخراج تدعم ألفا.
لماذا تبدو لوحة الدرجات "متدرّجة" بدلاً من ناعمة؟
الدرجات والتدرجات تُستوفى في OKLab ثم تُسقط إلى الفضاء المستهدف، لذا كل خطوة متساوية إدراكيًا — وهذا غالبًا ينتج نتائج أنعم بصريًا من تغيير إضاءة HSL الساذج، لكن الألوان الابتدائية الداكنة جدًا أو الفاتحة جدًا تُقصّ قرب نقاط النهاية.
CMYK — دقيق للطباعة؟
لا — مخرج CMYK تحويل سريع في فضاء الشاشة، وليس مدركًا لـ ICC. للطباعة، خذ CMYK الذي تراه هنا كنقطة بداية وتحقق في أدوات Adobe / Affinity مقابل ملف تعريف الطباعة الفعلي.
القطّارة لا تعمل — لماذا؟
EyeDropper API متاح فقط في متصفحات Chromium (Chrome، Edge، Brave) حاليًا. Firefox و Safari ستخفي الزر مع تلميح أداة إذا لم يكن مدعومًا.
هل أسماء HEX حساسة للحالة؟
لا، HEX هو hex (0-9، a-f أو A-F). نُصدر أحرفًا صغيرة افتراضيًا لمطابقة توصية CSS Color 4؛ يظل الإخراج صالحًا مهما كيف أعدت لصقه.
الموبايل؟
نعم. القطّارة غير متاحة على متصفحات الموبايل — استخدم منتقي الألوان الأصلي بدلاً منها.
يمكننا ذلك مجاناً! أرسل لنا رسالة قصيرة بفكرتك. إذا أردت مناقشة التفاصيل، اترك بريدك الإلكتروني وسنتواصل معك. يمكنك البقاء مجهولاً.
