devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Công cụ Màu sắc

Bộ chuyển đổi màu

Dán bất kỳ màu CSS nào — HEX, rgb(), hsl(), hwb(), oklch() hoặc tên màu như tomato — và nhận ngay mọi định dạng còn lại, kèm bảng màu 50–950 sẵn sàng sử dụng.

Chạy trong trình duyệt · không tải lên gì
#4f46e5
Thử:

Tất cả định dạng

Bảng tông màu sáng & tối (50–950)

Tùy chọn
Công cụ này có hữu ích không?Hãy là người đầu tiên đánh giá

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

  1. Nhập hoặc dán màu vào ô Giá trị màu — mọi định dạng CSS đều được — hoặc chọn màu bằng công cụ chọn màu.
  2. Điều chỉnh Độ mờ nếu bạn cần độ trong suốt; giá trị HEX 8 chữ số và / alpha sẽ tự động cập nhật.
  3. Nhấn Sao chép bên cạnh định dạng bạn cần. Chuyển sang cú pháp Legacy nếu dự án của bạn dùng rgba(…, …) với dấu phẩy.
  4. Cuộn xuống bảng màu để xem 11 tông màu (tint) và sắc độ (shade); chọn đầu ra dạng biến CSS, Tailwind v4, SCSS hoặc JSON rồi sao chép hoặc tải xuống.

Bộ chuyển đổi màu là gì?

Bộ chuyển đổi màu giúp đổi một màu sang các cách viết khác nhau mà CSS và công cụ thiết kế sử dụng. Cùng một màu chàm có thể viết là #4f46e5, rgb(79 70 229), hsl(243.4 75.4% 58.6%) hoặc oklch(51.06% 0.2301 276.97) — tất cả đều mô tả cùng một màu sRGB. Nhà thiết kế bàn giao mã HEX từ Figma, thư viện component lại cần kênh HSL, còn hệ thống thiết kế hiện đại có thể viết bằng OKLCH, nên việc chuyển đổi nhanh và chính xác là công việc thường ngày.

Các định dạng được hỗ trợ

Định dạngVí dụPhù hợp với
HEX (3, 4, 6, 8 chữ số)#4f46e5, #4f46e580Định dạng bàn giao phổ biến nhất. Cặp chữ số thứ 4/8 là alpha: 80 ≈ 50%.
RGB / RGBArgb(79 70 229 / 0.5)Tính toán kênh màu, canvas, mã rgba() cũ.
HSL / HSLAhsl(243 75% 59%)Chỉnh nhanh sắc độ (hue), độ bão hòa và độ sáng.
HWBhwb(243 27% 10%)Trộn màu thuần với trắng và đen — trực quan khi chọn màu.
OKLCHoklch(51% 0.23 277)Bảng màu đều về mặt cảm nhận và design token (Tailwind CSS v4 dùng OKLCH cho bảng màu).
CMYKcmyk(66%, 69%, 0%, 10%)Điểm khởi đầu đại khái cho in ấn — xem ghi chú bên dưới.
Tên màutomato, rebeccapurpleNhận diện đủ 148 từ khóa màu CSS; công cụ cũng hiển thị tên màu gần nhất với mọi màu.

Vì sao nên học OKLCH

Trong HSL, màu vàng có “độ sáng 50%” trông sáng hơn hẳn màu xanh dương 50%, vì HSL chỉ là phép biến đổi hình học đơn giản từ RGB. OKLCH được xây dựng trên mô hình OKLab, được thiết kế để các bước bằng nhau ở L (độ sáng) cũng trông bằng nhau với mắt người; C là chroma (độ rực màu) và H là góc sắc độ. Nhờ vậy, OKLCH rất phù hợp để tạo các sắc độ nhất quán, trạng thái hover và cặp màu đạt chuẩn truy cập. OKLCH cũng có thể mô tả màu ngoài sRGB (ví dụ Display P3); khi bạn nhập màu như vậy, công cụ sẽ đưa về sRGB và đánh dấu cho bạn.

Cách tạo bảng màu 50–950

Bảng màu giữ nguyên sắc độ của màu bạn chọn và tính toán trong OKLCH: mỗi bước có một mục tiêu độ sáng cố định (từ rất sáng 50 đến rất tối 950) cùng một phần độ rực của màu gốc, được giảm khi cần để mọi ô màu nằm trong sRGB. Khi bật Giữ đúng màu của tôi, màu bạn nhập sẽ thay thế bước có độ sáng gần nhất, nhờ đó màu thương hiệu xuất hiện nguyên vẹn trong thang màu. Cần kiểm tra độ tương phản của các cặp màu trong bảng? Hãy dùng Contrast Checker.

Lưu ý về CMYK

Chuyển đổi từ màn hình sang in ấn phụ thuộc vào mực, giấy và hồ sơ ICC mà máy in của bạn sử dụng. Các giá trị CMYK ở đây dùng công thức chuẩn chưa hiệu chỉnh (K = 1 − max(R, G, B)), phù hợp cho bản mô phỏng nhưng không phù hợp cho ấn phẩm quan trọng về thương hiệu — hãy nhờ nhà in chuyển đổi theo hồ sơ màu.

Dùng màu trong Webflow

Dán giá trị HEX vào bộ chọn màu của Webflow hoặc vào một Color variable (bảng Variables). Tạo một biến cho mỗi bước của bảng màu — ví dụ Brand 50 … Brand 950 — sẽ cho bạn cấu trúc token giống đầu ra biến CSS, nhờ đó các class có thể tham chiếu đến sắc độ thay vì giá trị cố định.

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

Cách đổi HEX sang RGB bằng tay?
Tách sáu chữ số thành ba cặp và đổi từng cặp từ hệ 16 sang hệ 10. Với #4F46E5: 4F = 79, 46 = 70, E5 = 229, nên màu là rgb(79 70 229). Mã 3 chữ số như #f60 thì nhân đôi từng chữ số trước (#ff6600).
Mã HEX 8 chữ số có nghĩa là gì?
Hai chữ số cuối là kênh alpha (độ mờ), từ 00 (trong suốt hoàn toàn) đến ff (đặc hoàn toàn). #4f46e580 là màu chàm với độ mờ 128/255 ≈ 50%. Mọi trình duyệt hiện đại đều hỗ trợ HEX 4 và 8 chữ số.
Nên dùng OKLCH thay vì HEX hay HSL không?
Với design token và các sắc độ được tạo tự động, OKLCH thường tốt hơn vì độ sáng của nó đồng đều về mặt cảm nhận và có thể biểu diễn các màu gam rộng. Hiện tất cả trình duyệt lớn đều hỗ trợ. HEX vẫn là định dạng linh hoạt nhất khi bàn giao và với các công cụ cũ.
Vì sao giá trị HSL của tôi thay đổi một chút sau khi chuyển đổi?
Màu trên màn hình được lưu dưới dạng RGB 8-bit (0–255 mỗi kênh), nên nhiều giá trị HSL làm tròn về cùng một màu RGB. Công cụ hiển thị HSL với một chữ số thập phân để khi chuyển ngược lại vẫn ra đúng mã HEX.
HSL và HWB khác nhau thế nào?
Cả hai đều dùng góc sắc độ. HSL sau đó đặt độ bão hòa và độ sáng, còn HWB cho biết cần trộn bao nhiêu trắng và đen vào màu thuần — hwb(0 0% 0%) là đỏ thuần, còn hwb(0 50% 0%) là đỏ trộn 50% trắng (hồng). HWB thường dễ hình dung hơn khi dùng bộ chọn màu.
Tôi có thể cài Bộ chuyển đổi màu như một ứng dụng web và dùng khi không có mạng không?
Có. Bộ chuyển đổi màu là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.

Công cụ liên quan

Tạo CSS GradientThiết kế gradient trực quan: kéo các điểm màu, đổi góc hoặc kiểu, chọn sẵn một mẫu có sẵn rồi sao chép CSS …Trình tạo Box ShadowXếp nhiều lớp bóng đổ, chỉnh độ lệch, blur, spread và độ mờ ngay trên thẻ xem trước, rồi sao chép CSS box-…Chuyển đổi hệ cơ sốNhập một số ở bất kỳ cơ số nào và xem ngay kết quả ở tất cả các cơ số còn lại. Xem số có dấu 8–64 bit theo …