🎨 محوّل الألوان
الصق لونًا بأي صيغة، سواء كان #3B82F6 أو قيمة RGB أو HSL أو اسم لون بالإنجليزية، لتحصل على صيغه الأخرى كلها ونسب التباين لإمكانية الوصول ولوحة من درجاته الفاتحة والداكنة.
إجابة سريعة: اللون #3B82F6 يساوي بصيغة RGB القيم (59, 130, 246)، وبصيغة HSL (217°، 91%، 60%)، وبصيغة CMYK (76%، 47%، 0%، 4%). ونسبة تباينه 3.68:1 مع الأبيض (مستوى AA للنص الكبير فقط)، و5.71:1 مع الأسود (مستوى AA).
لم يُقيَّم بعد · آخر تحديث · مجانًا · دون تسجيل
مدخلات محوّل الألوان
النتيجة
اللون
#3B82F6
rgb(59, 130, 246)
| HEX | #3B82F6 |
| RGB | rgb(59, 130, 246) |
| HSL | hsl(217, 91%, 60%) |
| HSV / HSB | hsv(217, 76%, 96%) |
| CMYK | cmyk(76%, 47%, 0%, 4%) |
- التباين مع الأبيض
- 3.68:1 · AA للنص الكبير فقط
- التباين مع الأسود
- 5.71:1 · AA
- أفضل لون للنص
- أسود
الدرجات الفاتحة (ممزوجة بالأبيض)
| نسبة الأبيض | اللون | RGB | HSL |
|---|---|---|---|
| الأساس | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| 10% | #4F8FF7 | rgb(79, 143, 247) | hsl(217, 91%, 64%) |
| 20% | #629BF8 | rgb(98, 155, 248) | hsl(217, 91%, 68%) |
| 30% | #76A8F9 | rgb(118, 168, 249) | hsl(217, 92%, 72%) |
| 40% | #89B4FA | rgb(137, 180, 250) | hsl(217, 92%, 76%) |
| 50% | #9DC1FB | rgb(157, 193, 251) | hsl(217, 92%, 80%) |
| 60% | #B1CDFB | rgb(177, 205, 251) | hsl(217, 90%, 84%) |
| 70% | #C4DAFC | rgb(196, 218, 252) | hsl(216, 90%, 88%) |
| 80% | #D8E6FD | rgb(216, 230, 253) | hsl(217, 90%, 92%) |
| 90% | #EBF3FE | rgb(235, 243, 254) | hsl(215, 90%, 96%) |
الدرجات الداكنة (ممزوجة بالأسود)
| نسبة الأسود | اللون | RGB | HSL |
|---|---|---|---|
| الأساس | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| 10% | #3575DD | rgb(53, 117, 221) | hsl(217, 71%, 54%) |
| 20% | #2F68C5 | rgb(47, 104, 197) | hsl(217, 61%, 48%) |
| 30% | #295BAC | rgb(41, 91, 172) | hsl(217, 62%, 42%) |
| 40% | #234E94 | rgb(35, 78, 148) | hsl(217, 62%, 36%) |
| 50% | #1E417B | rgb(30, 65, 123) | hsl(217, 61%, 30%) |
| 60% | #183462 | rgb(24, 52, 98) | hsl(217, 61%, 24%) |
| 70% | #12274A | rgb(18, 39, 74) | hsl(218, 61%, 18%) |
| 80% | #0C1A31 | rgb(12, 26, 49) | hsl(217, 61%, 12%) |
| 90% | #060D19 | rgb(6, 13, 25) | hsl(218, 61%, 6%) |
متطلبات التباين في WCAG
| المستوى | النص العادي | النص الكبير (18 نقطة فأكثر، أو 14 نقطة عريض) | على الأبيض | على الأسود |
|---|---|---|---|---|
| AA | 4.5:1 | 3:1 | للنص الكبير فقط | مستوفٍ |
| AAA | 7:1 | 4.5:1 | غير مستوفٍ | للنص الكبير فقط |
كيف تستخدم محوّل الألوان
الصق لونًا بأي صيغة شائعة: #3B82F6 أو #38F أو rgb(59, 130, 246) أو hsl(217, 91%, 60%) أو hsv(217, 76%, 96%) أو cmyk(76%, 47%, 0%, 4%)، أو اسم لون أساسي بالإنجليزية مثل teal. وستحصل على كل الصيغ الأخرى وعيّنة من اللون ونسب التباين ولوحة بالدرجات الفاتحة والداكنة.
معادلات التحويل
HEX ← RGB: كل زوج من الخانات الست عشرية قناة واحدة، من 00 إلى FF = من 0 إلى 255
CMYK: K = 1 − الأكبر(R′، G′، B′) · C = (1 − R′ − K) ÷ (1 − K)، وبالمثل M وY (حيث R′ = R ÷ 255)
HSL: L = (الأكبر + الأصغر) ÷ 2 · S = (الأكبر − الأصغر) ÷ (1 − |2L − 1|) · وH من القناة الغالبة
التباين = (L1 + 0.05) ÷ (L2 + 0.05)، باستخدام الإضاءة النسبية وفق WCAG
مثال محلول
اللون #3B82F6 ينقسم إلى 3B و82 وF6، أي rgb(59, 130, 246). والأزرق أكبر القنوات (0.965)، لذا K = 3.5% وC = (1 − 0.231 − 0.035) ÷ 0.965 = 76%، فيكون cmyk(76%, 47%, 0%, 4%). وبصيغة HSL هو hsl(217, 91%, 60%). وإضاءته النسبية 0.236، فنسبة التباين 3.68:1 مع الأبيض و5.71:1 مع الأسود؛ لذا استخدم عليه نصًا أسود للخطوط الصغيرة.
ألوان شائعة
| اللون | HEX | RGB | HSL |
|---|---|---|---|
| أحمر | #FF0000 | 255, 0, 0 | 0°, 100%, 50% |
| أخضر | #008000 | 0, 128, 0 | 120°, 100%, 25% |
| أزرق | #0000FF | 0, 0, 255 | 240°, 100%, 50% |
| برتقالي | #FFA500 | 255, 165, 0 | 39°, 100%, 50% |
| أزرق مخضر (تيل) | #008080 | 0, 128, 128 | 180°, 100%, 25% |
| رمادي | #808080 | 128, 128, 128 | 0°, 0%, 50% |
نصائح
- قيم CMYK هنا تحويل بسيط مستقل عن الأجهزة؛ وللطباعة الاحترافية حوّل الألوان بملف تعريف الألوان الخاص بمطبعتك.
- افحص التباين لكل زوج من ألوان النص والخلفية في تصميمك، لا للون العلامة التجارية وحده.
الأسئلة الشائعة
كيف أحوّل HEX إلى RGB؟
قسّم الخانات الست إلى ثلاثة أزواج، وحوّل كل زوج من النظام الست عشري إلى العشري. فاللون #3B82F6 يعطي: 3B = 59، و82 = 130، وF6 = 246، أي RGB (59, 130, 246).
ما الفرق بين RGB وCMYK؟
نظام RGB يمزج الضوء الأحمر والأخضر والأزرق لعرض الألوان على الشاشات، أما CMYK فيمزج أحبار السماوي والأرجواني والأصفر والأسود للطباعة. والألوان الساطعة أو المشبعة جدًا على الشاشة قد يتعذر إنتاجها بالطباعة.
ما الفرق بين HSL وHSV؟
كلاهما يصف تدرج اللون بزاوية (0–360°) إضافة إلى التشبع. لكن الإضاءة في HSL تمتد من الأسود مرورًا باللون الصافي حتى الأبيض، بينما تمتد القيمة في HSV (وتُسمّى أيضًا السطوع) من الأسود حتى اللون الصافي.
ما نسبة التباين المطلوبة لنص يسهل الوصول إليه؟
يشترط المستوى AA في معايير WCAG 2 نسبة 4.5:1 للنص العادي و3:1 للنص الكبير (18 نقطة، أو 14 نقطة بخط عريض). ويشترط المستوى AAA نسبة 7:1 و4.5:1.
ما الدرجات الفاتحة والداكنة للون؟
الدرجة الفاتحة هي اللون ممزوجًا بالأبيض فيصبح أفتح، والدرجة الداكنة هي اللون ممزوجًا بالأسود فيصبح أغمق. وهي طريقة سريعة لبناء لوحة ألوان متناسقة انطلاقًا من لون العلامة التجارية.
قيّم محوّل الألوان
لا نعرض سوى متوسط التقييم. تصل بلاغات الأخطاء مباشرةً إلى بريدنا لنتحقق منها ونصححها. اطّلع على المنهجية و سياسة الخصوصية.