Tạo bảng màu
Bắt đầu từ một màu và nhận các bảng màu phù hợp, mỗi ô màu kèm giá trị HEX, RGB và độ tương phản với màu trắng và màu đen.
Chạy hoàn toàn trong trình duyệt của bạn
Bảng màu ngẫu nhiên
Năm màu từ bộ tạo số ngẫu nhiên của trình duyệt. Khóa những màu bạn muốn giữ, rồi tạo lại. Nhấn phím cách để tạo khi không có ô văn bản nào đang được chọn.
Xuất
Bảng màu được tạo trong không gian màu OKLCH và hiển thị dưới dạng HEX sRGB, nên các màu quá rực cho màn hình sẽ bị giảm độ bão hòa. Các số liệu tương phản dùng công thức WCAG 2, chỉ đo độ tương phản về độ sáng.
Cách tạo bảng màu
- Chọn màu gốc bằng bảng chọn màu, hoặc nhập một giá trị như
#1636a3hayf60vào ô HEX. - Xem các bảng phối màu bên dưới. Mỗi ô màu cho biết HEX, RGB và chữ đen hay chữ trắng đạt WCAG AA hoặc AAA trên màu đó.
- Chọn một bảng màu trong phần Xuất rồi sao chép hoặc tải xuống dưới dạng biến CSS, mảng JSON hoặc danh sách thuần. Dùng Bảng màu ngẫu nhiên và các nút khóa để khám phá.
Các kiểu phối màu được tạo như thế nào
Phối màu hài hòa là một tập hợp các màu có sắc độ nằm ở những góc cố định quanh vòng màu. Màu tương đồng là các màu lân cận, cách nhau 30 độ. Màu bổ sung cách 180 độ, cặp bổ sung chia đôi nằm cách 150 và 210 độ, bộ ba cách đều nhau 120 độ, và bộ bốn dùng bốn sắc độ cách nhau 90 độ. Bảng đơn sắc giữ nguyên sắc độ và thay đổi độ sáng từ các sắc nhạt đến các sắc tối.
Vòng màu dùng ở đây là OKLCH, dạng trụ của không gian OKLab do Björn Ottosson xây dựng. Phép chuyển đổi đi từ sRGB sang ánh sáng tuyến tính, rồi qua các ma trận OKLab, và quay lại có kiểm tra gam màu. Nếu một màu đã xoay rơi ra ngoài những gì sRGB hiển thị được, độ bão hòa của nó được giảm từng bước nhỏ cho đến khi vừa, nên độ sáng và sắc độ bạn chọn vẫn được giữ.
Độ tương phản được báo cho mọi ô màu so với cả màu trắng và màu đen, vì câu hỏi đầu tiên về một màu trong bảng thường là chữ nào đặt lên được. Tỷ lệ và nhãn AA hoặc AAA luôn được ghi bằng chữ, nên thông tin không phụ thuộc vào việc nhìn thấy màu.
Mẹo
- Cần cùng màu đó dưới dạng HSL, CMYK hoặc tên CSS? Hãy dùng Chuyển đổi màu và kiểm tra độ tương phản.
- Biến hai màu trong bảng thành nền bằng Tạo gradient CSS.
- Muốn lấy màu từ một bức ảnh thay vì từ vòng màu? Hãy thử Lấy màu từ ảnh.
Câu hỏi thường gặp
Vì sao dùng OKLCH thay vì HSL?
Trong HSL, một màu vàng và một màu xanh dương có cùng giá trị độ sáng trông rất khác nhau về độ chói. OKLCH được xây dựng để các bước độ sáng bằng nhau trông bằng nhau, giúp các ô màu của bảng đều nhau về cảm nhận. Sắc độ là góc dùng cho các kiểu phối màu, nên màu bổ sung nằm cách màu gốc 180 độ trong OKLCH chứ không phải trong HSL.
Chuyện gì xảy ra khi một màu không thể hiển thị trên màn hình?
Xoay sắc độ trong khi giữ nguyên độ sáng và độ bão hòa đôi khi rơi ra ngoài dải sRGB mà màn hình thông thường hiển thị được. Khi đó công cụ giảm độ bão hòa, giữ nguyên độ sáng và sắc độ, cho đến khi màu vừa vặn. Đó là lý do một ô màu đã xoay có thể trông kém rực hơn một chút so với màu gốc.
Nhãn AA và AAA có nghĩa là gì?
Chúng báo tỷ lệ tương phản WCAG 2 của chữ trắng hoặc chữ đen trên ô màu đó. Tỷ lệ từ 4,5 trở lên là AA cho chữ thường, từ 7 trở lên là AAA, và từ 3 đến 4,5 chỉ đạt AA cho chữ lớn. Ô màu không đạt cả với chữ đen và chữ trắng là nền kém cho văn bản.
Bảng màu ngẫu nhiên hoạt động như thế nào?
Năm màu được tạo bằng bộ tạo số ngẫu nhiên an toàn của trình duyệt: các sắc độ trải đều quanh vòng màu, với độ sáng và độ bão hòa ngẫu nhiên trong khoảng tránh gần đen và gần trắng. Khóa một ô màu để giữ lại, rồi bấm Bảng màu ngẫu nhiên hoặc phím cách để thay các ô còn lại.
Tôi nên dùng định dạng xuất nào?
Biến CSS dán thẳng vào khối :root của stylesheet. Mảng JSON phù hợp với design token hoặc script, còn danh sách thuần là mỗi dòng một mã HEX cho các công cụ chấp nhận màu được dán vào. Cả ba đều dùng các giá trị HEX đang hiển thị.
Công cụ có xử lý HEX viết tắt và chữ hoa không?
Có. #abc, abc, #AABBCC và aabbcc đều được đọc. Giá trị có cặp alpha, chẳng hạn tám chữ số, không được chấp nhận ở đây; hãy dùng Chuyển đổi màu và kiểm tra độ tương phản để bỏ alpha trước.