Chuyển đổi màu
Chuyển đổi giữa HEX, RGB và HSL với xem trước.
Bộ chuyển đổi màu HEX, RGB và HSL cho thiết kế web
Trong thiết kế web và phát triển frontend, màu sắc được biểu diễn ở các mô hình khác nhau tùy ngữ cảnh. Định dạng HEX (#RRGGBB) phổ biến nhất trong CSS nhờ ngắn gọn. Mô hình RGB (Red, Green, Blue) định nghĩa màu bằng cách trộn cộng đỏ, xanh lục và xanh lam với giá trị 0-255, là mô hình gốc của màn hình kỹ thuật số. HSL (Hue, Saturation, Lightness) tổ chức màu trực quan hơn cho nhà thiết kế, cho phép điều chỉnh tông, độ bão hòa và độ sáng độc lập.
Bộ chuyển đổi chuyển bất kỳ màu nào giữa ba định dạng theo thời gian thực. Đặc biệt hữu ích khi làm việc với Figma hoặc Adobe XD xuất màu HEX, nhưng cần RGB cho hoạt ảnh JavaScript, hoặc khi muốn tạo biến thể bằng cách chỉ điều chỉnh độ sáng HSL. Xem trước trực tiếp cho phép xác minh chính xác màu trước khi sao chép.
Bạn có thể nhập giá trị thủ công ở bất kỳ định dạng nào hoặc dùng bộ chọn màu gốc của trình duyệt để chọn trực quan. Mỗi định dạng có nút sao chép đưa giá trị vào clipboard sẵn sàng dùng trong CSS, JavaScript hoặc bất kỳ công cụ thiết kế nào.
Câu hỏi thường gặp
HEX và RGB khác nhau thế nào?
Cả hai đều biểu diễn cùng một màu, chỉ khác ký hiệu. HEX dùng số thập lục phân (hệ 16) theo định dạng #RRGGBB, trong khi RGB dùng số thập phân từ 0 đến 255 cho mỗi kênh. Ví dụ, màu trắng là #FFFFFF trong HEX và rgb(255, 255, 255) trong RGB. HEX ngắn gọn hơn cho CSS, còn RGB dễ thao tác hơn trong lập trình.
Khi nào nên dùng HSL?
HSL lý tưởng khi bạn cần tạo bảng màu hài hòa hoặc biến thể của cùng một tông. Bằng cách tách riêng tông (H), độ bão hòa (S) và độ sáng (L), bạn có thể tạo phiên bản sáng hơn hoặc tối hơn bằng cách chỉ điều chỉnh độ sáng, hoặc phiên bản rực rỡ hoặc nhạt hơn bằng cách thay đổi độ bão hòa, mà không thay đổi tông cơ bản.
Trình duyệt sử dụng mô hình màu nào?
Trình duyệt web hiểu cả ba định dạng: HEX, RGB và HSL trong CSS. Về bản chất, màn hình hoạt động với RGB vì mỗi pixel gồm các điểm ảnh phụ đỏ, xanh lục và xanh lam. Tuy nhiên, CSS hiện đại cũng hỗ trợ các mô hình tiên tiến hơn như oklch và display-p3 cho dải màu rộng hơn trên màn hình HDR.
Muốn tìm hiểu thêm? Đọc hướng dẫn đầy đủ →