tigtools

Công cụ chuyển đổi màu

Nhập hoặc dán màu ở bất kỳ định dạng nào được hỗ trợ, hoặc chọn một màu; mọi định dạng còn lại sẽ cập nhật ngay lập tức.

Chạy ngay trên trình duyệt Không cần đăng ký

Đã nhận dạng là HEX.

HEX
#336699
RGB
rgb(51, 102, 153)
HSL
hsl(210, 50%, 40%)
HWB
hwb(210 20% 40%)
OKLCH
oklch(49.93% 0.0987 250.43)
CMYK
cmyk(66.7%, 33.3%, 0%, 40%)

CMYK ở đây được tính bằng công thức đơn giản, không có quản lý màu. Khi in, hãy chuyển đổi bằng hồ sơ ICC do nhà in cung cấp.

Cách sử dụng

  1. Nhập hoặc dán màu, chẳng hạn #1e90ff, rgb(30 144 255) hoặc oklch(65% 0.18 250). Bạn cũng có thể nhấp vào bộ chọn màu.
  2. Kiểm tra ô màu để đảm bảo đó là màu bạn mong muốn.
  3. Sao chép định dạng bạn cần từ danh sách. Các giá trị có độ trong suốt vẫn giữ nguyên alpha.

Cách hoạt động

Định dạng đầu vào được chấp nhận: HEX gồm 3, 4, 6 hoặc 8 chữ số (chữ số thứ 4 và thứ 8 là alpha), rgb() và rgba() với giá trị số hoặc phần trăm, hsl() và hsla(), hwb(), oklch() và cmyk() với giá trị phần trăm hoặc số từ 0 đến 100. Công cụ hỗ trợ cả cú pháp dấu phẩy cổ điển lẫn cú pháp hiện đại dùng dấu cách với “/ alpha”. Hue chấp nhận deg, turn, rad và grad. Công cụ không nhận diện tên màu như “tomato”; hãy dùng bộ chọn màu hoặc nhập mã màu.

Mọi phép chuyển đổi đều thông qua sRGB. HSL và HWB chỉ là các cách biểu diễn lại đơn giản của giá trị RGB nên chuyển đổi chính xác. OKLCH là không gian màu cảm nhận: các bước bằng nhau về độ sáng trông có mức độ khác biệt gần tương đương, rất hữu ích khi tạo bảng màu. Giá trị được tính bằng các ma trận OKLab đã công bố. Một số màu OKLCH nằm ngoài phạm vi hiển thị của sRGB; công cụ sẽ thông báo và hiển thị màu gần nhất có thể hiển thị.

CMYK được tính bằng công thức đơn giản phổ biến (K = 1 − kênh RGB lớn nhất). Kết quả in thực tế phụ thuộc vào giấy, mực và hồ sơ ICC, vì vậy hãy xem các giá trị này là điểm khởi đầu, không phải thông số in ấn.

Ví dụ

Chuyển mã HEX thương hiệu sang CSS

Hướng dẫn thương hiệu cung cấp mã #0b5d1e. Dán mã này để nhận rgb(11, 93, 30) cho CSS đời cũ, hsl(133.9, 78.8%, 20.4%) để tự điều chỉnh độ sáng và giá trị oklch() cho các hàm màu CSS hiện đại.

Đọc màu có độ trong suốt

rgba(0, 0, 0, 0.5) được chuyển thành #00000080. Hai chữ số HEX cuối (80) là alpha: 128 trên 255, tương đương khoảng 50 %.

Kiểm tra giá trị OKLCH từ tệp thiết kế

oklch(70% 0.4 150) là màu xanh lá có độ bão hòa rất cao mà màn hình sRGB không thể hiển thị. Công cụ sẽ cảnh báo và đưa ra màu sRGB gần nhất để bạn biết thiết kế sẽ trông khác trên hầu hết màn hình.

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

Tại sao chuyển sang HSL rồi chuyển lại đôi khi làm HEX thay đổi một mức?

HEX lưu trữ số nguyên từ 0 đến 255 cho mỗi kênh. Giá trị ở các định dạng khác được làm tròn khi hiển thị (HSL đến một chữ số thập phân), nên khi chuyển đổi giá trị đã làm tròn trở lại, kết quả có thể lệch một mức. Hãy sao chép HEX nếu bạn cần giá trị ban đầu chính xác.

Giá trị CMYK có phù hợp để in không?

Không, nếu chỉ dùng giá trị này. Công cụ dùng công thức đơn giản, không áp dụng hồ sơ màu. Máy in sử dụng các hồ sơ như FOGRA hoặc GRACoL để tạo ra các giá trị khác nhau, vì vậy hãy hỏi đơn vị in hoặc chuyển đổi bằng ứng dụng quản lý màu.

OKLCH là gì và tôi có thể dùng trong CSS không?

OKLCH mô tả màu dựa trên độ sáng cảm nhận, sắc độ (độ rực của màu) và hue. Các phiên bản hiện tại của những trình duyệt lớn hỗ trợ oklch() trong CSS. Hãy dùng thêm giá trị HEX hoặc rgb() dự phòng nếu cần hỗ trợ các trình duyệt cũ hơn.

Mã HEX gồm 8 chữ số có nghĩa là gì?

#RRGGBBAA: hai chữ số cuối là độ mờ, từ 00 (hoàn toàn trong suốt) đến ff (hoàn toàn đục). Dạng 4 chữ số #RGBA hoạt động tương tự, với một chữ số cho mỗi kênh.

Quyền riêng tư

Màu được chuyển đổi ngay trong trình duyệt. Nội dung bạn nhập không được gửi đi hoặc lưu trữ.