Chuyển đổi Màu

Chuyển đổi Màu - Chuyển đổi giữa các định dạng màu

Công cụ chuyển đổi màu mạnh mẽ chuyển đổi giữa các định dạng màu HEX, RGB, HSL và CMYK. Có color picker với xem trước trực tiếp, copy màu vào clipboard và phát hiện độ sáng màu. Hoàn hảo cho web developers, designers và bất kỳ ai làm việc với màu sắc.

Làm sao chuyển HEX sang RGB hoặc RGB sang HEX?

Dán giá trị HEX (có hoặc không có dấu # đầu) vào ô HEX, hoặc gõ ba số vào các ô R, G, B, và mọi định dạng khác cập nhật ngay khoảnh khắc đầu vào hợp lệ. Phép toán đơn giản: HEX chỉ là RGB cơ số 16, nên #FF5733 chia thành các cặp FF/57/33 bằng 255/87/51 ở hệ thập phân. Theo chiều ngược lại, mỗi kênh RGB chia cho 16 cho ra một chữ số hex và phần dư cho chữ số kế tiếp; công cụ xử lý cả hai chiều chuyển đổi và cả ký hiệu rút gọn 3 chữ số (#F57 mở rộng thành #FF5577). Dùng HEX khi viết CSS bằng tay, RGB khi thao tác màu trong JavaScript hoặc cho kênh alpha (rgba(255,87,51,0.8) cho 80% độ mờ, mà HEX không diễn đạt gọn cho đến khi dùng cú pháp 8 chữ số #FF5733CC).

Khi nào nên dùng HSL thay vì HEX hoặc RGB?

HSL là định dạng ánh xạ với cách designer nghĩ về màu: chọn một tông từ cầu vồng, rồi quyết định nó sống động cỡ nào (saturation) và sáng cỡ nào (lightness). Dùng HSL khi cần dẫn xuất các biến thể của cùng một màu — để làm trạng thái hover tối hơn 10%, giữ cùng H và S và giảm L đi 10%; kết quả tự động cùng tông. Làm điều này trong HEX hoặc RGB đòi hỏi tung hứng cả ba kênh và thường lệch tông ngẫu nhiên. HSL cũng là xương sống của dải màu trong hệ thống thiết kế (Tailwind, Material, Radix), CSS custom properties cho theme, và mọi animation chuyển giữa các màu liên quan. CSS hiện đại còn hỗ trợ hsl() trực tiếp không cần chuyển: color: hsl(9 100% 60%);.

Tại sao giá trị CMYK của tôi trông nhạt hơn phiên bản RGB trên màn hình?

RGB là mô hình màu cộng được dùng bởi thiết bị phát sáng (màn hình, điện thoại, máy chiếu), nơi cộng cả ba kênh tối đa tạo trắng tinh. CMYK là mô hình trừ dùng bởi mực trên giấy, nơi cộng bốn loại mực trừ ánh sáng để tạo gần đen. Các không gian màu hiển thị chồng lấp nhưng không giống nhau: một màu xanh dương sống động trên màn hình hoặc xanh lá neon không thể tái tạo bằng bất kỳ tổ hợp mực CMYK nào, nên chuyển đổi toán học cắt vào dải có thể in và kết quả trông trầm. Đây là vật lý cơ bản, không phải bug. Cho công việc in chuyên nghiệp, thiết kế trực tiếp trong CMYK ngay từ đầu trong phần mềm như Adobe InDesign hoặc Affinity Publisher dùng hồ sơ màu ICC khớp với máy in; đừng bao giờ tin tưởng xem trước CMYK tự động trên màn hình như bản cuối.

Độ sáng màu được tính thế nào và tại sao quan trọng?

Giá trị Độ sáng dùng công thức YIQ / ITU-R BT.601 0.299 × R + 0.587 × G + 0.114 × B áp lên các kênh sRGB thô (chưa tuyến tính hóa), có trọng số mỗi kênh theo mức độ mắt người phản ứng. Xanh lá chiếm ưu thế vì tế bào hình nón ở võng mạc nhạy nhất với bước sóng phổ giữa; đỏ trung gian; xanh dương đóng góp ít nhất. Kết quả là số từ 0 (đen tinh) tới 255 (trắng tinh), và công cụ dùng ngưỡng 128 làm heuristic nhanh sáng/tối để chọn chữ sáng hay tối.

Lưu ý quan trọng: độ sáng YIQ này KHÔNG phải độ chói tương đối WCAG. Độ chói WCAG 2.1 thật sự trước tiên tuyến tính hóa gamma từng kênh rồi mới có trọng số 0.2126 R + 0.7152 G + 0.0722 B; tỷ lệ tương phản dẫn ra từ nó mới thực sự quyết định việc tuân thủ khả năng tiếp cận. Đó là lý do công cụ này nay báo cả hai — độ sáng YIQ nhanh cho phán đoán sáng/tối thô, và một tỷ lệ tương phản WCAG riêng kèm phù hiệu Đạt/Không Đạt AA / AA Lớn / AAA cho kiểm tra khả năng tiếp cận thực sự.

Tôi cần đạt tỷ lệ tương phản WCAG nào (AA so với AAA)?

WCAG 2.1 quy định tỷ lệ tương phản tối thiểu giữa text (hoặc thành phần UI) và nền của nó, biểu thị bằng tỷ lệ từ 1:1 (không tương phản) đến 21:1 (đen tinh trên trắng tinh):

- AA, text thường: 4.5:1 — mức cơ bản mà hầu hết website phải đạt cho nội dung thân bài dưới khoảng 18pt (24px) thường hoặc 14pt (18,66px) đậm.
- AA, text lớn: 3:1 — áp dụng cho text từ 18pt thường / 14pt đậm trở lên, và cả đối tượng đồ họa và đường viền thành phần UI đang hoạt động (Tiêu chí Thành công 1.4.11).
- AAA, text thường: 7:1 — mức nâng cao cho text thường; text lớn ở AAA cần 4.5:1.

Công cụ này tính độ chói tương đối WCAG thật của màu bạn, rồi tỷ lệ tương phản của nó so với #FFFFFF và #000000, chọn màu chữ cho tương phản cao hơn, và hiển thị phù hiệu Đạt hoặc Không Đạt AA / AA Lớn / AAA. Kiểm tra nhanh: #767676 là màu xám sáng nhất vẫn đạt 4.5:1 trên nền trắng, trong khi #777777 thiếu chút ít (khoảng 4.48:1) và không đạt AA cho text thân bài dù đạt ngưỡng text lớn 3:1.

Làm sao giữ màu sắc dùng được cho người mù màu?

Khoảng 8% nam giới và 0,5% nữ giới có một dạng khiếm khuyết thị giác màu, phổ biến nhất là loại đỏ-lục: deuteranopia/deuteranomaly (giảm cảm nhận xanh lá) và protanopia/protanomaly (giảm cảm nhận đỏ), với tritanopia hiếm hơn ảnh hưởng xanh dương-vàng. Các quy tắc thực tế:

- Đừng bao giờ chỉ dựa vào tông màu để truyền tải ý nghĩa. Kết hợp màu với nhãn chữ, biểu tượng, hoa văn hoặc vị trí — một chấm trạng thái đỏ/lục là vô hình với nhiều người trừ khi bạn thêm hình dạng hoặc chữ.
- Giữ tương phản độ chói mạnh. Hai màu chỉ khác về tông mà không khác độ sáng có thể sụp về cùng một màu xám với người mù màu, nên tỷ lệ tương phản WCAG hiển thị ở đây là lưới an toàn tốt nhất của bạn.
- Tránh các cặp gây vấn đề như đỏ-trên-lục, lục-trên-nâu và xanh dương-trên-tím cho các thành phần kề hoặc chồng nhau.

Kiểm tra một giá trị HEX ở đây, xác nhận nó đạt ngưỡng tương phản bạn cần, rồi xem trước toàn bộ bảng màu trong trình mô phỏng mù màu trước khi phát hành.

Khác biệt giữa mã HEX 3 chữ số và 6 chữ số là gì?

HEX 3 chữ số như #F57 là viết tắt cho giá trị 6 chữ số #FF5577, với mỗi chữ số nhân đôi. Cách này hoạt động vì mỗi cặp chữ số hex giống nhau đại diện cùng một byte (FF = 255, 77 = 119), nên viết tắt gộp các cặp lặp thành chữ số đơn. Viết tắt chỉ đạt 4.096 màu (16^3) so với 16,7 triệu có sẵn ở ký hiệu 6 chữ số, nên ổn cho các màu nguyên web-safe đặc và xám tinh (#000, #FFF, #888) nhưng không thể biểu diễn hầu hết màu thương hiệu tinh tế. Dùng viết tắt để giữ stylesheet nhỏ gọn và ký hiệu 6 chữ số ở mọi nơi khác. CSS cũng chấp nhận viết tắt 4 chữ số (#F57C = #FF5577CC) và ký hiệu 8 chữ số (#FF5577CC) cho màu có kênh alpha, dù công cụ này tập trung vào chuyển đổi màu đục HEX/RGB/HSL/CMYK.

Tại sao HEX thương hiệu chính xác của tôi hiển thị khác nhau chút giữa các thiết bị?

Trình duyệt mặc định render màu trong không gian sRGB, nhưng pixel thực bạn thấy phụ thuộc vào hiệu chuẩn màn hình, công nghệ tấm (IPS vs OLED vs TN cũ), cài đặt độ sáng, ánh sáng môi trường, và hệ điều hành có áp dụng hồ sơ gamut rộng như Display P3 không. Hai màn hình cùng nhìn #1A73E8 có thể hiện ra các sắc xanh dương khác nhau tinh tế, và cùng một màn hình có thể đổi theo ngày khi chế độ đêm tông ấm kích hoạt. Cho nhất quán thương hiệu, định nghĩa token màu một lần trong HEX hoặc HSL, ghi tài liệu với tên ngữ nghĩa, và tin rằng biến động có giới hạn — sRGB vẫn bao quát khoảng 35% phổ nhìn thấy và là mẫu số chung phổ quát thấp nhất. Cho màu phải khớp giữa in và màn hình, dùng đầu ra CMYK ở đây làm điểm khởi đầu và chạy thử in trước khi cam kết.

Có thể biểu diễn độ trong suốt hoặc kênh alpha trong HEX không?

Có, trình duyệt hiện đại hỗ trợ HEX 8 chữ số (#RRGGBBAA) nơi hai chữ số cuối mã hóa kênh alpha từ 00 (trong suốt hoàn toàn) đến FF (đục hoàn toàn). Ví dụ #FF5733CC là cùng màu #FF5733 ở khoảng 80% độ đục (CC = 204 / 255). Viết tắt 4 chữ số #F57C mở rộng cùng cách. Tuy nhiên, cú pháp cũ rgba() (rgba(255, 87, 51, 0.8)) vẫn dễ đọc hơn, được hỗ trợ rộng hơn trong client email cũ, và dễ thao tác hơn qua JavaScript hoặc CSS custom properties vì alpha là trường thập phân tách biệt. Dùng HEX 8 chữ số khi muốn token đơn tự chứa; dùng rgba() khi alpha biến đổi độc lập với màu gốc, ví dụ làm mờ màu thương hiệu trong chuyển tiếp hover. Lưu ý công cụ này chỉ làm việc với màu đục — bạn tự thêm các chữ số alpha sau khi đã có HEX gốc ở đây.

Chuyển RGB sang HSL chính xác đến đâu và những trường hợp biên nào cần để ý?

Chuyển đổi là không mất mát về mặt toán học theo cả hai chiều — mỗi bộ ba (R, G, B) ánh xạ chính xác đến một bộ ba (H, S, L) — nhưng hai trường hợp biên cho kết quả không trực giác. Các màu xám tinh (nơi R = G = B) có tông không xác định vì không có kênh chiếm ưu thế; công cụ này báo H = 0 theo quy ước, nhưng bạn không thể dùng giá trị tông đó để sinh sơ đồ hài hòa (mọi hài hòa từ nền xám đều xám). Thứ hai, các màu rất tối hoặc rất sáng mất độ chính xác tông khi lưu dưới dạng phần trăm nguyên: một màu ở L = 2% với độ bão hòa cao có thể làm tròn đến cùng giá trị HSL với một màu có độ bão hòa thấp, nên vòng tròn RGB → HSL → RGB có thể lệch một hai đơn vị RGB. Cho token thiết kế, lưu HEX gốc và xem HSL như dẫn xuất, không phải nguồn sự thật.

Tính năng chính

• Chuyển đổi giữa HEX, RGB, HSL và CMYK
• Color picker tương tác
• Xem trước màu trực tiếp
• Copy bất kỳ định dạng màu nào vào clipboard
• Phát hiện độ sáng (sáng/tối)
• Trình kiểm tra tương phản WCAG 2.1 với phù hiệu Đạt/Không Đạt AA / AA Lớn / AAA
• Gợi ý màu chữ tốt nhất (đen hoặc trắng) cho khả năng tiếp cận
• Hỗ trợ định dạng HEX #RGB và #RRGGBB
• Chuyển đổi real-time khi bạn gõ
• Tính toán độ sáng màu
• Xử lý 100% phía client
• Không giao tiếp server
• Hoạt động offline
• Hỗ trợ chế độ tối
• Thân thiện với mobile