Phát triển Web

Color Converter

Chuyển đổi màu giữa HEX, RGB, HSL, HSV/HSB và CMYK — nhập giá trị vào bất kỳ trường nào, các trường còn lại sẽ cập nhật ngay lập tức.

The same color can be written differently depending on context: HEX and RGB are convenient for code, HSL is intuitive for picking a hue and lightness, and CMYK is for print. This tool converts between all of them at once.

How to use it

Which format to use when

Things to keep in mind

CMYK on screen is only an approximation — the exact printed color depends on the printer, paper, and color profile used.

Conversion between color spaces isn't always exact for extreme, highly saturated colors, due to differences in gamut coverage between models.

Bài viết về công cụ này: HEX, RGB, HSL: vì sao có nhiều cách viết một màu đến vậy

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

Công cụ chuyển đổi xử lý kênh alpha (độ trong suốt) như thế nào?

Alpha được hỗ trợ trong HEX (#RRGGBBAA), RGBA và HSLA — bất cứ gì bạn nhập sẽ được chuyển sang các định dạng khác hỗ trợ độ trong suốt, trong khi các định dạng không có kênh alpha, như CMYK thông thường, đơn giản là bỏ qua nó.

Vì sao giá trị hơi thay đổi sau khi chuyển sang CMYK rồi quay lại HEX?

CMYK là mô hình hướng đến in ấn không có công thức cố định duy nhất để chuyển đổi qua lại với RGB, nên một vòng chuyển đổi có thể làm lệch giá trị một hoặc hai đơn vị do sai số làm tròn; về mặt thị giác màu sắc gần như vẫn giữ nguyên.

Dữ liệu màu của tôi có được gửi đi đâu không?

Không, mọi chuyển đổi diễn ra cục bộ trong trình duyệt của bạn bằng JavaScript — không có gì được tải lên máy chủ.

OKLCH khác HSL như thế nào?

OKLCH mô tả một màu qua độ sáng (L), sắc lượng (C) và sắc độ (H), nhưng khác với HSL, nó tính đến cách mắt người thực sự cảm nhận độ sáng — thay đổi L trong OKLCH không làm méo độ bão hòa cảm nhận được của màu, nên các chuyển tiếp giữa các sắc độ trông đều hơn.

Một màu "ngoài gamut" (out of gamut) nghĩa là gì?

Một số màu trong các không gian rộng như OKLCH hay Display P3 không thể tái tạo về mặt vật lý trên các màn hình chỉ hỗ trợ sRGB — khi đó trình duyệt sẽ thay bằng màu gần nhất có sẵn trong dải màu được hỗ trợ.

Bài viết: Phát triển Web

Rút gọn CSS: điều gì thực sự bị loại bỏ khỏi tệp và vì sao

Vì sao CSS đã rút gọn hoạt động chính xác như cũ trong trình duyệt, dù trở nên khó đọc với con người.

Rút gọn JavaScript: sự khác biệt giữa rút gọn và làm rối mã

Vì sao mã đã rút gọn vẫn có thể đọc được nếu muốn, còn mã đã làm rối thì không.

Rút gọn HTML: vì sao khoảng trắng trong markup lại có ý nghĩa

Vì sao loại bỏ khoảng trắng bên trong <pre> hoặc một textarea có thể phá vỡ giao diện trang, khác với hầu hết mọi nơi khác.

Gradient CSS: linear khác gì với radial và conic

Vì sao conic-gradient phù hợp với biểu đồ tròn, còn radial-gradient tạo hiệu ứng vệt sáng.

Thuật toán Luhn: cách kiểm tra tính đúng đắn của số thẻ

Vì sao một số thẻ vượt qua kiểm tra Luhn không có nghĩa là thẻ đó thực sự tồn tại.

IBAN: cấu trúc của một số tài khoản ngân hàng quốc tế

Vì sao hai chữ cái đầu tiên của IBAN là mã quốc gia, không phải một phần của số tài khoản.

Mã QR: một liên kết vừa vặn trong ô vuông điểm ảnh như thế nào

Vì sao một mã QR có logo ở giữa vẫn quét được dù một phần hoa văn bị che.

Mã vạch: Code 128 khác gì với EAN-13

Vì sao sản phẩm trên kệ hàng gần như luôn dùng EAN-13 thay vì Code 128.

Ảnh placeholder: vì sao ảnh giả lại quan trọng trong quá trình phát triển

Vì sao các nhà phát triển cố tình chèn hình chữ nhật xám thay vì ảnh thật khi một bố cục vẫn đang được xây dựng.