ToolDeck

محول الألوان

حول الألوان بين صيغ HEX و RGB و HSL و HSV مع منتقي ألوان بصري

جرب مثالاً

انقر على العينة لفتح المنتقي

أو عدّل أي قيمة أدناه

HEX
RGB
HSL
HSV

ما هو تحويل الألوان؟

يُترجم محول الألوان قيمةَ لون من تدوين إلى آخر — على سبيل المثال، من رمز HEX (#6366F1) إلى صيغة RGB (99, 102, 241) أو ثلاثي HSL (239, 84%, 67%). ويمكن التعبير عن اللون ذاته أيضاً بصيغة HSV (239, 59%, 95%). يُشفّر كل تنسيق اللونَ البصري نفسه باستخدام نموذج رياضي مختلف؛ إذ تتوقع الأدوات والأطر واجهات برمجة التطبيقات تنسيقات مختلفة بحسب السياق.

يصف كل من HEX و RGB اللونَ باعتباره مزيجاً من الضوء الأحمر والأخضر والأزرق. HEX هو تمثيل سداسي عشري مضغوط لقيم القنوات الثلاث ذاتها بين 0 و255 التي يُظهرها RGB بالتدوين العشري. أما HSL (تدرج اللون، الإشباع، الإضاءة) و HSV (تدرج اللون، الإشباع، القيمة) فيُعيدان ترتيب المعلومات ذاتها في إحداثيات أسطوانية، حيث يكون تدرج اللون زاوية على دائرة الألوان (0-360 درجة)، والإشباع والإضاءة أو السطوع نسباً مئوية. يجعل ذلك HSL و HSV أكثر سهولةً وبداهةً لمهام كإنشاء درجات أفتح أو أغمق من التدرج ذاته.

يتطلب التحويل بين هذه التنسيقات رياضيات محددة. توثّق مواصفة W3C CSS Color Module Level 4 الخوارزميات التي تستخدمها المتصفحات لتحويل أي لون CSS إلى ثلاثي sRGB. الصيغ حتمية: مدخل معين ينتج دائماً المخرج ذاته، لذا تكون التحويلات دون فقدان طالما لم تُقرَّب القيم أو تُقطع. تعتمد معظم أدوات اختيار الألوان وتطبيقات التصميم على هذه الصيغ ذاتها في الخلفية.

لماذا تستخدم هذا المحول؟

أدوات التصميم تُصدّر الألوان بتنسيق معين، بينما يحتاج CSS الخاص بك إلى تنسيق آخر، وواجهة برمجة التطبيقات التي تستدعيها تتوقع تنسيقاً ثالثاً. بدلاً من كتابة كود التحويل أو البحث عن الصيغة المناسبة، الصق قيمة واحصل على كل التنسيقات دفعةً واحدة.

تحويل فوري ومباشر
اكتب لوناً أو اخترْه وشاهد HEX و RGB و HSL و HSV تُحدَّث فوريًا. بدون زر إرسال، بدون رحلة إلى خادم.
🔒
خصوصية تامة، بدون خادم
تُجرى جميع عمليات التحويل الرياضية في متصفحك. لا تُرسل قيم الألوان ولا بيانات الاستخدام ولا ملفات تعريف الارتباط إلى أي مكان.
🔀
جميع التنسيقات الأربعة دفعةً واحدة
مدخل واحد يُنتج HEX و RGB و HSL و HSV في آنٍ واحد. انسخ أي تنسيق تحتاجه بنقرة واحدة.
📋
بدون حساب
افتح الصفحة وابدأ التحويل فوراً. بدون تسجيل، بدون بريد إلكتروني، بدون حدود للاستخدام. يعمل دون اتصال بالإنترنت بعد التحميل.

حالات استخدام محول الألوان

تطوير CSS
يُرسل إليك المصمم قيمة HEX من Figma، لكن مكتبة المكونات لديك تستخدم HSL للتخصيص. حوّل القيمة وأضفها مباشرةً إلى خصائص CSS المخصصة أو ملف إعداد Tailwind.
التكامل مع واجهات برمجة التطبيقات الخلفية
تقبل نقطة النهاية الخاصة بك الألوان كمصفوفات RGB لإنشاء المخططات. حوّل رموز HEX للعلامة التجارية من دليل الأسلوب إلى ثلاثيات الأعداد الصحيحة التي تتوقعها واجهة برمجة التطبيقات.
صيانة نظام التصميم
عند توثيق نظام تصميم، تحتاج إلى سرد كل رمز لون بصيغة HEX للمرجع السريع، و RGB لعرض Canvas، و HSL لتوليد الدرجات اللونية برمجياً.
ضمان الجودة والاختبار البصري
مقارنة لون بكسل في لقطة شاشة (يُرسَل عادةً بصيغة RGB من أدوات مطوري المتصفح) مع قيمة HEX المتوقعة من مواصفات Figma. التحويل السريع يؤكد التطابق أو يكشف الاختلافات.
تصوُّر البيانات
مكتبات الرسوم البيانية مثل D3.js و Chart.js تقبل الألوان بتنسيقات مختلفة تبعاً للطريقة المستخدمة. حوّل مرةً واحدة واحتفظ بتدوين موحد في إعداد مجموعة البيانات.
تعلّم نظرية الألوان
يستطيع الطلاب الذين يدرسون الرسوميات الحاسوبية أو تصميم الويب رؤية كيفية تعيين اللون ذاته عبر HEX و RGB و HSL و HSV. ضبط قناة واحدة ومراقبة تغير الأخريات يبني حدسًا حول كيفية ارتباط نماذج الألوان.

مرجع تنسيقات الألوان

يسرد الجدول أدناه أكثر خمسة تنسيقات ألوان شيوعاً، مع عرض لون النيلي ذاته (#6366F1) بكل تدوين. HEX و RGB هما الأكثر دعماً في CSS و JavaScript. يُفضَّل HSL للتخصيص لأن ضبط الإضاءة والإشباع سهل ومباشر. HSV هو النموذج الذي تستخدمه معظم أدوات اختيار الألوان في برامج التصميم الجرافيكي.

التنسيقمثال (النيلي)القنواتالاستخدام الشائع
HEX#6366F16 (or 3/8)CSS, design tools, brand guides
RGBrgb(99, 102, 241)3 (0–255 each)CSS, Canvas API, image processing
HSLhsl(239, 84%, 67%)3 (deg, %, %)CSS, color theming, accessibility tuning
HSVhsv(239, 59%, 95%)3 (deg, %, %)Color pickers, Photoshop, Figma
CMYKcmyk(59%, 58%, 0%, 5%)4 (0–100% each)Print design, prepress workflows

HEX مقابل RGB مقابل HSL

تصف التنسيقات الثلاثة فضاء اللون sRGB ذاته. الفرق هو في طريقة عرض البيانات، مما يؤثر على سهولة القراءة وسهولة التعديل في سياقات مختلفة.

HEX
سلسلة سداسية عشرية من 6 أرقام (أو اختصار 3 أرقام). مضغوطة وعالمية في CSS وأدوات التصميم ودلائل العلامات التجارية. يصعب قراءتها للوهلة الأولى: #6366F1 لا تخبرك بتدرج اللون. تدعم صيغة اختيارية مكونة من 8 أرقام (#6366F180) لشفافية ألفا.
RGB
ثلاثة أعداد صحيحة بين 0 و255 لقنوات الأحمر والأخضر والأزرق. التنسيق الأصلي لـ Canvas 2D و WebGL ومعظم مكتبات معالجة الصور. سهل التعديل قناةً بقناة، لكن ضبط السطوع المُدرَك يتطلب تغيير القيم الثلاث معاً.
HSL
تدرج اللون (0-360 درجة)، الإشباع (0-100%)، والإضاءة (0-100%). مُصمَّم لسهولة القراءة البشرية. لجعل اللون أفتح، ارفع قيمة L. لإزالة الإشباع، اخفض S. يدعم CSS تدوين hsl() أصلاً، وتبني عليه color-mix() الحديثة وصيغة الألوان النسبية.

أمثلة برمجية

تحويل الألوان بين HEX و RGB و HSL في لغات وبيئات شائعة. تستخدم كل الأمثلة لون النيلي ذاته (#6366F1) لسهولة المقارنة.

JavaScript
// HEX → RGB
function hexToRgb(hex) {
  const n = parseInt(hex.replace('#', ''), 16)
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}
hexToRgb('#6366f1') // → [99, 102, 241]

// RGB → HSL
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255
  const max = Math.max(r, g, b), min = Math.min(r, g, b)
  const l = (max + min) / 2
  if (max === min) return [0, 0, Math.round(l * 100)]
  const d = max - min
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
  let h = 0
  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
  else if (max === g) h = ((b - r) / d + 2) / 6
  else h = ((r - g) / d + 4) / 6
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)]
}
rgbToHsl(99, 102, 241) // → [239, 84, 67]
Python
import colorsys

# HEX → RGB
def hex_to_rgb(hex_str: str) -> tuple[int, int, int]:
    h = hex_str.lstrip('#')
    return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))

hex_to_rgb('#6366f1')  # → (99, 102, 241)

# RGB → HSL (colorsys uses HLS order)
r, g, b = 99 / 255, 102 / 255, 241 / 255
h, l, s = colorsys.rgb_to_hls(r, g, b)
print(f"hsl({h * 360:.0f}, {s * 100:.0f}%, {l * 100:.0f}%)")
# → hsl(239, 84%, 67%)

# RGB → HSV
h, s, v = colorsys.rgb_to_hsv(r, g, b)
print(f"hsv({h * 360:.0f}, {s * 100:.0f}%, {v * 100:.0f}%)")
# → hsv(239, 59%, 95%)
Go
package main

import (
	"fmt"
	"math"
)

func hexToRGB(hex string) (int, int, int) {
	var r, g, b int
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	return r, g, b
}

func rgbToHSL(r, g, b int) (int, int, int) {
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, int(math.Round(l * 100))
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf: h = (gf - bf) / d; if gf < bf { h += 6 }
	case gf: h = (bf - rf) / d + 2
	case bf: h = (rf - gf) / d + 4
	}
	return int(math.Round(h / 6 * 360)), int(math.Round(s * 100)), int(math.Round(l * 100))
}

func main() {
	r, g, b := hexToRGB("#6366f1")
	fmt.Println(r, g, b)         // → 99 102 241
	fmt.Println(rgbToHSL(r, g, b)) // → 239 84 67
}
CSS
/* Modern CSS supports multiple color formats natively */

/* HEX notation */
.button { color: #6366f1; }

/* RGB functional notation */
.button { color: rgb(99 102 241); }

/* HSL — easier to adjust lightness and saturation */
.button { color: hsl(239 84% 67%); }

/* CSS Color Level 4: relative color syntax (Chrome 119+) */
.button-light { color: hsl(from #6366f1 h s calc(l + 20%)); }

/* color-mix() for tinting without manual conversion */
.button-muted { color: color-mix(in srgb, #6366f1 70%, white); }

الأسئلة الشائعة

ما الفرق بين HSL و HSV؟
كلاهما يستخدم تدرج اللون والإشباع، لكنهما يُعرّفان السطوع بشكل مختلف. يستخدم HSL الإضاءة، حيث تمثل 50% اللونَ النقي، و0% الأسود، و100% الأبيض. يستخدم HSV القيمة (أو السطوع)، حيث تمثل 100% اللونَ النقي و0% الأسود. لا يحتوي HSV على نقطة نهاية بيضاء مباشرة. عملياً، يُستخدم HSL في CSS وتطوير الويب، بينما HSV هو النموذج الأساسي لمعظم أدوات اختيار الألوان في برامج التصميم مثل Photoshop و Figma.
كيف أحوّل HEX إلى RGB في JavaScript؟
حوّل سلسلة الهيكس إلى عدد صحيح باستخدام parseInt(hex, 16)، ثم استخرج كل قناة بالإزاحة الثنائية: (n >> 16) & 255 للأحمر، و (n >> 8) & 255 للأخضر، و n & 255 للأزرق. يعمل ذلك مع أي سلسلة هيكس مكونة من 6 أرقام سواء بادئها # أم لا. للاختصار المكون من 3 أرقام مثل #F0F، وسّع كل رقم أولاً (FF00FF) قبل التحليل.
هل يمكنني استخدام HSL مباشرةً في CSS؟
نعم. تدعم جميع المتصفحات الحديثة hsl() و hsla() في CSS. وفقاً لمستوى CSS Color Level 4، الصيغة هي hsl(239 84% 67%) بقيم مفصولة بمسافات (لا تزال الفاصلة مقبولة). يمكنك أيضاً إضافة ألفا كمعامل رابع: hsl(239 84% 67% / 0.5). تدعم هذه الصيغة كلٌّ من Safari و Chrome و Firefox و Edge.
هل تحويل الألوان مع فقدان بيانات؟
رياضياً، لا. تصف HEX و RGB و HSL و HSV فضاء اللون sRGB ذاته والتحويلات قابلة للعكس. عملياً، قد تظهر فروق تقريب صغيرة لأن HEX مقيّد بـ 256 درجة لكل قناة ونسب HSL تُقرَّب عادةً إلى أعداد صحيحة. التحويل ذهاباً وإياباً مرات متعددة قد يُراكم أخطاء تقريب بمقدار 1-2 وحدة.
ما صيغة HEX ذات 8 أرقام؟
تُضيف صيغة HEX ذات 8 أرقام رقمَين لألفا (الشفافية) إلى لون HEX القياسي المكون من 6 أرقام. مثلاً، #6366F180 تعني لون النيلي ذاته بشفافية 50% (0x80 = 128، ما يعادل تقريباً 50% من 255). يدعم CSS هذا التدوين في جميع المتصفحات الحديثة. الصيغة المختصرة مكونة من 4 أرقام، مثل #63F8.
لماذا يبدو لوني مختلفاً على شاشة أخرى؟
يعتمد ظهور الألوان على ملف تعريف اللون في الشاشة ودرجة السطوع ومعايرة غاما. قد تعرض شاشتان قيمة sRGB ذاتها (#6366F1) بشكل مختلف إذا اختلفت ملفات تعريف الألوان فيهما. تعمل أدوات تحويل الألوان في فضاء لون محدد (عادةً sRGB) وتنتج مخرجات صحيحة رياضياً. الاختلافات المرئية مشكلة معايرة الشاشة وليست خطأً في التحويل.
كيف أختار درجة أفتح أو أغمق من لون معين؟
حوّل اللون إلى HSL وعدّل قناة L (الإضاءة). رفع L نحو 100% يُنتج درجات أفتح، وخفضه نحو 0% يُنتج درجات أغمق. يبقى تدرج اللون والإشباع ثابتَين. يمكنك فعل ذلك مباشرةً في CSS: hsl(239 84% 80%) نسخة أفتح من hsl(239 84% 67%). يوفر CSS الحديث أيضاً color-mix(in srgb, #6366F1, white 30%) لتحقيق التأثير ذاته دون تحويل يدوي.