أدوات التصميم و CSS

محول الألوان من HEX إلى RGB و HSL ومولد لوحات CSS

حوّل بين أكواد الألوان HEX و RGB و HSL و HSV و CMYK لحظياً في المتصفح. أنشئ تدرجات وظلال لوحات Tailwind مع فحص تباين WCAG. خصوصية 100% بدون خوادم.

تحويل ألوان محلي بالكامل 100% في المتصفح • متوافق مع معايير W3C CSS Color 4 • صفر اتصالات شبكية
أدوات التصميم و CSS
أنماط تصميم شائعة
مقابل الأبيض (#FFFFFF)
3.68:1
AA Large Only
مقابل الأسود (#000000)
5.71:1
AA Pass

صيغ الألوان المحولة

HEX (6-digit)
#3B82F6
HEX8 (Alpha)
#3B82F6FF
RGB
rgb(59, 130, 246)
RGBA
rgba(59, 130, 246, 1)
HSL
hsl(217, 91%, 60%)
HSLA
hsla(217, 91%, 60%, 1)
HSV / HSB
hsv(217, 76%, 96%)
CMYK (Print)
cmyk(76%, 47%, 0%, 4%)
CSS OKLCH
oklch(62% 0.19 255)

مقياس التدرجات والظلال (Tailwind 50 - 950)

Click any swatch to copy

التناغم والانسجام اللوني

تصدير أكواد CSS والمتغيرات البرمجية

:root {
  --color-primary: #3B82F6;
  --color-primary-rgb: 59, 130, 246;
  --color-primary-hsl: 217deg 91% 60%;
}
الأسئلة الشائعة والأجوبة التقنية · محول الألوان من HEX إلى RGB و HSL

دليل تحويل فضاءات الألوان من HEX إلى RGB و HSL و OKLCH وهندسة لوحات CSS

دليل شامل لنماذج الألوان الرقمية، والتحويل الرياضي بين sRGB و HSL و CMYK و OKLCH، ومعايير التباين WCAG 2.1 ومقاييس تصميم Tailwind.

MU
مهندس حلول وأدوات المطورين
مرجع تقني

01. الهندسة الرياضية لفضاءات الألوان: HEX و RGB و HSL و OKLCH

تعرض الشاشات الرقمية الألوان عبر المزج الإضافي للضوء في بكسلات فرعية للأحمر والأخضر والأزرق (فضاء sRGB). يخصص كل لون 8 بت (من 0 إلى 255) لكل قناة.

ترميز HEX هو تمثيل ست عشري لقيم RGB؛ فالرمز #3B82F6 يتحلل إلى 59 أحمر و 130 أخضر و 246 أزرق.

ينظم نموذج HSL الألوان حسب درجة اللون (Hue)، والتشبع (Saturation)، والإضاءة (Lightness)، مما يتيح توليد لوحات متناسقة بيسر وسهولة.

تنجز منصة DevOmniTools كافة التحويلات محلياً 100% داخل المتصفح وفق معيار W3C CSS Color Module 4.

  • مزامنة فورية بين صيغ HEX و RGB و RGBA و HSL و HSLA و HSV و CMYK و OKLCH.
  • مولد تدرجات وظلال آلي من 11 خطوة يطابق مقاييس Tailwind CSS 50–950.
  • لوحات تناغم لوني: تكميلي، ثلاثي، متشابه، ورباعي.
  • حساب دقيق لنسب التباين وفق WCAG 2.1 مقابل الأبيض والأسود لضمان سهولة القراءة.
إجابة مباشرة: كيف تحول كود HEX إلى RGB رياضياً؟

قسّم كود HEX المكون من 6 خانات (#RRGGBB) إلى أزواج ثنائية. حوّل كل زوج من النظام الست عشري إلى العشري عبر: (الخانة الأولى × 16) + الخانة الثانية. على سبيل المثال #3B82F6 ينتج عنه R=59 و G=130 و B=246، أي rgb(59, 130, 246).

02. خطوات التحويل وهندسة متغيرات التصميم في CSS

1. الصق أي كود لوني في خانة الإدخال أو استخدم منتقي الألوان أو قطارة الشاشة.

2. يقوم المحول فوراً بتحديث كافة الصيغ مع أزرار نسخ سريعة بنقرة واحدة.

3. استعرض مقياس التدرجات والظلال لاختيار خلفيات والحالات العناصر التفاعلية.

4. تحقق من مطابقة التباين لمعايير الوصولية WCAG للتأكد من سهولة قراءة النصوص.

5. انقر على زر نسخ متغيرات CSS لاستخدامها مباشرة في ملفات مشروعك.

03. تصميم لوحات الألوان وسير عمل الأصول الشعاعية

تحقق من معايير التباين WCAG للوحات الألوان عبر فاحص تباين الألوان، وصمم بطاقات زجاجية عصرية عبر مُولّد تأثير الزجاج CSS Glassmorphism، أو صدر الأيقونات بدقة عبر محول SVG إلى PNG.

الأسئلة الشائعة والأجوبة التقنية

كيف يتمدد كود HEX المكون من 3 خانات إلى 6 خانات؟

تُكرر كل خانة فردية مرتين: الرمز #ABC يتمدد تلقائياً إلى #AABBCC.

لماذا يعتبر فضاء OKLCH الأفضل في تصميم الواجهات الحديثة؟

لأنه يوفر تناسقاً إدراكياً حقيقياً؛ حيث تبقى شدة الإضاءة متساوية بصرياً عند تغيير درجات اللون، على عكس HSL القديم.

هل يتم إرسال أكواد الألوان إلى خوادم خارجية؟

كلا إطلاقاً، كافة العمليات والحسابات الرياضية تُجرى محلياً وبشكل خاص 100% داخل متصفحك.

هل يتم رفع بياناتي الحساسة إلى خوادم خارجية عند استخدام محول الألوان من HEX إلى RGB و HSL؟

لا. يتم التنفيذ الأساسي لأداة محول الألوان من HEX إلى RGB و HSL داخل الذاكرة المتطايرة لمتصفحك دون رفع البيانات إلى خوادم؛ وتتطلب أي ميزات سحابية اختيارية موافقتك الصريحة.

هل يمكنني تشغيل محول الألوان من HEX إلى RGB و HSL دون اتصال نشط بالإنترنت؟

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

هل محول الألوان من HEX إلى RGB و HSL مجانية الاستخدام وهل هناك أي قيود؟

الأدوات الأساسية مجانية ولا تتطلب حساباً. تطبق حدود ذاكرة الجهاز وحدود السلامة الخاصة بكل أداة. توجد حدود استخدام للذكاء الاصطناعي الاختياري وخدمات التواصل عبر الإنترنت.

دليل هندسي متعمق

هل تبحث عن المعادلات البرمجية؟ تعلم كيفية تحويل HEX إلى RGB و RGBA مع الشفافية في CSS و JavaScript

قراءة الدليل الشامل

أدوات ومرافق برمجية ذات صلة

عزز كفاءة سير عملك اليومي بمرافق برمجية مكملة تعمل محلياً بخصوصية تامة داخل متصفحك.

التصميم والوصول WCAG AAA

فاحص تباين الألوان (WCAG)

فحص نسب تباين الألوان وفق معايير سهولة الوصول العالمية WCAG 2.1 بمستوياتها AA و AAA لضمان تجربة مستخدم مثالية.

تشغيل الأداة
التصميم و CSS محرر مرئي تفاعلي

مُولّد ومحرر CSS Flexbox المرئي التفاعلي

أداة بصرية تفاعلية لتصميم تخطيطات Flexbox مع معاينة فورية، وضبط اتجاه العناصر والمحاذاة، وتوليد أكواد CSS و Tailwind جاهزة للنسخ.

تشغيل الأداة
التصميم و CSS أداء فائق

مُولّد الزجاج المصنفر CSS

تصميم وتخصيص تأثيرات الزجاج المصنفر والظلال العصرية مع تصدير كود CSS جاهز للاستخدام الفوري في مواقعك.

تشغيل الأداة
الفيكتور والتصميم تحويل فيكتور فائق الدقة

محول ملفات SVG إلى PNG وصور نقطية

تحويل رسومات الفيكتور SVG إلى صور عالية الدقة PNG و WebP و JPEG بمضاعفات حجم تصل إلى 8x مع دعم الشفافية وبشكل محلي 100%.

تشغيل الأداة
الخطوط والتصميم تحويل Vector إلى خط مجاناً

محول الرسومات المتجهة و SVG إلى خط ويب (TTF)

تحويل الرسومات المتجهة (SVG) ومشاريع IcoMoon إلى ملفات خط TrueType (.ttf) مجاناً داخل المتصفح. معاينة فورية وكود CSS @font-face بدون رفع ملفاتك.

تشغيل الأداة
استكشف دليل الأدوات