منتقي ومحول الألوان السداسي (RGB وHSL وHSV وCMYK وOKLCH)

حوّل أي لون إلى HEX وRGB وHSL وHSV وCMYK وOKLCH، وتحقق من التباين، وانسخ عينات الوئام، وصدّر CSS أو JSON—مباشرة في متصفحك.

مطلوب جافا سكريبت للميزات التفاعلية. يرجى تمكين JavaScript في متصفحك لاستخدام هذه الأداة.

قيمة اللون

أدخل hex (#RGB أو #RRGGBB أو #RRGGBBAA) أو rgb()/rgba() أو hsl()/hsla() أو hsv() أو cmyk() أو oklch() أو اسم لون CSS. القيم غير الصالحة تحافظ على آخر تحويل صحيح.

أقرب اسم CSS: royalblue

الشفافية100%

التحويلات

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

CMYKcmyk(76%, 47.2%, 0%, 3.5%)

OKLCHoklch(0.623 0.188 259.815)

تباين WCAG

على خلفية بيضاء

3.68:1

يستوفي WCAG AA (نص كبير فقط)

على خلفية سوداء

5.71:1

يستوفي WCAG AA (نص عادي)

عينات الوئام

نوع الوئام

عدد العينات

شريط الصبغة/الظل

خطوات الصبغة/الظل

تصدير العينات

CSS

:root {
  --color-base: #3B82F6;
  --color-analogous-1: #3BF6AF;
  --color-analogous-2: #3BDFF6;
  --color-analogous-3: #3B82F6;
  --color-analogous-4: #513BF6;
  --color-analogous-5: #AF3BF6;
  --color-tint-shade-1: #000000;
  --color-tint-shade-2: #0A162B;
  --color-tint-shade-3: #142D55;
  --color-tint-shade-4: #1F4380;
  --color-tint-shade-5: #295AAA;
  --color-tint-shade-6: #3370D5;
  --color-tint-shade-7: #3D87FF;
}

JSON

{
  "baseHex": "#3B82F6",
  "alpha": 1,
  "namedColor": "royalblue",
  "harmony": "analogous",
  "harmonyCount": 5,
  "harmonySwatches": [
    "#3BF6AF",
    "#3BDFF6",
    "#3B82F6",
    "#513BF6",
    "#AF3BF6"
  ],
  "tintShadeStrip": [
    "#000000",
    "#0A162B",
    "#142D55",
    "#1F4380",
    "#295AAA",
    "#3370D5",
    "#3D87FF"
  ],
  "stripCount": 7,
  "contrast": {
    "onWhite": 3.68,
    "onBlack": 5.71
  }
}

اختر أو الصق أي تنسيق لون، وحوّل إلى HEX وRGB وHSL وHSV وCMYK وOKLCH، وتحقق من تباين WCAG، وأنشئ عينات وئام، وانسخ القيم، وصدّر CSS أو JSON. مجاني وسريع ويعمل بالكامل في متصفحك.

كيفية استخدام منتقي الألوان هذا

اكتب أو الصق أي تنسيق لون مدعوم، أو اضبط الشفافية، أو استخدم المنتقي الأصلي. تحوّل الصفحة فورًا إلى HEX وRGB وHSL وHSV وCMYK وOKLCH، وتعرض تباين WCAG على الأبيض والأسود، وتُنشئ عينات وئام وشريط صبغة/ظل، وتبقي كل شيء جاهزًا للنسخ. شارك إعدادك عبر الرابط—الحالة مخزّنة في سلسلة الاستعلام.

مرجع HEX وRGB وHSL وHSV وCMYK وOKLCH

Hex هو ترميز RGB مدمج. يصف RGB القنوات الحمراء/الخضراء/الزرقاء. يعبر HSL عن اللون والتشبع والخفة؛ يستخدم HSV اللون والتشبع والقيمة (السطوع). يمثل CMYK نسب حبر الطباعة. OKLCH هو فضاء ألوان CSS منتظم إدراكيًا. تستخدم هذه الأداة حسابات حتمية في متصفحك—بدون رفع ملفات ولا واجهات برمجة خارجية.

تكميلية، مماثلة، ثلاثية، تكميلية منقسمة، رباعية وأحادية اللون

التكميلية تدور اللون 180°. المماثلة تخطو اللون بزاوية ثابتة حول الأساس. الثلاثية تستخدم إزاحات 120°. التكميلية المنقسمة تضيف لونين قريبين من المكمل. الرباعية تستخدم إزاحات مستطيلة 90°. الأحادية اللون تحافظ على اللون وتغيّر الخفة. تُطبَّق ضوابط العد على الأوضاع المماثلة والأحادية اللون.

متغيرات CSS وتصدير JSON

يُنتج التصدير خصائص :root مخصصة بأسماء ثابتة (مثل --color-base و--color-analogous-1) وJSON يتضمن baseHex وalpha وnamedColor ووضع الوئام ونسب التباين وقوائم العينات للبرامج النصية أو رموز التصميم.

فاحص تباين WCAG

يُحسب نسبة التباين من الإضاءة النسبية وفق WCAG 2.x. يتطلب AA نسبة 4.5:1 للنص العادي و3:1 للنص الكبير؛ يتطلب AAA نسبة 7:1. استخدم المعاينات عند اختيار ألوان النص أو واجهة المستخدم على خلفيات فاتحة أو داكنة.

الأسئلة المتداولة

ما تنسيقات الألوان التي يمكنني إدخالها؟

Hex (#RGB أو #RRGGBB أو #RRGGBBAA) وrgb()/rgba() وhsl()/hsla() وhsv() وcmyk() وoklch() وجميع أسماء ألوان CSS القياسية مثل cornflowerblue أو rebeccapurple.

هل يمتد #ABC إلى ستة أرقام؟

نعم. يُوسَّع hex المكوّن من ثلاثة أرقام لكل زوج أرقام، لذا يصبح #ABC هو #AABBCC.

ماذا يحدث إذا كان لوني غير صالح؟

سترى خطأً مضمّنًا. يبقى آخر لون صالح في صفوف التحويل والمنتقي والتصدير حتى تدخل قيمة صالحة مجددًا.

كيف يعمل فاحص تباين WCAG؟

يحسب نسبة التباين بين لونك والأبيض أو الأسود النقي باستخدام الإضاءة النسبية. تُظهر النتائج ما إذا كان اللون يستوفي عتبات AA أو AAA للنص العادي أو الكبير.

كيف تُحسب ألوان الوئام؟

هي حتمية: التكميلية إزاحة لون 180°؛ المماثلة خطوات لون ثابتة؛ الثلاثية إزاحات 120°؛ التكميلية المنقسمة ألوان قريبة من المكمل؛ الرباعية إزاحات مستطيلة 90°؛ الأحادية اللون تغيّر الخفة مع الحفاظ على اللون والتشبع من الأساس.

ماذا يتضمن تصدير JSON؟

مفاتيح ثابتة: baseHex وalpha وnamedColor وharmony وharmonyCount عند الاقتضاء وharmonySwatches وtintShadeStrip وstripCount ونسب التباين—مناسبة للأدوات أو التوثيق.

هل يمكنني مشاركة ألواني؟

نعم. يُحدَّث الرابط بـ hex وalpha ووضع الوئام والأعداد وحجم الشريط لتتمكن من حفظ أو مشاركة الإعداد بدقة.