Công cụ màu sắc miễn phí

Về các công cụ màu của chúng tôi

Absolutool bao gồm 7 công cụ màu chuyên dụng cho các nhà thiết kế, nhà phát triển và chuyên gia trợ năng. Chuyển đổi giữa các định dạng HEX, RGB, HSL và HSB. Tạo bảng màu hài hòa nhờ lý thuyết màu. Kiểm tra tỷ lệ tương phản WCAG để đảm bảo thiết kế của bạn dễ tiếp cận với mọi người.

Mô phỏng mù màu sử dụng các ma trận tra cứu Brettel/Viénot để mô hình hóa chính xác 8 loại khiếm khuyết thị lực màu · tải lên một hình ảnh hoặc kiểm tra các màu riêng lẻ. Sử dụng trình tạo các sắc thái màu cho các token hệ thống thiết kế, bộ trộn màu cho các phép trộn chính xác và bộ chọn màu hình ảnh để trích xuất màu từ bất kỳ ảnh nào. Tất cả các công cụ hoạt động hoàn toàn trong trình duyệt của bạn.

Mô Hình Màu Trên Web

Mỗi điểm ảnh trên một trang web hiện đại được mô tả bởi một giá trị màu mà trình duyệt diễn giải rồi yêu cầu GPU dựng hình. Hai định dạng bạn sẽ thấy thường xuyên nhất là HEX (một bộ ba thập lục phân sáu chữ số như #3b82f6) và RGB (các giá trị thập phân như rgb(59 130 246)). Cả hai mô tả cùng một thứ: bao nhiêu ánh sáng đỏ, lục, và lam cần pha trên một màn hình dùng màu cộng. Một màn hình 24-bit tiêu chuẩn cho 256 mức mỗi kênh, nghĩa là có thể địa chỉ hóa 16,78 triệu màu duy nhất. HEX ngắn hơn, RGB dễ tính toán hơn, và hai cái có thể hoán đổi cho nhau.

HSL (hue, saturation, lightness) và HSB (hue, saturation, brightness) mô tả cùng một màu màn hình nhưng theo các tọa độ gần với cách con người tri giác nó hơn. Hue là vị trí của màu trên bánh xe màu từ 0° (đỏ) đến 360°. Saturation là độ rực của màu, từ xám đến hoàn toàn thuần khiết. Lightness điều khiển lượng trắng hoặc đen được pha vào. HSL là định dạng các nhà thiết kế thường chọn khi xây dựng hệ thống thiết kế vì việc điều chỉnh một kênh tạo ra một sự dịch chuyển có thể dự đoán, như làm một nút tối hơn 10% cho trạng thái di chuột. CSS hỗ trợ HEX, RGB, HSL, cùng các định dạng LCH và OKLCH mới hơn một cách tự nhiên.

Đằng sau tất cả các định dạng này là một không gian màu, vốn định nghĩa chính xác “đỏ 255” nghĩa là gì theo nghĩa vật lý. Mặc định của web là sRGB, được IEC chuẩn hóa năm 1996 và là cùng một gam màu mà gần như mọi màn hình máy tính để bàn và điện thoại đều bao phủ. Các thiết bị Apple, OLED, và cao cấp mới hơn hỗ trợ Display P3, một gam màu rộng hơn bổ sung thêm khoảng 25% các sắc đỏ và lục bão hòa hơn. CSS giờ cho phép bạn viết color(display-p3 1 0 0) để tận dụng. Hầu hết công cụ màu trên trang này làm việc trong sRGB và tiếp cận mọi trình duyệt; P3 mở rộng những gì có sẵn mà không thay đổi quy trình làm việc.

Hiểu Về Độ Tương Phản Màu WCAG

Web Content Accessibility Guidelines (WCAG 2.1) đặt ra các ngưỡng số cho độ tương phản giữa văn bản và nền của nó. Mức AA, mức mà hầu hết các cuộc kiểm toán khả năng truy cập nhắm tới, yêu cầu tỷ lệ ít nhất 4,5:1 cho văn bản thường và 3:1 cho văn bản lớn (18pt thường hoặc 14pt đậm trở lên). Mức AAA siết các con số đó thành 7:1 và 4,5:1. Tỷ lệ được tính từ độ chói tương đối của mỗi màu, một giá trị độ sáng tri giác được suy ra từ các màu sơ cấp sRGB qua công thức IEC 61966-2-1. Hai màu trông “gần như giống nhau” vẫn có thể đạt, hai màu trông hoàn toàn khác nhau có thể trượt nếu một cái là xám trên xám.

Những con số này quan trọng vì khoảng 5% dân số trưởng thành trên toàn thế giới có độ nhạy tương phản giảm có thể đo được do đục thủy tinh thể, tăng nhãn áp, bệnh võng mạc tiểu đường, hoặc các thay đổi điểm vàng liên quan đến lão hóa. Ánh nắng ngoài trời chói chang làm giảm độ tương phản hiệu dụng cho mọi người. Màn hình di động nhìn nghiêng làm giảm tương phản thêm nữa. Các ngưỡng của WCAG được thiết kế để giữ văn bản dễ đọc trong những điều kiện thực đó, không phải trên một màn hình hiệu chỉnh màu trong một văn phòng tối. Một thuật toán mới hơn tên là APCA (ứng viên thay thế sắp đến trong WCAG 3.0) tính đến những thứ mà WCAG 2.x bỏ qua, như độ đậm và độ phân cực của văn bản. Hiện tại, AA 4,5:1 vẫn là tiêu chuẩn mà hầu hết các cơ quan quản lý tham chiếu.

Mù Màu và Thiết Kế Bao Trùm

Khoảng 8% nam giới và 0,5% nữ giới gốc Bắc Âu có một dạng thiếu hụt thị giác màu đỏ-lục nào đó, và các con số toàn cầu tương tự về quy mô. Ba loại phổ biến nhất ảnh hưởng đến cách các tế bào hình nón trong võng mạc phản ứng với các bước sóng cụ thể. Deuteranomaly (phổ biến nhất, khoảng 5% nam giới) làm giảm độ nhạy với ánh sáng lục bước-sóng-trung. Protanomaly làm giảm độ nhạy với ánh sáng đỏ bước-sóng-dài. Tritanomaly ảnh hưởng đến tri giác lam-vàng và hiếm hơn nhiều. Các trình mô phỏng trên trang này dùng phép suy ma trận-màu từ Brettel, Viénot & Mollon (1997), tài liệu tham chiếu tiêu chuẩn cho các phép biến đổi này trong khoa học màu sắc.

Quy tắc thiết kế thực tế là “đừng chỉ dựa vào màu sắc”. Một biểu tượng lỗi màu đỏ và một biểu tượng thành công màu lục trông giống hệt nhau với nhiều người dùng bị deuteranomaly. Thêm một hình dạng khác (dấu chéo so với dấu kiểm), một nhãn (“Lỗi” hoặc “Thành công”), hay một họa tiết khắc phục điều này mà không tốn gì cho người dùng khác. Các thiết kế biểu đồ và bảng điều khiển là những thủ phạm thường gặp nhất vì chú giải thường dựa vào một ô màu. Trình Mô Phỏng Mù Màu trên trang này cho phép bạn xem trước một ảnh chụp màn hình thực qua từng dạng thiếu hụt phổ biến trước khi xuất bản, để bạn có thể phát hiện các họa tiết lẽ ra đã thất bại trong sản xuất.

Lý Thuyết Màu Cho Bảng Màu

Bánh xe màu sắp xếp các sắc màu theo góc của chúng quanh vòng tròn: đỏ ở 0°, vàng ở 60°, lục ở 120°, lục lam ở 180°, lam ở 240°, đỏ tươi ở 300°. Các màu bổ sung nằm đối diện trực tiếp nhau (đỏ và lục lam, lam và cam) và tạo ra độ tương phản mạnh nhất. Bảng màu tương đồng dùng từ hai đến bốn sắc màu kề nhau trên bánh xe và mang lại cảm giác êm dịu, thống nhất, rất hợp với nền và chuyển sắc. Bảng màu bộ ba dùng ba sắc màu cách đều nhau 120°, mang lại sự cân bằng cùng đa dạng. Bảng màu bộ bốn dùng bốn sắc màu tạo thành một hình chữ nhật. Các quy tắc này nảy sinh từ những cẩm nang của họa sĩ thế kỷ 19 nhưng khớp với những gì nghiên cứu tri giác về sau đã xác nhận.

Một hệ thống thương hiệu thông thường cần khoảng năm màu: một màu thương hiệu chính, một màu nhấn (thường là bổ sung), một màu xám trung tính, cộng với lục-thành-công và đỏ-lỗi. Trình Tạo Bảng Màu trên trang này chọn sự hài hòa trước rồi cung cấp các thang sắc nhạt và sắc đậm 10-bước cho mỗi màu được chọn, cùng một cấu trúc mà các hệ thống thiết kế như Tailwind, Material, và Carbon dùng. Công cụ Bảng Màu Khả Truy Cập giới hạn việc tạo ở những tổ hợp đạt độ tương phản WCAG AA trên nền trắng hoặc tối. Cả hai công cụ làm việc hoàn toàn trong trình duyệt của bạn, nên những màu bạn chọn cho một thương hiệu chưa ra mắt không bao giờ được gửi đi đâu.

Câu Hỏi Thường Gặp