Tìm tên màu CSS từ mã HEX: màu gần nhất, khoảng cách RGB và cách đọc kết quả
Công cụ tra tên màu CSS từ mã HEX bất kỳ. Bạn chọn màu bằng bảng chọn hoặc gõ thẳng mã sáu ký tự, công cụ so sánh với danh sách màu chuẩn và trả về tên gần nhất kèm khoảng cách để bạn biết mức chênh. Kết quả hiển thị cùng lúc tên CSS, mã HEX và giá trị RGB, mỗi dạng có nút sao chép riêng.
Tính năng nổi bật
- Nhập mã HEX trực tiếp hoặc chọn màu bằng bảng chọn màu của trình duyệt
- Tra tên màu CSS gần nhất trong danh sách 60 màu chuẩn thường dùng
- Hiện khoảng cách RGB giữa màu bạn nhập và màu chuẩn để đánh giá mức chênh
- Báo rõ khi màu khớp chính xác thay vì chỉ đưa ra tên gần đúng
- Hiển thị ô màu chuẩn bên cạnh ô màu của bạn để so bằng mắt
- Tách riêng ba giá trị R, G, B để bạn thấy thành phần màu
- Ba nút sao chép riêng cho tên CSS, mã HEX viết hoa và chuỗi rgb đầy đủ
- Chạy hoàn toàn trên trình duyệt, không cần kết nối tới máy chủ nào
Khi nào bạn cần biết tên màu thay vì mã HEX
Mã HEX chính xác nhưng không nói được gì khi trao đổi. Câu hỏi kiểu màu này là màu gì trong tiếng Anh xuất hiện liên tục khi bạn viết tài liệu thiết kế, đặt tên biến trong bảng màu, mô tả yêu cầu cho khách hàng, hoặc tìm ảnh và phông chữ theo từ khóa màu. Một mã như F08080 chẳng gợi ra gì, nhưng biết nó gần với LightCoral thì bạn có ngay một từ để tìm kiếm và để nói chuyện. Ngoài ra khi đọc mã nguồn của người khác, gặp thuộc tính đặt bằng tên màu mà không hình dung được sắc độ, việc tra ngược cũng nhanh hơn nhiều so với đi tìm bảng màu. Công cụ này giải quyết cả hai chiều: từ mã ra tên gần nhất, và từ tên ra mã chuẩn để bạn đối chiếu bằng mắt trên cùng một màn hình.
Lợi ích khi sử dụng
- Có ngay một từ khóa tiếng Anh để mô tả màu khi trao đổi với khách hàng hoặc đồng đội
- Biết được mã của bạn lệch bao nhiêu so với màu chuẩn thay vì đoán
- Sao chép đúng định dạng cần dùng mà không phải tự chuyển đổi giữa HEX và RGB
- Đối chiếu trực quan hai ô màu cạnh nhau trước khi quyết định thay màu
- Không cần cài phần mềm thiết kế chỉ để tra một mã màu
Cách tra tên màu từ mã HEX
- 1Gõ mã HEX vào ô nhập, dạng dấu thăng kèm sáu ký tự, hoặc bấm vào ô màu để mở bảng chọn màu của hệ điều hành.
- 2Đọc tên màu hiện ở cột kết quả, đây là tên gần nhất tìm được trong danh sách màu chuẩn.
- 3Nhìn dòng ngay dưới tên: nếu ghi khớp chính xác thì mã của bạn trùng đúng màu chuẩn, nếu không thì con số kèm theo là khoảng cách.
- 4So ô màu của bạn với ô màu chuẩn hiển thị bên cạnh để tự quyết định tên đó có dùng được hay không.
- 5Bấm nút sao chép ở dòng bạn cần, tên CSS viết thường, mã HEX viết hoa hoặc chuỗi rgb, rồi dán vào mã nguồn hay tài liệu.
Danh sách màu mà công cụ đối chiếu
Công cụ so mã của bạn với 60 màu, gồm 16 màu cơ bản có từ thời HTML 4 là black, white, red, lime, blue, yellow, cyan, magenta, gray, maroon, olive, green, purple, teal, navy và silver, cộng thêm các màu mở rộng hay dùng như orange, pink, brown, gold, coral, crimson, chocolate, chartreuse, các biến thể tiền tố dark từ darkblue tới darkviolet, cùng nhóm deeppink, dodgerblue, firebrick và forestgreen. Cần nói rõ để bạn không hiểu nhầm: đây là một tập con, còn chuẩn CSS định nghĩa khoảng 148 từ khóa màu, trong đó nhiều cặp chỉ khác cách viết như gray và grey nên số giá trị màu riêng biệt là khoảng 140. Những tên nằm ngoài tập con này, ví dụ tomato, salmon, khaki, lavender hay steelblue, sẽ không bao giờ xuất hiện trong kết quả dù màu bạn nhập rất gần chúng. Vì vậy khi khoảng cách trả về lớn, nhiều khả năng màu của bạn khớp với một tên CSS khác không có trong danh sách chứ không phải nó thực sự không có tên.
Khoảng cách RGB được tính thế nào và bao nhiêu là gần
Công cụ coi mỗi màu là một điểm trong không gian ba chiều với ba trục đỏ, xanh lá và xanh dương, mỗi trục chạy từ 0 tới 255. Khoảng cách giữa hai màu là căn bậc hai của tổng bình phương hiệu ba thành phần, đúng công thức khoảng cách Euclid quen thuộc. Giá trị 0 nghĩa là hai mã trùng nhau hoàn toàn. Giá trị lớn nhất có thể xảy ra là khoảng 441, tương ứng khoảng cách giữa đen tuyền và trắng tinh. Trong thực tế, dưới 20 là mắt thường gần như không phân biệt được khi hai màu không đặt sát nhau, từ 20 đến 60 là nhận ra khác nhưng vẫn cùng một họ màu, trên 100 là hai màu rõ ràng khác nhau và tên trả về chỉ mang tính tham khảo. Một điểm cần biết: khoảng cách trong không gian RGB không phản ánh đúng cảm nhận của mắt người, vì mắt nhạy với thay đổi ở vùng xanh lá hơn nhiều so với vùng xanh dương. Hai cặp màu có cùng khoảng cách RGB vẫn có thể trông chênh nhau rất khác.
Ba định dạng màu và khi nào dùng định dạng nào
HEX là chuỗi sáu ký tự thập lục phân, hai ký tự cho mỗi kênh màu, ví dụ FF6B6B nghĩa là đỏ 255, xanh lá 107, xanh dương 107. Đây là định dạng gọn nhất và phổ biến nhất trong tệp thiết kế cũng như trong mã nguồn. RGB viết ba số thập phân trong ngoặc, dễ đọc và dễ tính khi bạn cần tăng giảm từng kênh bằng tay, đồng thời là dạng bắt buộc khi cần thêm kênh trong suốt thành rgba. Tên màu CSS ngắn và tự giải thích, thích hợp cho các màu cơ bản trong mã ví dụ hay bản dựng nhanh, nhưng không dùng được cho màu thương hiệu vì chỉ có chừng 140 giá trị cố định. Ngoài ba dạng này còn HSL mô tả màu theo góc màu, độ bão hòa và độ sáng, rất tiện khi bạn cần tạo dải màu cùng tông chỉ bằng cách đổi độ sáng. Trong dự án thực tế, cách làm bền vững nhất là khai báo màu thương hiệu bằng biến CSS ở một chỗ rồi tham chiếu tới nó, thay vì rải mã HEX khắp các tệp.
Vì sao màu trên màn hình bạn khác màu trên máy khác
Cùng một mã HEX vẫn hiện ra khác nhau trên hai màn hình, và đây không phải lỗi công cụ. Nguyên nhân thứ nhất là không gian màu: màn hình phổ thông thường hiển thị gần đủ dải sRGB, còn màn hình chuyên nghiệp và thiết bị di động đời mới thường phủ dải rộng hơn, khiến cùng một giá trị số cho ra sắc độ đậm hơn. Nguyên nhân thứ hai là hiệu chuẩn: độ sáng, nhiệt màu và các chế độ lọc ánh sáng xanh vào buổi tối đều làm dịch màu, đặc biệt ở vùng vàng và cam. Nguyên nhân thứ ba là ánh sáng phòng, cùng một màu xám nhìn dưới đèn huỳnh quang trắng và dưới đèn vàng cho cảm giác khác hẳn. Hệ quả thực tế cần nhớ khi làm giao diện: đừng để thông tin quan trọng phụ thuộc hoàn toàn vào sắc độ, và luôn kiểm tra độ tương phản giữa chữ và nền bằng chỉ số tương phản chứ không bằng cảm giác. Mức thường được lấy làm chuẩn là 4,5 trên 1 cho chữ thường và 3 trên 1 cho chữ cỡ lớn.
Tên màu CSS không dùng được cho màu thương hiệu
Đây là giới hạn cần nói thẳng. Danh sách tên màu CSS là một tập cố định gồm chừng 140 giá trị, được chốt từ lâu và không mở rộng thêm, trong khi màn hình 24 bit biểu diễn được hơn 16,7 triệu màu. Xác suất một màu thương hiệu rơi đúng vào một trong 140 giá trị đó gần như bằng không. Vì vậy khi công cụ trả về tên gần nhất, hãy hiểu đó là nhãn để gọi tên và tìm kiếm, không phải màu để thay vào mã nguồn. Thay một mã thương hiệu bằng tên CSS gần nhất là lỗi thường gặp khi dựng trang nhanh, và nó khiến bản dựng lệch tông so với bộ nhận diện, đặc biệt dễ thấy ở các sắc đỏ và cam vốn nằm sát nhau. Cách làm đúng là giữ nguyên mã chính xác, khai báo một lần bằng biến CSS đặt tên theo vai trò như màu chính hay màu nhấn, rồi dùng tên CSS chỉ cho những màu trung tính đơn giản trong mã thử nghiệm.
Câu hỏi thường gặp (FAQ)
Công cụ đối chiếu với bao nhiêu tên màu?
Danh sách trong công cụ gồm 60 màu, bao gồm 16 màu cơ bản của HTML và các màu mở rộng hay dùng. Chuẩn CSS có khoảng 148 từ khóa với chừng 140 giá trị riêng biệt, nên một số tên như tomato, salmon hay steelblue sẽ không xuất hiện trong kết quả dù màu bạn nhập rất gần chúng.
Con số khoảng cách trong kết quả nghĩa là gì?
Đó là khoảng cách Euclid giữa hai màu trong không gian RGB, tính bằng căn bậc hai của tổng bình phương hiệu ba kênh màu. Giá trị 0 là trùng khớp hoàn toàn, giá trị lớn nhất có thể xảy ra là khoảng 441 giữa đen và trắng. Số càng nhỏ thì hai màu càng gần nhau.
Khoảng cách bao nhiêu thì coi là màu giống nhau?
Dưới 20 thì mắt thường gần như không phân biệt được nếu hai màu không đặt sát nhau. Từ 20 đến 60 là nhận ra khác nhưng vẫn cùng họ màu. Trên 100 là hai màu rõ ràng khác nhau, lúc đó tên trả về chỉ nên coi là gợi ý chứ không dùng thay cho mã gốc.
Vì sao hai màu có khoảng cách nhỏ mà nhìn vẫn khác nhau?
Vì khoảng cách RGB đo bằng số học chứ không theo cảm nhận thị giác. Mắt người nhạy với thay đổi ở vùng xanh lá hơn nhiều so với vùng xanh dương, nên hai cặp màu cùng khoảng cách vẫn có thể trông chênh nhau rất khác. Muốn đo theo cảm nhận cần dùng chỉ số Delta E trong không gian CIELAB.
Có thể dùng tên màu CSS cho màu thương hiệu không?
Không nên. Danh sách tên CSS chỉ có chừng 140 giá trị cố định trong khi màn hình biểu diễn được hơn 16,7 triệu màu, nên xác suất màu thương hiệu trùng đúng một tên là gần như bằng không. Hãy giữ mã HEX chính xác và khai báo bằng biến CSS đặt tên theo vai trò.
Tên màu CSS có phân biệt chữ hoa chữ thường không?
Không. Trong CSS, viết Coral, coral hay CORAL đều cho cùng một màu. Công cụ trả về tên ở dạng chữ thường trong dòng sao chép để khớp với quy ước viết mã phổ biến, còn tên hiển thị lớn giữ dạng viết hoa từng chữ cho dễ đọc.
Nhập mã HEX ba ký tự có được không?
Công cụ đối chiếu theo dạng đầy đủ sáu ký tự, nên bạn hãy viết mở rộng ra trước khi nhập. Quy tắc mở rộng là nhân đôi từng ký tự: F60 thành FF6600, ABC thành AABBCC. Dạng rút gọn ba ký tự vẫn hợp lệ trong CSS, chỉ là chỗ nhập này cần dạng đầy đủ.
Nên dùng HEX, RGB hay HSL trong dự án?
HEX gọn nhất và phổ biến nhất trong tệp thiết kế lẫn mã nguồn. RGB cần thiết khi bạn phải thêm kênh trong suốt hoặc chỉnh từng kênh bằng tay. HSL tiện nhất khi cần tạo dải màu cùng tông vì chỉ việc đổi độ sáng. Dùng cả ba đều được miễn là nhất quán trong một dự án.
Vì sao cùng một mã màu lại hiện khác nhau trên hai màn hình?
Do khác không gian màu, mức hiệu chuẩn và ánh sáng phòng. Màn hình dải rộng cho ra sắc độ đậm hơn với cùng một giá trị số, còn chế độ lọc ánh sáng xanh buổi tối làm dịch màu ở vùng vàng và cam. Vì vậy đừng để thông tin quan trọng chỉ phụ thuộc vào sắc độ.
Có thể tự thêm tên màu riêng vào CSS không?
CSS không cho phép định nghĩa từ khóa màu mới, nhưng biến CSS làm được điều tương tự. Khai báo một biến ở phạm vi gốc rồi tham chiếu tới nó ở mọi nơi cần dùng, vừa đặt được tên theo ý bạn vừa đổi màu toàn dự án bằng cách sửa một dòng.
Công cụ có tra được màu từ ảnh không?
Không. Công cụ chỉ nhận mã HEX gõ vào hoặc màu chọn từ bảng chọn màu của hệ điều hành. Muốn lấy màu từ ảnh, bạn dùng công cụ hút màu có sẵn trong phần mềm thiết kế hoặc tiện ích hút màu của trình duyệt, rồi dán mã thu được vào đây.
Mã màu tôi nhập có bị gửi đi đâu không?
Không. Toàn bộ việc chuyển đổi HEX sang RGB và tìm màu gần nhất chạy bằng JavaScript ngay trong trình duyệt, danh sách màu chuẩn cũng nằm sẵn trong trang. Không có lời gọi mạng nào khi bạn đổi màu, nên bảng màu nội bộ của dự án vẫn nằm trong máy bạn.
Từ khóa liên quan
- tìm tên màu css
- tra tên màu từ mã hex
- hex sang tên màu
- tên màu css tiếng việt
- danh sách tên màu css
- mã màu hex là gì
- chuyển hex sang rgb
- màu css gần nhất
- color name finder online
- bảng mã màu html
- tên màu html chuẩn
- khoảng cách màu rgb
- delta e so sánh màu
- màu thương hiệu dùng hex hay tên
- biến css cho màu sắc
- độ tương phản màu chữ và nền
- hsl hex rgb khác nhau
- công cụ tra mã màu miễn phí
- mã màu 3 ký tự và 6 ký tự
- chọn màu online không cần cài đặt
