🎨
Chuyển Đổi Màu Sắc
Live PreviewChuyển đổi giữa các định dạng màu HEX, RGB và HSL.
Supports #hex, rgb(r,g,b), hsl(h,s,l)
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
HSV
hsv(217, 76%, 96%)
Các mô hình màu sắc (HEX/RGB/HSL)
Mô hình màu sắc là các hệ thống toán học để biểu diễn màu sắc. HEX (Thập lục phân) là mã 6 chữ số dùng trong HTML và CSS, đại diện cho các thành phần Đỏ, Xanh lá và Xanh dương. RGB (Đỏ, Xanh lá, Xanh dương) sử dụng giá trị thập phân từ 0 đến 255 cho mỗi kênh, thường dùng trong hình ảnh kỹ thuật số.
HSL (Sắc độ, Độ bão hòa, Độ sáng) trực quan hơn với con người, vì nó mô tả màu sắc theo màu cơ bản (Hue), cường độ (Saturation) và độ sáng (Lightness). Hiểu các mô hình này giúp chọn đúng định dạng cho nhu cầu thiết kế và phát triển, đảm bảo tính nhất quán trên các nền tảng và thiết bị khác nhau.
Cách sử dụng công cụ này
- Dùng bộ chọn màu trực quan để chọn màu bằng cách kéo con trỏ trong ô vuông độ bão hòa/độ sáng và thanh trượt sắc độ.
- Hoặc nhập giá trị cụ thể vào trường «Nhập thủ công» (hỗ trợ định dạng #hex, rgb hoặc hsl).
- Quan sát hộp «Xem trước» để thấy màu đã chọn theo thời gian thực.
- Xem các giá trị đã chuyển đổi trong các thẻ HEX, RGB, HSL và HSV bên dưới.
- Nhấp vào biểu tượng «Sao chép» trên bất kỳ thẻ nào để lưu định dạng đó vào clipboard.
Các trường hợp sử dụng phổ biến
- Thiết kế web: Chuyển đổi màu từ công cụ thiết kế (thường RGB/HSL) sang mã HEX để dùng trong stylesheet CSS.
- Nhất quán thương hiệu: Đảm bảo màu thương hiệu được thể hiện chính xác trên các định dạng kỹ thuật số và phương tiện khác nhau.
- Phát triển UI: Nhanh chóng tạo các biến thể sáng hơn hoặc tối hơn của màu cơ bản bằng cách điều chỉnh giá trị Lightness trong HSL.
- Kiểm tra khả năng tiếp cận: Dùng xem trước để kiểm tra xem màu đã chọn có đủ độ tương phản cho văn bản có thể đọc và các phần tử UI không.
Mẹo chuyên nghiệp
- Dùng HSL khi thiết kế các thành phần UI như nút, vì dễ dàng tạo trạng thái hover bằng cách điều chỉnh giá trị lightness.
- Khi làm việc với độ trong suốt trong CSS, ưu tiên
rgba()hoặchsla()để dễ đọc và kiểm soát kênh alpha tốt hơn. - Luôn kiểm tra tỷ lệ tương phản màu sắc để đảm bảo thiết kế của bạn dễ tiếp cận với người dùng có khiếm khuyết thị giác.