Bộ chuyển đổi Màu
Chuyển đổi bất kỳ màu nào giữa HEX, RGB, HSL, HSV và CMYK. Chọn một màu hoặc gõ một giá trị ở bất kỳ định dạng nào — mọi cách viết còn lại đều cập nhật tức thì, ngay trong trình duyệt của bạn.
HEX
RGB
HSL
HSV
hsv(18, 95%, 96%)
CMYK
cmyk(0%, 66%, 95%, 4%)
Cách sử dụng Bộ chuyển đổi Màu
- 1
Chọn hoặc dán một màu
Nhấp vào ô màu để mở bộ chọn màu, hoặc dán một giá trị vào ô HEX, RGB hoặc HSL. Toàn bộ công cụ sẽ đi theo bất kỳ màu nào bạn chọn.
- 2
Chỉnh sửa ở bất kỳ định dạng nào
Gõ trực tiếp vào ô HEX, RGB hoặc HSL. Mọi cách viết còn lại — bao gồm cả HSV và CMYK — sẽ được tính lại ngay khoảnh khắc bạn thay đổi.
- 3
Đọc mọi cách biểu diễn
Xem cùng một màu được thể hiện theo năm cách cùng lúc, để bạn có thể khớp màu cho một thiết kế trên CSS, bản in và các trình chỉnh sửa ảnh mà không cần đến công cụ thứ hai.
- 4
Sao chép thứ bạn cần
Dùng nút sao chép bên cạnh bất kỳ giá trị nào để đưa nó vào khay nhớ tạm, sẵn sàng để thả vào stylesheet hay tệp thiết kế của bạn.
Hướng dẫn thực dụng về các định dạng màu
Cùng một màu, những cách viết khác nhau
HEX, RGB, HSL, HSV và CMYK không phải là những màu khác nhau; với công việc trên màn hình, chúng chỉ là những cách viết khác nhau cho cùng một điểm trong không gian màu. Màu đỏ thuần có thể được viết là #ff0000, rgb(255, 0, 0) hay hsl(0, 100%, 50%), và cả ba đều hiển thị giống hệt nhau. Việc chọn một cách viết thực chất là chọn cách nào dễ suy luận nhất cho công việc trước mắt, và đó chính là lý do một bộ chuyển đổi hiển thị chúng cạnh nhau giúp tiết kiệm thời gian thật sự. Bạn chọn định dạng phù hợp với công cụ của mình rồi sao chép, thay vì phải tính toán bằng tay.
Ngoại lệ duy nhất là CMYK, vốn nhắm tới mực in thay vì ánh sáng, nên không ánh xạ hoàn hảo sang các định dạng còn lại — một điểm đáng ghi nhớ và là điều chúng ta sẽ quay lại ở phần dưới.
HEX và RGB là cùng những con số
RGB mô tả một màu bằng ba kênh — đỏ, lục và lam — mỗi kênh trải từ 0 đến 255, được trộn dưới dạng ánh sáng. HEX đơn giản là chính ba con số đó được viết theo hệ cơ số mười sáu, hai chữ số hex cho mỗi kênh. Vậy nên trong #f5530c thì f5 là kênh đỏ, tức 245, 53 là lục, tức 83, và 0c là lam, tức 12, cho ra đúng rgb(245, 83, 12). Vì một byte chứa các giá trị từ 0 đến 255, mỗi kênh cần đúng hai chữ số hex, và phép chuyển đổi giữa hai định dạng là trực tiếp và không mất mát thông tin.
HEX rút gọn là một tiện ích: một mã ba chữ số sẽ nhân đôi mỗi chữ số, nên #f50 mở rộng thành #ff5500. Công cụ này đọc dạng rút gọn theo đúng cách trình duyệt làm, và chấp nhận mã có hoặc không có dấu thăng ở đầu, viết hoa hay viết thường đều được.
Kênh alpha: RGBA và HSLA
Thêm một kênh alpha sẽ khiến màu trở nên trong suốt một phần. RGBA và HSLA bổ sung một giá trị thứ tư, độ mờ đục từ 0 (hoàn toàn trong suốt) đến 1 (hoàn toàn đục), nên rgba(245, 83, 12, 0.5) chính là sắc cam đó ở mức nửa độ đục. CSS hiện đại cũng hỗ trợ HEX tám chữ số, trong đó hai chữ số cuối mã hóa alpha dưới dạng một byte, nên alpha bằng một nửa tương đương cặp hex 80 nối thêm vào màu.
Alpha là thứ cho phép một màu hòa quyện với bất cứ gì nằm phía sau nó, điều thiết yếu cho các lớp phủ, lớp che mờ, bóng mềm và hiệu ứng kính phủ màu. Hãy nhớ rằng cùng một alpha sẽ trông khác nhau trên các nền khác nhau, bởi độ trong suốt nghĩa là diện mạo cuối cùng là sự pha trộn giữa màu của bạn và lớp bên dưới.
Vì sao HSL dễ tinh chỉnh hơn
HSL mô tả một màu theo cách con người vẫn nghĩ về nó: hue (sắc màu) là vị trí trên vòng tròn màu từ 0 đến 360 độ, saturation (độ bão hòa) là mức độ rực rỡ tính theo phần trăm, và lightness (độ sáng) là mức độ tươi sáng tính theo phần trăm. Cấu trúc đó khiến việc điều chỉnh thủ công trở nên trực quan. Muốn có một sắc tối hơn của cùng một màu, bạn hạ độ sáng xuống và giữ nguyên hue cùng saturation; muốn làm dịu một màu, bạn hạ độ bão hòa. Làm điều tương đương trong RGB thô nghĩa là phải thay đổi cả ba kênh một cách đồng bộ, một việc khó áng chừng bằng mắt hơn nhiều.
Đây là lý do HSL tỏa sáng khi xây dựng các hệ thống màu. Bạn muốn một trạng thái hover tối hơn màu nền một chút, hay một hàng ô màu cùng chung hue nhưng bước qua các mức độ sáng khác nhau? Chỉ cần nhích một con số HSL. HSV, còn được viết là HSB, có quan hệ mật thiết nhưng ghép hue và saturation với value (giá trị), tức độ chói, thay vì độ sáng, và đây là mô hình mà nhiều trình chỉnh sửa ảnh cùng bộ chọn màu phơi bày ra, nên việc đọc được cả hai giúp bạn thông thạo khi di chuyển giữa các công cụ thiết kế.
Ví dụ thực tế: trắng, đen và một màu trung gian
Hai đầu mút thì rất gọn gàng. Trắng là #ffffff, tức rgb(255, 255, 255) và hsl(0, 0%, 100%): mọi kênh đều đạt cực đại, hay nói theo HSL là độ sáng đầy đủ với không độ bão hòa nên hue trở nên không liên quan. Đen là #000000, rgb(0, 0, 0) và hsl(0, 0%, 0%): mọi thứ đều bằng không. Một màu xám trung gian nằm ngay giữa, gần #808080 và rgb(128, 128, 128), trong HSL là hsl(0, 0%, 50%), minh họa rất rõ rằng mọi màu trung tính đều có độ bão hòa bằng không và một độ sáng bám theo độ chói của nó.
Bây giờ đến một màu thật: chính sắc cam đó, #f5530c, đọc ra là rgb(245, 83, 12) và xấp xỉ hsl(18, 92%, 50%). Dạng HSL cho bạn thấy trong nháy mắt rằng đó là một hue ấm gần đỏ-cam, độ bão hòa cao và ở mức sáng trung bình — thông tin mà chuỗi hex giấu kín. Hãy dán bất kỳ giá trị nào trong số này vào công cụ và xem các định dạng còn lại tự điền vào ngay lập tức.
CMYK và những giới hạn khi đi từ màn hình ra bản in
CMYK là viết tắt của cyan (lục lam), magenta (đỏ tươi), yellow (vàng) và key, trong đó key là màu đen, và nó là một mô hình trừ được xây dựng cho mực trên giấy chứ không phải ánh sáng trên màn hình. Vì hoạt động bằng cách trừ bớt ánh sáng mà giấy phản chiếu, nó không thể tái tạo mọi màu rực rỡ mà một màn hình phát sáng làm được, nên một màu lam hay lục chói lọi trên màn hình thường ra in xỉn hơn. Các giá trị CMYK mà công cụ này báo cáo là kết quả chuyển đổi toán học trực tiếp từ RGB và thật sự hữu ích như một điểm khởi đầu, nhưng chúng không thể thay thế cho một quy trình in được quản lý màu.
Với công việc in đòi hỏi chính xác về màu, hãy luôn đối chiếu với hồ sơ ICC thực tế của máy in và một bản in thử, bởi thiết bị, giấy và mực đều làm xê dịch kết quả. Hãy xem đầu ra CMYK ở đây là một ước tính nhanh, chứ không phải một sự bảo đảm.
Màu có tên và bước nhảy sang gam màu rộng
CSS còn đi kèm khoảng 150 màu có tên, những từ như tomato, rebeccapurple và slategray, mỗi từ chỉ đơn giản là một bí danh cho một giá trị hex cụ thể. Chúng tiện lợi cho việc dựng mẫu nhanh và cho những sắc màu dễ nhớ, dù với một hệ thống thiết kế thực thụ thì các giá trị hex hoặc HSL tường minh sẽ cho bạn quyền kiểm soát và sự nhất quán tinh tế hơn. Màu có tên là những nhãn dán tiện dụng, không phải một không gian màu riêng biệt.
Nhìn về phía trước, các hàm màu CSS mới hơn đang vượt ra ngoài gam màu sRGB cổ điển mà những định dạng này mặc định. Các hàm cho những không gian như oklch (đồng đều về cảm nhận) và display-p3 (rộng hơn) có thể biểu đạt những màu bão hòa hơn mức HEX và RGB vươn tới được, điều ngày càng quan trọng khi màn hình hiện đại ngày một mạnh hơn. Các giá trị HEX, RGB, HSL và HSV mà công cụ này xử lý vẫn là đồng tiền chung hằng ngày của web, và việc thấu hiểu chúng là nền tảng để tự tin tiếp nhận những không gian màu mới hơn đó.
Câu hỏi thường gặp
Làm thế nào để chuyển một màu HEX sang RGB?
Sự khác biệt giữa HSL và HSV là gì?
Công cụ này có hỗ trợ HEX rút gọn 3 chữ số không?
CMYK được dùng để làm gì?
Dữ liệu của tôi có được tải lên máy chủ không?
Công cụ liên quan
Tiếp tục với những công cụ hữu ích này