Chuyển đổi mã màu HEX, RGB, HSL, HSV và CMYK trong một màn hình
Nhập một mã màu ở dạng HEX hoặc kéo thanh trượt của từng kênh RGB và HSL, công cụ tính lại đồng thời cả năm cách viết cùng lúc và hiển thị ô màu lớn để bạn xem trực tiếp. Mỗi định dạng có nút sao chép riêng, đã bọc sẵn theo đúng cú pháp dùng được trong CSS, và các màu bạn vừa xem được ghim lại thành một dải để quay về nhanh.
Tính năng nổi bật
- Ô nhập mã HEX sáu ký tự, tự chuyển sang chữ hoa và tính lại toàn bộ định dạng khác ngay khi gõ
- Ba thanh trượt cho từng kênh đỏ, xanh lá và xanh dương, kéo tới đâu ô màu đổi tới đó
- Ba thanh trượt cho tông màu, độ bão hòa và độ sáng theo hệ HSL, tiện khi cần chỉnh sắc độ có chủ đích
- Hiển thị thêm giá trị theo hệ HSV và hệ CMYK, mỗi dòng có nút sao chép riêng
- Ô xem trước cỡ lớn in luôn mã màu lên trên, chữ tự đổi giữa đen và trắng để luôn đọc được
- Nút sinh màu ngẫu nhiên, dùng khi cần nhanh một điểm khởi đầu để mò tìm sắc độ
- Dải lịch sử màu ghim lại các màu vừa xem, bấm vào là quay về màu đó
- Chạy hoàn toàn trong trình duyệt, mọi phép chuyển đều tính tại chỗ
Vì sao một màu lại cần nhiều cách viết đến vậy
Mỗi định dạng ra đời để phục vụ một việc khác nhau, và biết dùng đúng cái nào sẽ tiết kiệm rất nhiều thời gian chỉnh sửa. HEX gọn nhất nên trở thành cách viết mặc định trong mã nguồn giao diện và trong tài liệu bàn giao thiết kế. RGB là cách máy tính thực sự lưu màu, và là dạng bạn cần khi làm việc với mã xử lý ảnh hoặc khi một hàm chỉ nhận ba con số. HSL là dạng duy nhất trong nhóm này phản ánh cách con người nghĩ về màu: giữ nguyên tông rồi kéo độ sáng lên hoặc xuống là bạn có ngay một dải màu cùng họ, việc mà thử bằng HEX gần như là mò mẫm. HSV gần giống HSL nhưng là dạng mà bảng chọn màu trong phần lớn phần mềm thiết kế đang dùng, nên khi đồng nghiệp đọc cho bạn ba con số từ Photoshop thì đó là HSV chứ không phải HSL. CMYK thuộc về in ấn. Có cả năm dạng cạnh nhau trên một màn hình giúp bạn nói cùng ngôn ngữ với cả lập trình viên lẫn người làm in mà không phải đổi công cụ.
Lợi ích khi sử dụng
- Thấy cả năm định dạng cùng lúc nên không phải mở nhiều công cụ khi trao đổi giữa các bộ phận
- Thanh trượt HSL giúp tạo dải màu nhạt dần và đậm dần cho một hệ thống giao diện
- Chuỗi sao chép đã đúng cú pháp CSS nên dán vào là chạy
- Dải lịch sử giúp so sánh qua lại giữa vài phương án màu
- Không cần đăng ký và không lưu dữ liệu, mở là dùng ngay
Cách chuyển đổi một mã màu
- 1Dán mã HEX vào ô đầu tiên, viết đủ sáu ký tự sau dấu thăng vì dạng viết tắt ba ký tự chưa được nhận.
- 2Nhìn ô xem trước cỡ lớn để xác nhận đúng màu bạn cần, mã màu được in ngay trên ô đó.
- 3Nếu cần chỉnh, kéo thanh trượt của hệ HSL để giữ nguyên tông mà đổi độ sáng hoặc độ bão hòa, cách này cho kết quả có chủ đích hơn là sửa từng ký tự HEX.
- 4Đọc các giá trị đã được tính lại ở những khối còn lại, gồm RGB, HSL, HSV và CMYK.
- 5Bấm nút sao chép ở đúng định dạng bạn cần, chuỗi lấy ra đã có sẵn dấu ngoặc và ký hiệu phần trăm nên dán thẳng vào tệp CSS được ngay.
Quan hệ giữa HEX và RGB, và cách nhẩm nhanh
Một mã HEX sáu ký tự là ba cặp, mỗi cặp là một byte biểu diễn cường độ của một kênh màu theo thứ tự đỏ, xanh lá, xanh dương, giá trị từ 00 tới FF tức là từ 0 tới 255. Nắm được vài mốc là bạn đọc được mã màu bằng mắt. Cặp FF là mức tối đa, cặp 00 là tắt hẳn, cặp 80 là khoảng giữa vì tương ứng với 128. Ba cặp bằng nhau luôn cho một sắc xám, nên mọi mã dạng AAAAAA hay 333333 đều là xám và bạn biết ngay giá trị càng lớn thì càng sáng. Cặp nào lớn nhất thì màu thiên về kênh đó: mã 3B82F6 có cặp cuối lớn nhất nên đây là một màu xanh dương. Nắm thêm rằng chênh lệch giữa cặp lớn nhất và cặp nhỏ nhất quyết định độ bão hòa, ba cặp càng gần nhau thì màu càng nhợt. Về ký hiệu, chữ hoa hay chữ thường đều tương đương về giá trị, chọn một kiểu rồi dùng nhất quán trong toàn dự án là được. Công cụ này luôn xuất ra chữ hoa vì đó là quy ước phổ biến trong tài liệu thiết kế.
Dùng HSL để dựng một dải màu cho hệ thống giao diện
Đây là chỗ hệ HSL thể hiện giá trị rõ nhất. Giả sử màu thương hiệu của bạn có tông 217 độ, bão hòa 91 phần trăm và sáng 60 phần trăm. Muốn tạo một dải mười bậc cho hệ thống giao diện, bạn giữ nguyên hai con số đầu rồi chỉ đổi con số cuối: các bậc nhạt dùng độ sáng 95, 90, 80, các bậc trung dùng 70, 60, 50, các bậc đậm dùng 40, 30, 20. Cách này cho một dải nhất quán mà mắt nhìn thấy liền mạch, trong khi tự nghĩ ra mười mã HEX gần nhau gần như luôn cho ra dải bị lệch tông ở đâu đó. Một mẹo nữa: khi cần bậc đậm nhất, giảm nhẹ độ bão hòa vài phần trăm sẽ trông tự nhiên hơn là giữ nguyên, vì màu đậm mà bão hòa cao thường có cảm giác rực và bẩn. Ngược lại ở các bậc nhạt, giảm bão hòa mạnh hơn để tránh màu hồng hoặc xanh nhạt bị chói. Sau khi chốt bằng thanh trượt HSL, bấm sao chép ở khối HEX để lấy mã đưa vào tệp cấu hình của dự án.
Giá trị CMYK ở đây dùng để tham khảo, không phải để đưa đi in
Đây là điểm cần nói thẳng vì hiểu sai chỗ này dẫn tới bản in lệch màu và tốn tiền in lại. Phép chuyển từ RGB sang CMYK trong công cụ dùng công thức toán thuần túy, không tham chiếu tới bất kỳ hồ sơ màu nào. Trong khi đó, kết quả in thật phụ thuộc rất nhiều vào loại giấy, loại mực và cấu hình máy in, và ngành in xử lý chuyện đó bằng các hồ sơ màu tiêu chuẩn. Cùng một bộ bốn con số đưa vào hai nhà in khác nhau cho ra hai kết quả khác nhau. Ngoài ra có cả một nhóm màu mà mực in không tạo ra được: các sắc xanh dương rực, xanh lá neon, cam chói và hồng huỳnh quang trên màn hình đều nằm ngoài khả năng của bốn màu mực, khi in ra sẽ xỉn đi thấy rõ. Vì vậy hãy dùng bốn con số ở đây để ước lượng và để trao đổi ban đầu, còn khi làm ấn phẩm thật thì chuyển đổi trong phần mềm dàn trang với hồ sơ màu do nhà in cung cấp, và luôn yêu cầu bản in thử trước khi chạy số lượng lớn.
Độ tương phản và giới hạn của phép tính tự động trên ô xem trước
Ô xem trước tự chọn chữ đen hay chữ trắng dựa trên một công thức tính độ sáng cảm nhận có từ thời truyền hình, nhân ba kênh với ba trọng số khác nhau rồi so với một ngưỡng ở giữa. Công thức này nhanh và thường cho kết quả hợp lý, nhưng nó không phải chuẩn đánh giá khả năng đọc được. Chuẩn được dùng để đánh giá giao diện là tỷ lệ tương phản theo hướng dẫn về khả năng tiếp cận nội dung web, tính theo một công thức khác và cho ra một tỷ số. Các mốc cần nhớ: chữ thường cần tối thiểu 4,5 trên 1 để đạt mức AA, chữ lớn hoặc chữ đậm cỡ lớn chỉ cần 3 trên 1, còn mức AAA đòi 7 trên 1. Thành phần giao diện không phải chữ như viền ô nhập liệu hay biểu tượng cần tối thiểu 3 trên 1. Công cụ này không tính tỷ số đó, nên sau khi chốt màu bạn vẫn cần kiểm tra bằng một công cụ đo tương phản chuyên trách, đặc biệt với các cặp màu dùng cho chữ trên nền màu thương hiệu.
Những định dạng và tính năng công cụ chưa có
Biết trước danh sách này giúp bạn khỏi mất công tìm. Công cụ chỉ nhận mã HEX viết đủ sáu ký tự, dạng viết tắt ba ký tự chưa được chấp nhận dù nó hợp lệ trong CSS; muốn dùng thì bạn nhân đôi từng ký tự trước khi dán, ví dụ dạng ba ký tự F0A tương đương FF00AA. Không có kênh trong suốt, nghĩa là không nhận mã tám ký tự và không xuất ra dạng có tham số alpha. Không có các không gian màu mới hơn mà CSS hiện đại đã hỗ trợ, những dạng cho phép mô tả màu ngoài dải hiển thị truyền thống. Không có bộ hút màu từ màn hình, không có gợi ý bảng phối màu theo quy tắc bổ túc hay tương đồng, và không có mô phỏng cách người mù màu nhìn thấy. Dải lịch sử màu chỉ tồn tại trong phiên làm việc, tải lại trang là trống. Với những nhu cầu này bạn cần công cụ chuyên sâu hơn, nhưng phần lớn công việc hằng ngày là chuyển đổi qua lại giữa năm định dạng thì công cụ này đã đủ.
Câu hỏi thường gặp (FAQ)
Vì sao dán mã ba ký tự vào mà không nhận?
Vì công cụ chỉ đọc mã HEX viết đủ sáu ký tự sau dấu thăng. Dạng viết tắt ba ký tự hợp lệ trong CSS nhưng chưa được nhận ở đây. Cách chuyển rất đơn giản: nhân đôi từng ký tự, ví dụ dạng ba ký tự F0A tương đương FF00AA, còn 39C tương đương 3399CC.
Đọc một mã HEX bằng mắt thế nào?
Tách thành ba cặp theo thứ tự đỏ, xanh lá, xanh dương, mỗi cặp chạy từ 00 tới FF tức là từ 0 tới 255. Cặp nào lớn nhất thì màu thiên về kênh đó. Ba cặp bằng nhau luôn cho một sắc xám. Ba cặp càng gần nhau thì màu càng nhợt, càng chênh lệch thì càng rực.
HSL và HSV khác nhau ở chỗ nào?
Cả hai đều bắt đầu bằng tông màu tính theo độ, nhưng hai con số sau tính khác nhau. Trong HSL, độ sáng 100 phần trăm luôn cho màu trắng và 50 phần trăm là màu thuần. Trong HSV, giá trị 100 phần trăm cho màu thuần chứ không phải trắng. Bảng chọn màu của phần lớn phần mềm thiết kế dùng HSV.
Có nên dùng số CMYK ở đây để đặt in không?
Không nên. Phép chuyển ở đây là công thức toán thuần túy, không tham chiếu hồ sơ màu nào, trong khi kết quả in thật phụ thuộc vào giấy, mực và máy in. Hãy dùng bốn con số này để ước lượng, còn khi làm ấn phẩm thật thì chuyển trong phần mềm dàn trang với hồ sơ màu do nhà in cung cấp và yêu cầu bản in thử.
Vì sao màu trên màn hình in ra lại xỉn hơn hẳn?
Vì màn hình phát sáng còn giấy chỉ phản xạ ánh sáng, và bốn màu mực không tạo ra được toàn bộ dải màu mà màn hình hiển thị. Các sắc xanh dương rực, xanh lá neon, cam chói và hồng huỳnh quang nằm ngoài khả năng của mực in nên luôn bị kéo về gần nhất có thể. Muốn màu rực khi in thì phải dùng mực pha riêng.
Chuỗi sao chép có dùng ngay được trong CSS không?
Có với ba định dạng đầu. Mã HEX dán vào là chạy, còn RGB và HSL đã được bọc sẵn tên hàm, dấu ngoặc và ký hiệu phần trăm đúng cú pháp. Riêng HSV và CMYK không phải định dạng mà CSS hiểu, hai chuỗi đó chỉ dùng để trao đổi với phần mềm thiết kế hoặc với nhà in.
Làm sao tạo một dải màu nhạt dần từ màu thương hiệu?
Chuyển màu gốc sang HSL rồi giữ nguyên tông màu và độ bão hòa, chỉ đổi con số độ sáng theo từng bậc, ví dụ 95, 90, 80, 70, 60, 50, 40, 30, 20. Ở các bậc nhạt nên giảm thêm độ bão hòa cho đỡ chói, còn ở các bậc đậm giảm nhẹ độ bão hòa để màu bớt bẩn.
Chữ trên ô xem trước tự đổi màu theo tiêu chuẩn nào?
Theo một công thức tính độ sáng cảm nhận cũ, nhân ba kênh với ba trọng số rồi so với ngưỡng giữa. Công thức này nhanh và thường hợp lý nhưng không phải chuẩn đánh giá khả năng đọc được. Để kiểm tra đúng chuẩn, bạn cần đo tỷ lệ tương phản theo hướng dẫn về khả năng tiếp cận bằng một công cụ chuyên trách.
Tỷ lệ tương phản bao nhiêu là đạt?
Chữ cỡ thường cần tối thiểu 4,5 trên 1 để đạt mức AA, chữ lớn hoặc chữ đậm cỡ lớn chỉ cần 3 trên 1, còn mức AAA đòi 7 trên 1. Các thành phần giao diện không phải chữ như viền ô nhập liệu và biểu tượng cần tối thiểu 3 trên 1. Đây là mức tối thiểu, không phải mục tiêu nên dừng lại.
Công cụ có hỗ trợ màu trong suốt không?
Không. Chưa có kênh trong suốt nên công cụ không nhận mã tám ký tự và không xuất ra dạng có tham số alpha. Nếu bạn cần độ mờ, hãy lấy mã sáu ký tự ở đây rồi tự thêm giá trị alpha trong CSS, hoặc dùng thuộc tính điều chỉnh độ mờ của cả phần tử tùy tình huống.
Dải lịch sử màu có được lưu lại không?
Không. Nó chỉ tồn tại trong phiên làm việc hiện tại và trống lại khi bạn tải lại trang. Nếu đang so sánh vài phương án màu quan trọng, hãy chép các mã HEX ra một ghi chú riêng thay vì trông cậy vào dải này.
Vì sao cùng một mã màu lại trông khác nhau trên hai màn hình?
Vì mỗi màn hình có khả năng tái tạo màu và cách hiệu chỉnh khác nhau, cùng với thiết lập độ sáng và nhiệt màu do người dùng chỉnh. Đây là lý do màu thương hiệu quan trọng nên được chốt trên màn hình đã hiệu chỉnh, và với ấn phẩm in thì phải chốt bằng bản in thử chứ không chốt trên màn hình.
Từ khóa liên quan
- chuyển đổi mã màu
- hex sang rgb
- rgb sang hex
- mã màu hsl
- chuyển rgb sang cmyk
- bảng mã màu hex
- hex color converter
- mã màu css
- hsl là gì
- hsv và hsl khác nhau
- cmyk cho in ấn
- tỷ lệ tương phản wcag
- tạo dải màu cho design system
- màu thương hiệu
- mã màu 3 ký tự
- màu rgba trong css
- phối màu website
- kiểm tra độ tương phản màu
- không gian màu là gì
- công cụ chọn màu online
