Công Cụ Chuyển Đổi Màu
Chuyển đổi màu giữa các định dạng HEX, RGB, HSL và HSV với bộ chọn màu trực quan
Nhấp vào ô màu để mở bộ chọn màu
Hoặc chỉnh sửa bất kỳ giá trị nào bên dưới
Chuyển Đổi Màu Là Gì?
Công cụ chuyển đổi màu dịch một giá trị màu từ ký hiệu này sang ký hiệu khác — ví dụ, từ chuỗi HEX (#6366F1) sang bộ ba RGB (99, 102, 241) hoặc bộ ba HSL (239, 84%, 67%). Cùng một màu cũng có thể được biểu diễn dưới dạng bộ ba HSV (239, 59%, 95%). Mỗi định dạng mã hóa cùng một màu hiển thị bằng một mô hình toán học khác nhau; các công cụ, ngôn ngữ và API khác nhau đều yêu cầu định dạng khác nhau tùy theo ngữ cảnh.
HEX và RGB đều mô tả màu sắc là sự kết hợp của ánh sáng đỏ, xanh lá và xanh dương. HEX là biểu diễn thập lục phân gọn gàng của ba giá trị kênh từ 0–255 mà RGB liệt kê dưới dạng thập phân. HSL (Hue, Saturation, Lightness) và HSV (Hue, Saturation, Value) sắp xếp lại thông tin đó trong hệ tọa độ trụ, trong đó sắc thái là một góc trên bánh xe màu (0–360 độ), còn độ bão hòa và độ sáng là các tỉ lệ phần trăm. Điều này làm cho HSL và HSV trực quan hơn cho các tác vụ như tạo tông màu sáng hoặc tối hơn từ cùng một sắc thái.
Việc chuyển đổi giữa các định dạng này đòi hỏi các phép tính được xác định rõ ràng. Đặc tả W3C CSS Color Module Level 4 ghi lại các thuật toán mà trình duyệt sử dụng để phân giải bất kỳ màu CSS nào thành một bộ ba sRGB. Các công thức này mang tính xác định: một đầu vào nhất định luôn tạo ra cùng một đầu ra, vì vậy các chuyển đổi không mất dữ liệu miễn là các giá trị không bị làm tròn hoặc cắt bớt. Hầu hết các bộ chọn màu và công cụ thiết kế đều dựa trên các công thức tương tự.
Tại Sao Sử Dụng Công Cụ Chuyển Đổi Màu Này?
Công cụ thiết kế xuất màu theo một định dạng, CSS của bạn cần một định dạng khác, và API bạn đang gọi lại yêu cầu định dạng thứ ba. Thay vì viết mã chuyển đổi hoặc tìm kiếm công thức đúng, hãy dán giá trị vào và nhận tất cả định dạng cùng một lúc.
Các Trường Hợp Sử Dụng
Tham Chiếu Định Dạng Màu
Bảng dưới đây liệt kê năm định dạng màu phổ biến nhất, với cùng màu indigo (#6366F1) được hiển thị theo mỗi ký hiệu. HEX và RGB được hỗ trợ rộng rãi nhất trong CSS và JavaScript. HSL được ưu tiên cho chủ đề vì việc điều chỉnh độ sáng và độ bão hòa rất đơn giản. HSV là mô hình được hầu hết các bộ chọn màu trong phần mềm thiết kế đồ họa sử dụng.
| Định dạng | Ví dụ (indigo) | Kênh | Sử dụng phổ biến |
|---|---|---|---|
| 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 vs RGB vs HSL
Cả ba định dạng đều mô tả cùng không gian màu sRGB. Sự khác biệt là cách chúng trình bày dữ liệu, ảnh hưởng đến khả năng đọc và tính dễ thao tác trong các ngữ cảnh khác nhau.
Ví Dụ Mã
Chuyển đổi màu giữa HEX, RGB và HSL trong các ngôn ngữ và môi trường phổ biến. Mỗi ví dụ sử dụng cùng màu indigo (#6366F1) để so sánh dễ dàng.
// 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); }