منتقي ومحوّل الألوان
اختر لونًا وحوّله بين HEX و RGB و HSL و OKLCH.
⚠ This OKLCH value falls outside the sRGB gamut and was clamped.
Pick a color from an image
WCAG contrast
Color schemes & harmonies
Tints & shades
Color blindness simulation
Runs entirely in your browser. Nothing is uploaded.
محوّل ومنتقي ألوان مجاني يعمل بالكامل في متصفحك
يحوّل هذا محوّل الألوان المجاني أي لون إلى جميع الصيغ التي تحتاجها فوراً. الصق كود hex، أو أدخل قيمة RGB، أو اسحب عجلة الألوان، أو أخذ عيّنة بيكسل باستخدام القطّارة — وستظهر النتيجة في HEX وRGB وHSL وHSV وCMYK وOKLCH في آنٍ واحد. كل حقل قابل للتعديل وثنائي الاتجاه: غيّر صيغة واحدة وستُحدَّث الأخرى فوراً دون إعادة تحميل الصفحة أو طلب من الخادم أو أي تأخير.
تُغطّي مواقع مثل ColorHexa.com وRapidTables وconvertingcolors.com وcssgradient.io جوانب متعددة من هذه الخدمة، لكنها متفرقة. يجمع هذا الأداة حالات الاستخدام اليومية — تحويل الصيغ، والاختيار البصري، والتحقق من إمكانية الوصول، وتوليد لوحات الألوان — في واجهة واحدة مباشرة حيث تُدخل اللون مرة واحدة وترى كل شيء دفعة واحدة. لا يُرفع أي شيء؛ كل المعالجة محلية.
حوّل بين HEX وRGB وHSL وHSV وCMYK وOKLCH — في اتجاهين وفوراً
كل حقل قابل للتعديل ويبقى متزامناً. الصق كود hex وستُحدَّث قيم RGB وHSL وHSV وCMYK وOKLCH على الفور. غيّر أياً منها وستتبعها الأخرى في الحال. هذا يجعل الأداة في آنٍ واحد محوّلاً سريعاً من hex إلى RGB وأداةً من RGB إلى hex ومحوّلاً من RGB إلى CMYK ومحوّل HSL/HSV/OKLCH — كل ذلك في عرض واحد.
جميع المخرجات قيم HTML وCSS صالحة — #hex وrgb(…) وhsl(…) وhsv(…) وcmyk(…) وoklch(…) — كل منها مع زر نسخ بنقرة واحدة. تُعرّف الأداة أيضاً أقرب اسم لون CSS تلقائياً، حتى تتمكن من وصف درجة اللون فوراً أو التحقق من مطابقة كود hex مخصص لكلمة مفتاحية قياسية.
اختر لوناً من صورة — أو مباشرةً من شاشتك
هل تحتاج اللون الدقيق من صورة أو شعار أو لقطة شاشة أو نموذج تصميمي؟ استخدم منتقي ألوان الصور: ارفع ملفاً أو اسحبه وأفلته، أو الصقه من الحافظة (Ctrl+V / Cmd+V)، ثم حرّك الفأرة فوق الصورة وانقر لالتقاط أي بيكسل. تقوم عدسة التكبير المدمجة بالتكبير لاختيار بيكسل بدقة، وكل لون تنقر عليه يُحفظ في شريط «ألوان من الصورة» حتى تتمكن من بناء لوحة ألوان من صورة واحدة دون فقدان الاختيارات السابقة. تُعالَج الصورة محلياً باستخدام HTML canvas ولا تغادر جهازك أبداً — يعمل في كل المتصفحات بما فيها Firefox وSafari.
تفضّل التقاط لون من مكان آخر على شاشتك؟ تأخذ القطّارة عيّنة أي بيكسل على شاشتك في Chrome 95+ وEdge 95+ عبر واجهة برمجة EyeDropper الأصلية — انقر عليها، أشر إلى أي بيكسل على الشاشة، وسيُحمَّل ذلك اللون فوراً في جميع الحقول. يُكمّل شريط الألوان الأخيرة وعجلة الألوان التفاعلية خيارات الاختيار، كل ذلك دون تثبيت أي شيء.
مخططات الألوان والتناسق والظلال والفروق
حوّل لوناً واحداً إلى لوحة ألوان كاملة. تولّد الأداة ستة مخططات ألوان متناسقة بناءً على تناسق عجلة الألوان: تكميلي ومتماثل وثلاثي ورباعي وتكميلي منقسم وأحادي اللون. انقر على أي لون عيّنة لتجعله اللون الأساسي الجديد وتواصل الاستكشاف، فتعمل الأداة كـمولّد لوحات ألوان سريع لبناء تركيبات متسقة تعكس هوية العلامة التجارية.
يُنتج مقياس الظلال والفروق مجموعةً من خطوات أفتح وأغمق من لونك الأساسي — مفيد لحالات التمرير والنقر والتعطيل والحدود والخلفيات. يؤدي النقر على أي خطوة إلى تفعيلها كلون نشط وعرض تفاصيل صيغها الكاملة. يتحدث كل من توليد اللوحات ومقياس الظلال/الفروق فوراً عند كل تغيير للون دون الحاجة لطلبات الخادم.
فحص التباين وفق WCAG ومحاكاة عمى الألوان
إمكانية الوصول مدمجة في كل اختيار للون. يحسب مدقق تباين WCAG نسبة التباين المستندة إلى الإضاءة لألوانك مقارنةً بالأبيض والأسود، ثم يعرض شارات النجاح/الفشل AA وAAA للنص العادي والنص الكبير ومكونات واجهة المستخدم — المستويات الثلاثة لـWCAG 2.1 التي تحدد ما إذا كان زوج الألوان الأمامية/الخلفية يستوفي معايير إمكانية الوصول. يتحدث فورياً أثناء ضبط أي حقل لون.
يستعرض محاكي عمى الألوان لونك كما يراه الأشخاص المصابون بالبروتانوبيا والديوترانوبيا والتريتانوبيا وفقدان اللون الكلي — محسوباً باستخدام خوارزمية محاكاة Brettel/Viénot القياسية ومحدثاً بشكل مباشر. يساعد مجتمعاً كل من فحص التباين ومحاكاة عمى الألوان على ضمان أن خياراتك التصميمية تبقى ذات معنى وقابلة للتمييز لكل مشاهد.
فهم OKLCH — مستقبل ألوان CSS
OKLCH هو فضاء لوني موحّد إدراكياً وصل إلى CSS السائد عبر مواصفة CSS Color Level 4. يمثّل الألوان بوصفها الإضاءة (L) والكثافة (C) ودرجة اللون (H)، حيث تُعايَر الإضاءة وفقاً للإدراك البشري لا لطاقة الضوء الخطية. هذا يعني أن لونين بنفس قيمة L سيبدوان بنفس درجة الإضاءة للعين البشرية بصرف النظر عن درجة اللون — وهو ما لا ينطبق على HSL أو RGB.
يصف OKLCH أيضاً نطاقاً أوسع من sRGB — إذ يمكنه تمثيل ألوان Display P3 وRec.2020 التي تتجاوز مثلث sRGB المستخدم في معظم قيم hex وRGB وHSL. تدعم المتصفحات الحديثة (Chrome وSafari وFirefox) الآن دالة CSS oklch() بشكل أصلي. تعرض هذه الأداة تحذير نطاق عندما تقع قيمة OKLCH التي أدخلتها خارج نطاق sRGB وستُقلَّص في المتصفحات الأقدم.
بديل مجاني لمنتقي ألوان Google وAdobe Color والأدوات الإلكترونية
معظم منتقيات الألوان مدمجة داخل شيء أكبر. لا يظهر منتقي ألوان Google إلا في نتائج البحث لاستعلامات محددة ولا يمكن وضعه في المفضلة أو استخدامه بشكل مستقل. يعيش منتقي ألوان Adobe داخل Photoshop أو Illustrator أو Adobe Color (color.adobe.com) مما يتطلب حساب Adobe ويزامن البيانات مع خوادم Adobe. ColorHexa وRapidTables مواقع مرجعية وليست أدوات تفاعلية.
هذه أداة منتقي وتحويل ألوان مستقلة ومجانية تفتح بنقرة واحدة وتعمل على أي جهاز ولا تطلب منك تسجيل الدخول وتعمل بالكامل في متصفحك. سواء كنت مطوراً تطابق لوناً hex لعلامة تجارية، أو مصمماً تضبط لوحة HSL، أو محترفاً في الطباعة تتحقق من تقريبات CMYK، أو مهندس إمكانية وصول تتحقق من نسب تباين WCAG — تُنجز هذه الأداة كل العمل في صفحة سريعة وخاصة.
Frequently asked questions
هل محوّل الألوان هذا مجاني؟
نعم — مجاني تماماً بدون تسجيل أو حساب أو حدود للاستخدام. يعمل بالكامل في متصفحك لذا الألوان التي تختارها أو تلصقها أو تأخذ عيّنة منها لا تغادر جهازك أبداً. لا يوجد شيء لتثبيته ولا يلزم اشتراك. كل ميزة — التحويل والقطّارة ومنتقي الصور وفحص تباين WCAG والظلال والفروق ومحاكاة عمى الألوان وتوليد مخططات الألوان — متاحة مجاناً من الزيارة الأولى دون حساب.
كيف أحوّل كود HEX إلى RGB؟
الصق كود hex الخاص بك (مع أو بدون # البادئة) في حقل HEX وستتحدث قيم RGB وHSL وHSV وCMYK وOKLCH فوراً. على سبيل المثال، الصق #3b82f6 وستشاهد على الفور rgb(59, 130, 246) في حقل RGB وhsl(217, 91%, 60%) في حقل HSL. كل صيغة تبقى متزامنة — لا تحتاج لإدخال اللون سوى مرة واحدة. التحويل ثنائي الاتجاه: اكتب قيمة RGB وسيتحدث HEX وبقية الحقول بنفس الطريقة.
ما صيغ الألوان التي تستطيع هذه الأداة تحويلها؟
تحوّل الأداة في اتجاهين بين ست صيغ: HEX (كود #rrggbb المستخدم في HTML وCSS)، وRGB (قيم الأحمر والأخضر والأزرق من 0 إلى 255)، وHSL (درجة اللون 0-360° والتشبع والإضاءة كنسب مئوية)، وHSV/HSB (درجة اللون والتشبع والقيمة، النموذج المستخدم في منتقيات ألوان معظم تطبيقات التصميم)، وCMYK (نسب السيان والأرجواني والأصفر والأسود لمعاينة الطباعة)، وOKLCH (فضاء لوني حديث موحد إدراكياً).
هل يمكنني اختيار لون من صورة أو صورة فوتوغرافية؟
نعم — هذه أداة منتقي ألوان صور متكاملة. ارفع صورة أو اسحبها وأفلتها، أو الصقها من الحافظة (Ctrl+V / Cmd+V)، ثم حرّك المؤشر فوق الصورة وانقر لالتقاط اللون الدقيق لأي بيكسل. تعمل عدسة مكبّرة مدمجة على التكبير لاختيار دقيق للبيكسل. تُعالَج الصورة محلياً في متصفحك باستخدام HTML canvas ولا تُرفع إلى أي خادم.
هل يتحقق من التباين لإمكانية الوصول (WCAG)؟
نعم. يحسب مدقق تباين WCAG نسبة التباين المستندة إلى الإضاءة بين اللون المختار والخلفيات البيضاء والسوداء، ويعرض شارات النجاح/الفشل AA وAAA للنص العادي والنص الكبير ومكونات واجهة المستخدم. يتطلب WCAG AA نسبة 4.5:1 للنص العادي (3:1 للنص الكبير)؛ ويتطلب WCAG AAA 7:1 (4.5:1 للنص الكبير). يتحدث المدقق بشكل مباشر أثناء ضبط أي حقل لون.
ما OKLCH ولماذا أستخدمه؟
OKLCH هو فضاء لوني حديث وموحّد إدراكياً قُدِّم في CSS Color Level 4. على عكس RGB أو HSL، حيث لا تنتج التغييرات العددية المتساوية فروقاً متساوية في إدراك العين البشرية، فإن OKLCH مُعاير بحيث يُنتج زيادة أو إنقاص قيمة الإضاءة (L) بمقدار ثابت نتيجةً متسقة بصرياً بغض النظر عن درجة اللون. هذا يجعله مثالياً لبناء لوحات ألوان متاحة ومتوازنة. يمثّل OKLCH أيضاً ألوان النطاق الموسع (Display P3) ومدعوم بشكل أصلي في المتصفحات الحديثة.
هل يعمل منتقي الألوان على iPhone وAndroid؟
نعم. تعمل الأداة كاملةً في أي متصفح محمول حديث — Safari على iPhone/iPad وChrome على Android. تعمل عجلة الألوان وحقول إدخال الصيغة ومنتقي ألوان الصور ومدقق تباين WCAG ومقياس الظلال/الفروق ومولّد مخططات الألوان بشكل طبيعي على الجوال. قطّارة الشاشة غير متاحة على متصفحات الجوال (هي واجهة برمجة حصرية لـChrome/Edge على سطح المكتب)، لكن منتقي الصور واللصق من الحافظة يعملان بشكل مثالي على الجوال.
Related tools
عرض كل الأدوات
جديد منشئ تأثير الزجاج Glassmorphism
صمّم بطاقة زجاجية ضبابية وانسخ شيفرة CSS، مع معاينة مباشرة.
جديد منشئ ظلال النص CSS
اضبط ظل نص CSS مع معاينة مباشرة وانسخ الشيفرة.
جديد خالط الألوان
امزج لونين بأي نسبة وانسخ النتيجة أو أي خطوة بينهما.
جديد منتقي ألوان الصور
اختر أي لون من صورة واستخرج لوحة ألوانها السائدة بصيغ HEX وRGB وHSL.
جديد Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
جديد Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.