محول الألوان
حول الألوان بين صيغ 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 الخاص بك إلى تنسيق آخر، وواجهة برمجة التطبيقات التي تستدعيها تتوقع تنسيقاً ثالثاً. بدلاً من كتابة كود التحويل أو البحث عن الصيغة المناسبة، الصق قيمة واحصل على كل التنسيقات دفعةً واحدة.
حالات استخدام محول الألوان
مرجع تنسيقات الألوان
يسرد الجدول أدناه أكثر خمسة تنسيقات ألوان شيوعاً، مع عرض لون النيلي ذاته (#6366F1) بكل تدوين. HEX و RGB هما الأكثر دعماً في CSS و JavaScript. يُفضَّل HSL للتخصيص لأن ضبط الإضاءة والإشباع سهل ومباشر. HSV هو النموذج الذي تستخدمه معظم أدوات اختيار الألوان في برامج التصميم الجرافيكي.
| التنسيق | مثال (النيلي) | القنوات | الاستخدام الشائع |
|---|---|---|---|
| HEX | #6366F1 | 6 (or 3/8) | CSS, design tools, brand guides |
| RGB | rgb(99, 102, 241) | 3 (0–255 each) | CSS, Canvas API, image processing |
| HSL | hsl(239, 84%, 67%) | 3 (deg, %, %) | CSS, color theming, accessibility tuning |
| HSV | hsv(239, 59%, 95%) | 3 (deg, %, %) | Color pickers, Photoshop, Figma |
| CMYK | cmyk(59%, 58%, 0%, 5%) | 4 (0–100% each) | Print design, prepress workflows |
HEX مقابل RGB مقابل HSL
تصف التنسيقات الثلاثة فضاء اللون sRGB ذاته. الفرق هو في طريقة عرض البيانات، مما يؤثر على سهولة القراءة وسهولة التعديل في سياقات مختلفة.
أمثلة برمجية
تحويل الألوان بين HEX و RGB و HSL في لغات وبيئات شائعة. تستخدم كل الأمثلة لون النيلي ذاته (#6366F1) لسهولة المقارنة.
// 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]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%)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
}/* 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); }