Bài viết
Công cụ màu sắc cho web: hex, bảng màu và khả năng tiếp cận
Việc chọn màu cho một trang web trông có vẻ đơn giản cho đến khi bạn đối mặt với mã hex, bộ ba RGB và các góc HSL, tất cả đều mô tả cùng một thứ theo những cách khác nhau. Bài viết này giải thích các định dạng đó liên hệ với nhau ra sao, cách biến một màu thương hiệu duy nhất thành bảng màu dùng được, và cách đảm bảo kết quả vẫn dễ đọc với những người nhìn màu theo cách khác.
Hex, RGB và HSL cùng mô tả một màu
Một màu trên màn hình được pha từ ánh sáng đỏ, lục và lam. Ký hiệu hex viết ba kênh đó thành mã sáu ký tự, ví dụ #2563eb, trong đó mỗi cặp ký tự là một kênh từ 00 đến ff. RGB viết cùng ba con số đó ở hệ thập phân, từ 0 đến 255, dễ đọc hơn nhưng không nói thêm điều gì. HSL chọn một góc nhìn khác: nó mô tả màu bằng sắc độ (vị trí trên vòng tròn màu từ 0 đến 360 độ), độ bão hòa (màu rực đến đâu) và độ sáng (gần trắng hay gần đen). HSL là định dạng mà nhà thiết kế tìm đến khi muốn chỉnh nhẹ một màu, vì tăng độ sáng hay dịch sắc độ là một thay đổi trực quan duy nhất chứ không phải ba con số ràng buộc nhau. Một công cụ chuyển đổi cho phép bạn đi lại giữa cả ba, nên bạn có thể đọc một giá trị ở định dạng này và dùng nó ở định dạng khác.
Biến một màu thành cả bảng màu
Một màu thương hiệu duy nhất hiếm khi đủ. Một bảng màu hoạt động tốt thường cần một màu chính, một hoặc hai màu nhấn, và một bộ xám trung tính cho chữ và nền. Quan hệ giữa các màu tuân theo những quy tắc đơn giản trên vòng tròn màu: màu bổ túc nằm đối diện nhau, màu tương đồng nằm cạnh nhau tạo cảm giác êm dịu, và bộ ba màu trải đều ba màu để có độ tương phản mà không chỏi nhau. Một công cụ phối màu áp dụng các quy tắc này vào màu khởi đầu của bạn và đưa ra các mã hex tương ứng, nên bạn không phải tự tính các góc bằng tay. Nếu bạn đã có một hình ảnh mà bạn thích bầu không khí của nó, một công cụ trích xuất bảng màu sẽ đọc ra các màu chủ đạo trong đó, đây là cách nhanh để dựng một trang dựa trên một bức ảnh hay một logo.
Độ tương phản và chứng mù màu
Một bảng màu trông đẹp trên màn hình của bạn vẫn có thể làm người đọc thất bại. Khoảng một trong mười hai nam giới và một trong hai trăm nữ giới có một dạng rối loạn thị giác màu nào đó, phổ biến nhất là khó tách màu đỏ khỏi màu lục. Nếu tín hiệu duy nhất của bạn cho một lỗi là chữ đỏ trên nút màu lục, những người đọc đó sẽ bỏ lỡ nó. Cách khắc phục không phải là tránh màu mà là không bao giờ chỉ dựa vào màu: hãy ghép nó với một biểu tượng, một nhãn hay một hình dạng, và giữ đủ độ tương phản về độ sáng giữa chữ và nền của nó. Một trình mô phỏng mù màu cho bạn thấy bảng màu của bạn trông ra sao dưới các kiểu thị giác màu thường gặp, để bạn bắt được vấn đề trước khi phát hành thay vì sau khi có lời than phiền.
Làm tất cả những điều này ngay trong trình duyệt
Không bước nào trong số này cần đến máy chủ. Chuyển đổi một mã hex, tạo một bảng phối màu, đọc màu ra từ một hình ảnh và mô phỏng chứng mù màu đều là những phép tính nhỏ mà trình duyệt xử lý tức thì. Điều đó quan trọng khi hình ảnh bạn đang lấy mẫu là một thiết kế chưa công bố hay một logo của khách hàng: với các công cụ ở đây, tập tin nằm lại trên thiết bị của bạn và không có gì được tải lên. Bạn nhận được cùng kết quả như từ một dịch vụ trực tuyến, mà không phải trao đi tác phẩm. Trình chuyển đổi màu, trình tạo phối màu, trình trích xuất bảng màu và trình mô phỏng mù màu đều chạy cục bộ và hoạt động y như vậy khi ngoại tuyến một khi trang đã tải xong.
OKLCH và các không gian màu rộng hơn
Hex, RGB và HSL đều mô tả màu sắc trong dải màu sRGB mà màn hình đã sử dụng trong nhiều năm. Các màn hình mới hơn hiển thị được nhiều hơn, và CSS hiện có thể tiếp cận điều đó bằng hàm color() và không gian màu Display P3, vốn bổ sung thêm các màu xanh lá và đỏ sống động mà sRGB không thể biểu diễn. Thay đổi lớn hơn là OKLCH, một cách viết màu theo độ sáng, chroma và hue phản ánh đúng cách mắt người cảm nhận độ sáng thực sự. Trong HSL, một màu vàng và một màu xanh dương cùng độ sáng 50% trông hoàn toàn khác nhau: màu vàng có vẻ sáng, màu xanh dương có vẻ tối. Trong OKLCH, giữ nguyên độ sáng và chỉ thay đổi hue giúp độ sáng cảm nhận ổn định. Điều này giúp việc xây dựng bảng màu trở nên thực tiễn hơn: mỗi sắc thái đều đạt cùng một mục tiêu độ tương phản chỉ bằng cách khóa một con số, thay vì phải điều chỉnh thủ công từng màu.
Công cụ trong bài viết này
- Trình chuyển đổi màuChuyển đổi màu giữa HEX, RGB, HSL, HSV và CMYK. Bao gồm trình kiểm tra tương phản WCAG. Không tải lên.
- Trình tạo bảng phối màuTạo các bảng màu bổ sung, tương đồng, bộ ba, bộ bốn và đơn sắc từ một màu cơ sở. Không tải lên.
- Trình trích xuất bảng màuTrích xuất các màu chủ đạo từ một hình ảnh dưới dạng ô màu HEX. Sao chép bất kỳ màu nào. Không tải lên.
- Trình mô phỏng mù màuMô phỏng protanopia, deuteranopia, tritanopia và achromatopsia trên một hình ảnh. Không tải lên.
Câu hỏi thường gặp
Sự khác nhau giữa hex và RGB là gì?
Chúng là hai cách viết cùng một màu. Hex gói các kênh đỏ, lục và lam vào một mã sáu ký tự ở hệ cơ số 16, còn RGB liệt kê cùng ba kênh đó dưới dạng số thập phân từ 0 đến 255. #ff0000 và rgb(255, 0, 0) là cùng một màu đỏ giống hệt. Hex gọn gàng và thông dụng trong CSS lẫn các tập tin thiết kế, RGB dễ đọc hơn khi nhìn thoáng qua, và việc chuyển đổi giữa chúng không thay đổi gì về bản thân màu sắc.
Làm sao tôi biết màu của mình có dễ đọc với người dùng bị mù màu không?
Hãy đưa bảng màu của bạn qua một trình mô phỏng mù màu, công cụ này vẽ lại các màu của bạn theo cách một người với mỗi kiểu thị giác màu thường gặp sẽ nhìn thấy. Để ý những cặp màu gộp lại thành cùng một sắc, đặc biệt là các màu đỏ và lục. Thói quen an toàn nhất là không bao giờ dùng màu làm tín hiệu duy nhất: hãy củng cố bằng chữ, một biểu tượng hay một họa tiết, và giữ một khác biệt độ sáng rõ ràng giữa tiền cảnh và nền để ý nghĩa vẫn còn ngay cả khi sắc độ thì không.