Bộ chuyển đổi màu

Bộ chuyển đổi màu là công cụ miễn phí giúp chuyển đổi màu ở định dạng HEX, HEX alpha, RGB, RGBA, HSV, HSL hoặc HSLA sang nhiều định dạng màu tương đương.

Có thể chuyển đổi những định dạng màu nào?

Bạn có thể nhập giá trị HEX, HEX alpha, RGB, RGBA, HSV, HSL hoặc HSLA, sau đó xem giá trị tương ứng ở từng định dạng được hỗ trợ. Tính năng này hữu ích khi thông số thiết kế, biểu định kiểu hoặc API của bên thứ ba biểu diễn cùng một màu theo những cách khác nhau.

• HEX biểu diễn các kênh đỏ, lục và lam bằng những cặp số thập lục phân, thường có dạng #RRGGBB.
• HEX Alpha bổ sung một kênh độ mờ. Trong cú pháp CSS hiện đại, định dạng này thường có dạng #RRGGBBAA.
• RGB sử dụng giá trị của các kênh đỏ, lục và lam, thường nằm trong khoảng từ 0 đến 255.
• RGBA bổ sung độ trong suốt alpha cho RGB.
• HSV mô tả sắc độ, độ bão hòa và giá trị. Định dạng này phổ biến trong các công cụ chọn màu nhưng không phải là hàm màu CSS tiêu chuẩn.
• HSL mô tả sắc độ, độ bão hòa và độ sáng. CSS hỗ trợ trực tiếp HSL.
• HSLA là HSL có thêm giá trị alpha.

RGB và HSL là hai cách mô tả một màu bằng toán học, không phải hai màu khác nhau. Việc chuyển đổi chỉ thay đổi cách biểu diễn, đồng thời giữ màu mong muốn sát nhất trong giới hạn mà định dạng đích cho phép.

Cách dùng Bộ chuyển đổi màu

Nhập một giá trị màu hoàn chỉnh theo một trong các định dạng được chấp nhận vào trường Màu sắc, sau đó xem hoặc sao chép các giá trị được tạo trong những trường kết quả.

1. Sao chép chính xác giá trị nguồn, bao gồm dấu thăng ở đầu, dấu phẩy, dấu ngoặc, dấu phần trăm hoặc thành phần alpha nếu có.
2. Dán giá trị vào trường Màu sắc.
3. Xem các giá trị tương đương hiển thị trong những trường HEX, HEX Alpha, RGB, RGBA, HSV, HSL và HSLA.
4. Chọn một định dạng màu được hệ thống đích hỗ trợ. Với quy tắc CSS, HEX, RGB, RGBA, HSL và HSLA là những lựa chọn phổ biến. HSV thường được dùng nhiều hơn trong giao diện chỉnh sửa và các phép tính màu.

Quá trình chuyển đổi diễn ra trên máy chủ. Dữ liệu bạn nhập được gửi đến máy chủ qua HTTPS và không được lưu trữ. Dù một màu riêng lẻ hiếm khi là thông tin nhạy cảm, hãy cân nhắc liệu bảng màu chưa công bố hoặc bộ mã thông báo thiết kế có phải là dữ liệu mật hay không trước khi gửi đến bất kỳ dịch vụ trực tuyến nào.

Khoảng trắng và dấu câu là một phần của cú pháp RGB, HSL cùng các định dạng liên quan, còn dấu phần trăm dùng để phân biệt giá trị phần trăm. Một con số đứng riêng, giá trị trống hoặc văn bản tùy ý không xác định được màu. Văn bản có dấu và văn bản dùng hệ chữ phi Latin cũng không có ý nghĩa xác định trong các định dạng số này.

Đọc các giá trị sau khi chuyển đổi như thế nào?

Hãy coi mỗi kết quả là một cách ký hiệu khác của cùng một màu, đồng thời chú ý đến phạm vi kênh màu, tỷ lệ phần trăm và độ trong suốt alpha. Trường cần sao chép phụ thuộc vào ký hiệu màu mà hệ thống nhận hỗ trợ.

Trong HEX sáu chữ số, cặp đầu tiên biểu diễn màu đỏ, cặp thứ hai biểu diễn màu lục và cặp thứ ba biểu diễn màu lam. Ví dụ, #336699 chứa các giá trị kênh thập lục phân 33, 66 và 99, tương ứng với các giá trị RGB thập phân 51, 102 và 153.

Sắc độ thường được biểu diễn dưới dạng một góc trên vòng tròn màu. Độ bão hòa, độ sáng hoặc giá trị thường được biểu diễn bằng phần trăm. Độ sáng trong HSL và giá trị trong HSV được tính theo hai cách khác nhau, vì vậy không nên so sánh các tỷ lệ phần trăm này như thể chúng đo cùng một thuộc tính.

Alpha mô tả độ mờ đục. Màu hoàn toàn đục không cần định dạng có hỗ trợ alpha, nhưng màu bán trong suốt thì cần. Nếu sao chép màu RGBA hoặc HSLA sang RGB, HSL hoặc HEX sáu chữ số, định dạng đích sẽ không có chỗ để lưu kênh alpha.

Bộ chuyển đổi này không được mô tả là công cụ xác thực cú pháp có thông báo chẩn đoán chi tiết. Đừng dựa vào công cụ để xác định chính xác ký tự gây lỗi trong dữ liệu nhập sai định dạng. Các lỗi cú pháp màu thường gặp gồm thiếu dấu thăng trong HEX, dấu ngoặc không khớp, thiếu dấu phần trăm, giá trị alpha nằm ngoài phạm vi dự kiến hoặc dùng lẫn quy ước kênh HSL và RGB.

Ví dụ chuyển đổi màu

Ví dụ ngắn sau đây cho thấy mối liên hệ giữa HEX, RGB, HSL và HSV. Màu đỏ thuần có thể được viết bằng các dạng tương đương sau.

• Giá trị HEX đầu vào #ff0000
• Giá trị RGB tương đương rgb(255, 0, 0)
• Giá trị HSL tương đương hsl(0, 100%, 50%)
• Giá trị HSV tương đương hsv(0, 100%, 100%)

Với một màu có độ bão hòa thấp hơn, #336699 tương đương với rgb(51, 102, 153). Dạng HSL của màu này là hsl(210, 50%, 40%), còn dạng HSV có sắc độ 210 độ, độ bão hòa khoảng 66,7% và giá trị 60%. Giao diện có thể làm tròn số thập phân hoặc dùng cách đặt khoảng trắng khác mà không làm thay đổi ý nghĩa thực tế.

Độ trong suốt là một ví dụ đơn giản khác. rgba(255, 0, 0, 0.5) và hsla(0, 100%, 50%, 0.5) đều mô tả màu đỏ với độ mờ 50%. Theo quy ước HEX CSS tám chữ số phổ biến, giá trị tương ứng là #ff000080, trong đó 80 là byte alpha đã được lượng tử hóa.

Khi nào nên chuyển đổi màu?

Nên chuyển đổi màu khi ứng dụng nhận yêu cầu một ký hiệu khác hoặc khi một cách biểu diễn khác giúp gỡ lỗi dễ hơn. Một số trường hợp thường gặp là chuyển giá trị Figma thành thuộc tính tùy chỉnh CSS, kiểm tra giá trị RGBA tìm thấy trong Chrome DevTools, chuẩn bị các trường màu cho tải trọng API hoặc rà soát dữ liệu giao diện của bên thứ ba trước khi triển khai.

Thông thường, bạn không cần chuyển đổi nếu định dạng màu hiện tại đã được hệ thống đích hỗ trợ. Việc đổi HEX sáu chữ số sang RGB chỉ để dùng trong CSS mà máy đọc được không mang lại nhiều lợi ích. Chuyển đổi qua lại cũng có thể gây sai số làm tròn ở các giá trị HSL hoặc HSV. Tương tự, đừng thêm kênh alpha khi biết chắc mọi màu đều hoàn toàn đục.

Nếu cần chọn màu bằng mắt thay vì chuyển đổi một giá trị đã biết, Bộ chọn màu là công cụ trực tiếp hơn. Chuyển đổi màu cũng không thay thế việc kiểm tra độ tương phản, mô phỏng tình trạng rối loạn thị giác màu hoặc quản lý cấu hình màu. Các giá trị số tương đương không chứng minh rằng văn bản tiền cảnh đáp ứng yêu cầu về độ tương phản của WCAG.

Câu hỏi thường gặp

Công cụ có nhận tên màu CSS không?

Không. Các định dạng đầu vào được công bố gồm HEX, HEX alpha, RGB, RGBA, HSV, HSL và HSLA, vì vậy những tên như red, rebeccapurple hoặc transparent không nằm trong danh sách được hỗ trợ. Hãy chuyển tên màu thành giá trị CSS dạng số trước khi nhập.

Tôi có thể nhập mã HEX ba chữ số không?

HEX nằm trong các định dạng đầu vào được chấp nhận, nhưng độ dài HEX được hỗ trợ không được nêu rõ. Để nhận kết quả ổn định, hãy mở rộng dạng viết tắt như #369 thành #336699. Nguyên tắc tương tự cũng áp dụng cho dạng viết tắt bốn chữ số có chứa alpha.

Tôi có thể dán cả khai báo CSS thay vì chỉ giá trị màu không?

Hãy nhập giá trị màu, không nhập toàn bộ khai báo. Ví dụ, dùng #336699 thay cho color: #336699; vì tên thuộc tính và dấu chấm phẩy không phải là một phần của chính giá trị màu. Khi sao chép giá trị từ JSON hoặc tệp cấu hình, hãy bỏ dấu ngoặc kép bao quanh.

Kết quả có giữ lại thông tin dải màu rộng hoặc cấu hình màu không?

Không có định dạng dải màu rộng hoặc cấu hình màu nhúng nào được liệt kê là được hỗ trợ. Display P3, Lab, LCH và dữ liệu cấu hình ICC chứa những thông tin mà các trường HEX, RGB, HSL và HSV hiện có không thể biểu diễn. Hãy dùng ứng dụng có quản lý màu khi cần chuyển đổi có xét đến cấu hình màu.

Tại sao giá trị sau khi chuyển đổi đôi khi có số thập phân?

Các phép tính HSL và HSV có thể tạo ra tỷ lệ phần trăm dạng phân số ngay cả khi các kênh RGB nguồn đều là số nguyên. Làm tròn những con số này có thể khiến kết quả hơi thay đổi khi chuyển đổi ngược về RGB sau đó. Hãy giữ độ chính xác hiện có khi lưu mã thông báo thiết kế và chỉ làm tròn nếu định dạng đích hoặc tiêu chuẩn viết mã yêu cầu.