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

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

حوّل بين أكواد الألوان HEX و RGB و HSL و HSV و CMYK و OKLCH لحظياً في المتصفح. أنشئ تدرجات وظلال لوحات 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 و OKLCH وهندسة لوحات CSS

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

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).