Trình chuyển đổi màu (HEX/RGB/HSL)
Chuyển đổi màu giữa các định dạng HEX, RGB và HSL. Chọn màu trực quan hoặc nhập các giá trị thủ công.
#535bebrgb(83, 91, 235)hsl(237, 79%, 62%)Cách sử dụng công cụ này
- 1
Click the color swatch to open your operating system's color picker and choose a color visually.
- 2
Or type a 6-digit HEX value (such as #535beb, with or without the leading #) into the text field.
- 3
Read the matching rgb(R, G, B) and hsl(H, S%, L%) strings in the result cards below.
- 4
Copy whichever format you need straight into your CSS or design file.
Trình chuyển đổi màu (HEX/RGB/HSL) là gì?
HEX, RGB và HSL là ba cách để biểu diễn cùng một màu. HEX (#RRGGBB) phổ biến nhất trong CSS và các công cụ thiết kế. RGB (rgb(R,G,B)) tách các kênh màu một cách số học. HSL (hsl(H,S%,L%)) trực quan hơn đối với con người: tông màu (hue) là màu sắc, độ bão hòa (saturation) là cường độ và độ sáng (lightness) là độ chói. Hãy dùng HSL khi thiết kế bảng màu; chuyển nó sang HEX khi triển khai.
Các trường hợp sử dụng phổ biến
Translating a brand HEX code from a style guide into the rgb() values a legacy stylesheet or email template requires.
Grabbing the HSL form of a color so you can nudge its lightness or saturation while keeping the same hue for a palette.
Checking the exact RGB channels of a color picked from a screenshot or mockup before writing it into CSS.
Confirming what a designer's HEX swatch becomes in RGB for a canvas, SVG, or charting library that wants numeric channels.
Teaching or learning how hexadecimal color notation maps to decimal RGB and to the HSL model.
Quickly sampling a color visually with the picker and reading all three CSS-ready notations at once.
Câu hỏi thường gặp
Khi nào tôi nên dùng HSL thay vì HEX?▼
Còn OKLCH và các không gian màu hiện đại thì sao?▼
Công cụ liên quan
Trình tạo Box Shadow CSS
Tạo các giá trị box-shadow trong CSS một cách trực quan. Xem trước theo thời gian thực và sao chép CSS được tạo ra.
Bộ tạo dải màu chuyển sắc CSS
Tạo các dải màu chuyển sắc CSS dạng tuyến tính và tỏa tròn. Chọn màu một cách trực quan và sao chép đoạn CSS được tạo ra.
Bộ tạo đường cong gia tốc Cubic Bezier
Tạo các đường cong gia tốc cubic-bezier cho CSS. Bao gồm các giá trị cài sẵn theo chuẩn.
Trình tạo bảng màu
Tạo các bảng màu hài hòa từ bất kỳ màu cơ sở nào. Hỗ trợ các sơ đồ màu bổ túc, tương đồng, bộ ba và đơn sắc.
Trình tạo Border Radius CSS
Tạo các giá trị border-radius phức tạp trong CSS một cách trực quan. Kiểm soát độc lập từng góc.
Trình tạo CSS Clamp()
Tạo các giá trị CSS linh hoạt và đáp ứng với clamp(). Co giãn mượt mà giữa kích thước tối thiểu và tối đa trên các khoảng của viewport.