مبدل رنگ
تبدیل رنگها بین فرمتهای HEX، RGB، HSL و HSV با انتخابکننده بصری
برای باز کردن انتخابکننده رنگ روی مربع کلیک کنید
یا هر مقدار زیر را مستقیماً ویرایش کنید
تبدیل رنگ چیست؟
مبدل رنگ یک مقدار رنگ را از یک فرمت به فرمت دیگر تبدیل میکند — برای مثال، از یک سهتایی HEX (مانند #6366F1) به یک سهتایی RGB (99، 102، 241) یا یک سهتایی HSL (239، 84٪، 67٪). همان رنگ را میتوان بهصورت یک سهتایی HSV نیز بیان کرد (239، 59٪، 95٪). هر فرمت همان رنگ بصری را با استفاده از مدل ریاضی متفاوتی کدگذاری میکند؛ ابزارها، زبانهای برنامهنویسی و APIهای مختلف بسته به زمینه، فرمتهای متفاوتی را انتظار دارند.
HEX و RGB هر دو رنگ را بهعنوان ترکیبی از نور قرمز، سبز و آبی توصیف میکنند. HEX یک نمایش هگزادسیمال فشرده از همان سه مقدار کانال 0 تا 255 است که RGB آنها را بهصورت اعشاری بیان میکند. HSL (رنگمایه، اشباع، روشنایی) و HSV (رنگمایه، اشباع، مقدار) همان اطلاعات را در یک سیستم مختصات استوانهای سازماندهی میکنند که در آن رنگمایه زاویهای روی چرخه رنگ (0 تا 360 درجه) است و اشباع و روشنایی یا درخشندگی بهصورت درصد بیان میشوند. این ویژگی HSL و HSV را برای کارهایی مثل ایجاد سایههای روشنتر یا تیرهتر از یک رنگمایه شهودیتر میکند.
تبدیل بین این فرمتها نیازمند ریاضیات دقیق است. مشخصات CSS Color Module Level 4 در W3C الگوریتمهایی را که مرورگرها برای تبدیل هر رنگ CSS به یک سهتایی sRGB استفاده میکنند، مستند میکند. فرمولها قطعی هستند: یک ورودی مشخص همیشه خروجی یکسانی تولید میکند، بنابراین تبدیلها تا زمانی که مقادیر گرد یا محدود نشوند، بدون اتلاف هستند. بیشتر انتخابکنندههای رنگ و ابزارهای طراحی در پسزمینه از همین فرمولها استفاده میکنند.
چرا از این مبدل رنگ استفاده کنیم؟
ابزارهای طراحی رنگها را در یک فرمت خروجی میدهند، CSS شما به فرمت دیگری نیاز دارد، و API که فراخوانی میکنید فرمت سومی انتظار دارد. بهجای نوشتن کد تبدیل یا جستجوی فرمول درست، یک مقدار را وارد کنید و همه فرمتها را یکجا دریافت کنید.
موارد استفاده مبدل رنگ
مرجع فرمت رنگ
جدول زیر پنج فرمت رنگ رایج را فهرست میکند و همان رنگ نیلی (#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); }