ToolDeck

مبدل رنگ

تبدیل رنگ‌ها بین فرمت‌های HEX، RGB، HSL و HSV با انتخاب‌کننده بصری

یک مثال امتحان کنید

برای باز کردن انتخاب‌کننده رنگ روی مربع کلیک کنید

یا هر مقدار زیر را مستقیماً ویرایش کنید

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 که فراخوانی می‌کنید فرمت سومی انتظار دارد. به‌جای نوشتن کد تبدیل یا جستجوی فرمول درست، یک مقدار را وارد کنید و همه فرمت‌ها را یک‌جا دریافت کنید.

تبدیل زنده و فوری
یک رنگ تایپ یا انتخاب کنید و HEX، RGB، HSL و HSV را در لحظه به‌روز ببینید. بدون دکمه ارسال، بدون رفت‌وبرگشت به سرور.
🔒
پردازش محلی، بدون ارسال داده
تمام ریاضیات تبدیل در مرورگر شما اجرا می‌شود. هیچ مقدار رنگ، داده استفاده یا کوکی به هیچ‌جا ارسال نمی‌شود.
🔀
هر چهار فرمت به‌یک‌باره
یک ورودی به‌طور همزمان HEX، RGB، HSL و HSV تولید می‌کند. هر فرمت مورد نیاز را با یک کلیک کپی کنید.
📋
بدون نیاز به حساب کاربری
صفحه را باز کنید و شروع به تبدیل کنید. بدون ثبت‌نام، بدون ایمیل، بدون محدودیت نرخ. پس از بارگذاری به‌صورت آفلاین هم کار می‌کند.

موارد استفاده مبدل رنگ

توسعه CSS
یک طراح مقدار HEX از Figma را به شما می‌دهد، اما کتابخانه کامپوننت شما از HSL برای تم‌بندی استفاده می‌کند. مقدار را تبدیل کرده و در خصوصیات سفارشی CSS یا تنظیمات Tailwind خود قرار دهید.
یکپارچه‌سازی API بک‌اند
نقطه پایانی شما برای تولید نمودار، رنگ‌ها را به‌صورت آرایه‌های RGB دریافت می‌کند. کدهای HEX برند را از راهنمای استایل به سه‌تایی‌های عددی که API انتظار دارد تبدیل کنید.
نگهداری سیستم طراحی
هنگام مستندسازی یک سیستم طراحی، به هر توکن رنگ نیاز دارید که در HEX برای مرجع سریع، در RGB برای رندرینگ Canvas، و در HSL برای تولید سایه برنامه‌نویسی فهرست شود.
تضمین کیفیت و تست بصری
مقایسه رنگ پیکسل یک تصویر (معمولاً در RGB توسط DevTools مرورگر گزارش می‌شود) با مقدار 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
یک رشته هگزادسیمال ۶ رقمی (یا ۳ رقمی خلاصه). فشرده و جهانی در CSS، ابزارهای طراحی و راهنماهای برند. در نگاه اول خواندنش دشوار است: #6366F1 رنگ‌مایه را نشان نمی‌دهد. از یک فرم اختیاری ۸ رقمی (#6366F180) برای شفافیت آلفا پشتیبانی می‌کند.
RGB
سه عدد صحیح از 0 تا 255 برای کانال‌های قرمز، سبز و آبی. فرمت بومی برای Canvas 2D، WebGL و بیشتر کتابخانه‌های پردازش تصویر. دستکاری کانال به کانال آسان است، اما تنظیم درخشندگی ادراک‌شده نیازمند تغییر همزمان هر سه مقدار است.
HSL
رنگ‌مایه (0 تا 360 درجه)، اشباع (0 تا 100٪) و روشنایی (0 تا 100٪). برای خوانایی انسانی طراحی شده است. برای روشن‌تر کردن رنگ، L را افزایش دهید. برای کاهش اشباع، S را کم کنید. CSS به‌صورت بومی از نمادگذاری hsl() پشتیبانی می‌کند، و color-mix() مدرن CSS و نحو رنگ نسبی بر پایه آن ساخته شده‌اند.

نمونه‌های کد

تبدیل رنگ بین 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 است.
چگونه در JavaScript مقدار HEX را به RGB تبدیل کنم؟
رشته هگز را با parseInt(hex, 16) به یک عدد صحیح تبدیل کنید، سپس هر کانال را با جابه‌جایی بیت استخراج کنید: (n >> 16) & 255 برای قرمز، (n >> 8) & 255 برای سبز، و n & 255 برای آبی. این روش هر رشته هگز ۶ رقمی با یا بدون علامت # در ابتدا را مدیریت می‌کند. برای خلاصه ۳ رقمی مانند #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 هشت رقمی چیست؟
فرمت HEX هشت رقمی دو رقم آلفا (شفافیت) به رنگ HEX استاندارد شش رقمی اضافه می‌کند. برای مثال، #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%) را برای همین اثر بدون تبدیل دستی ارائه می‌دهد.