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

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

اكتب قيمة في أي حقل من الثلاثة وستتحدّث البقية فوراً. استخدم مربع اختيار اللون لالتقاط أي لون من شاشتك، أو لون عشوائي للإلهام السريع.

أمثلة مرجعية

#10B981 → rgb(16, 185, 129)   → hsl(160, 84%, 39%)
#3B82F6 → rgb(59, 130, 246)    → hsl(217, 91%, 60%)
#FF0000 → rgb(255, 0, 0)       → hsl(0, 100%, 50%)
#000000 → rgb(0, 0, 0)          → hsl(0, 0%, 0%)
#abc    → rgb(170, 187, 204)   ← صيغة مختصرة

HEX أم RGB أم HSL؟

• HEX — الصيغة الأشهر في ملفات CSS وأسماء الألوان.
• RGB — في Canvas و WebGL و Three.js، وهو ما تحتاجه عند العمل بالبكسل مباشرة.
• HSL — في تصميم الواجهات. قارن hsl(210, 80%, 50%) وhsl(210, 40%, 50%) لتعرف أنهما نفس اللون بدرجتي إضاءة مختلفتين — وهو استنتاج مستحيل عملياً في RGB.

لماذا التحويل غير دقيق أحياناً؟

الصيغة HSL بأعداد صحيحة (مثل 160, 84%, 39%) لا تستطيع تمثيل كل ألوان RGB بدقة تامة، فقد يختلف الناتج حتى 3 وحدات من 255. الأداة تحتفظ بقيمة عشرية كاملة داخلياً، لذا التحويل من RGB إلى HEX يبقى سليماً تماماً.

نِسب التباين (WCAG)

تقيس النسبة بين سطوع اللون وسطوع النص أو الخلفية. القاعدة في معيار WCAG:

• 7:1 أو أعلى — المستوى AAA.
• 4.5:1 — الحد الأدنى AA للنص العادي.
• 3:1 — مقبول للنص الكبير (18pt فأكثر) أو العناصر الرسومية.

الحد النظري الأقصى هو 21:1 بين الأسود والأبيض، وهو ما تعرضه الأداة بدقة.

صيغ متقدمة في CSS

• rgba(16, 185, 129, 0.5) — مع شفافية 50%.
• hsla(160, 84%, 39%, 0.5) — نفس الشيء بصيغة HSL.
• color-mix(in oklch, #10B981 50%, white) — مزج بألوان متساوية الإدراك البصري.