Công cụ Màu sắc Màu sắcCông cụ Tạo TạoCông cụ Chuyển đổi Chuyển đổi

Trình Tạo Cặp Màu Chế Độ Tối

Dán bảng màu HEX chế độ sáng và nhận màu chế độ tối tương ứng qua đảo độ sáng OKLCH. Kiểm tra tương phản WCAG và xuất biến CSS.

Dán màu HEX phân cách bằng xuống dòng, dấu phẩy hoặc khoảng trắng. Hỗ trợ ký hiệu 3 ký tự (#fff).

Trình Tạo Cặp Màu Chế Độ Tối Là Gì?

Một công cụ chính xác về mặt cảm nhận, chuyển đổi bảng màu chế độ sáng bất kỳ thành bảng màu chế độ tối tương ứng. Thay vì đảo ngược giá trị HEX một cách ngây thơ, nó hoạt động trong OKLCH — không gian màu đồng đều về cảm nhận đang dẫn dắt CSS hiện đại — chỉ đảo thành phần độ sáng trong khi giữ nguyên màu sắc. Điều này giữ cho màu thương hiệu dễ nhận biết trong chế độ tối nhưng vẫn cho chúng vẻ ngoài dịu hơn mà người dùng mong đợi. Mỗi cặp được kiểm tra theo hướng dẫn tương phản WCAG để bạn có thể phát hành giao diện dễ tiếp cận.

Tính Năng Chính

  • Đảo độ sáng dựa trên OKLCH bảo toàn màu sắc và bản sắc thương hiệu
  • Tỷ lệ tương phản WCAG theo từng màu so với nền #FFFFFF và #121212 (huy hiệu AA / AAA)
  • Giảm bão hòa, sàn và trần độ sáng có thể điều chỉnh để kiểm soát tinh tế
  • Mẫu xem trước sáng và tối cạnh nhau
  • Xuất dưới dạng biến CSS sẵn sàng dùng cho :root, [data-bs-theme="dark"] và prefers-color-scheme
  • Chấp nhận HEX 3 và 6 ký tự ở định dạng phân cách bằng khoảng trắng, dấu phẩy hoặc dòng mới
  • 100% trên trình duyệt — bảng màu không bao giờ rời khỏi thiết bị
Trình Tạo Cặp Màu Chế Độ Tối — Dán bảng màu HEX chế độ sáng và nhận màu chế độ tối tương ứng qua đảo độ sáng OKLCH. Kiểm tra tương phản WCAG và xuất bi
Trình Tạo Cặp Màu Chế Độ Tối

Cách Sử Dụng

  1. Dán màu HEX chế độ sáng vào hộp bảng màu (mỗi màu một dòng hoạt động tốt nhất)
  2. Tùy chọn điều chỉnh giảm bão hòa nếu màu tối trông quá bão hòa
  3. Điều chỉnh sàn độ sáng để tránh nền tối chuyển thành đen tuyền
  4. Điều chỉnh trần độ sáng để tránh văn bản sáng chuyển thành trắng tinh (giảm mỏi mắt)
  5. Nhấn Tạo Cặp Tối để xem mẫu, điểm WCAG và xuất biến CSS
  6. Sao chép khối CSS và dán vào stylesheet — chủ đề tối của bạn đã sẵn sàng

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

HSL là không gian màu tiện lợi từ thập niên 1970 — dễ chịu cho bộ chọn nhưng sai về mặt cảm nhận. Một màu vàng sáng ở HSL 60 50 50 trông sáng hơn nhiều so với màu xanh đậm ở HSL 240 50 50, vì vậy đảo ngược độ sáng một cách ngây thơ trong HSL cho kết quả không đều: vàng nhạt biến thành mù tạt mờ trong khi xanh nhạt vẫn sáng. OKLCH (do Björn Ottosson thiết kế năm 2020 và nay là bản địa trong CSS) đồng đều về cảm nhận: các giá trị độ sáng bằng nhau trông sáng như nhau qua mọi màu sắc.

Chủ đề tối cố ý giảm bão hòa màu vì độ bão hòa rực rỡ trên nền tối gây mỏi mắt — đồng tử mở rộng trong môi trường ánh sáng yếu, khuếch đại quang sai màu. iOS, macOS và Material Design đều giảm chroma trong bảng màu tối khoảng 10-30%. Mức giảm bão hòa mặc định 15% ở đây khớp với hướng dẫn đó. Nếu màu tối cảm thấy QUÁ nhạt, giảm thanh trượt về 0%; nếu cảm thấy quá rực, đẩy về 50%.

Sàn đặt độ sáng tối nhất mà bất kỳ màu chế độ tối nào có thể đạt. Sàn 12% ngăn các màu tối nhất của bạn rơi vào đen tuyền (#000), điều mà Hướng dẫn Giao diện Con người của Apple rõ ràng không khuyến khích vì nền đen tuyền làm hào quang và bóng ma quanh văn bản dễ thấy hơn trên OLED. Trần giới hạn màu chế độ tối có thể sáng đến đâu, thường 92-95%, vì vậy văn bản 'trắng' trở thành trắng dịu thay vì #FFFFFF — giảm độ chói tương phản.

Công cụ tính tỷ lệ tương phản WCAG 2.1 cho từng cặp so với nền sáng (#FFFFFF) và tối (#121212) điển hình và gắn nhãn: Thất bại (<3), AA Lớn (≥3), AA (≥4.5), AAA (≥7). Văn bản thân cần ít nhất AA (4.5:1) và văn bản lớn ít nhất AA Lớn (3:1). Nếu thấy huy hiệu Thất bại, màu đó dành cho trang trí hoặc hiển thị lớn, không phải văn bản thân.

Chỉ màu đặc. Đối với gradient, chạy từng màu dừng qua công cụ riêng lẻ và ráp lại trong CSS. Nội suy gradient OKLCH trong CSS hiện đại (linear-gradient(in oklch, ...)) sẽ cho kết quả mượt mà về cảm nhận với các điểm dừng đã chuyển đổi, mượt hơn nhiều so với gradient mặc định trong không gian sRGB hay bị nhão ở giữa.

Xuất CSS dùng biến CSS chuẩn hoạt động bản địa trong Tailwind v3+ qua chỉ thị @theme, trong SCSS qua @use 'sass:meta', và trong CSS thuần ở mọi trình duyệt hiện đại (Chrome 49+, Safari 9.1+, Firefox 31+). Đối với React Native hoặc Flutter, sao chép giá trị HEX từ bảng mẫu và định nghĩa trong file hằng số riêng. Mẫu tên biến (--color-1, --color-2, ...) cố ý tổng quát để bạn có thể đổi tên cho khớp token thiết kế.

color-scheme cho trình duyệt biết dùng điều khiển biểu mẫu tích hợp và thanh cuộn nào — KHÔNG sửa đổi bảng màu của bạn. color-mix() trộn hai màu nhưng không thể thông minh đảo độ sáng mà giữ màu sắc. Công cụ này cho bạn giá trị HEX cụ thể để phát hành dưới dạng token thiết kế, nghĩa là bạn kiểm soát chính xác những gì người dùng thấy và kiểm tra khả năng tiếp cận trước. Đầu ra cũng tương thích với QA thiết kế dựa trên ảnh chụp màn hình và email HTML render server.
Xem thêm
Công cụ màu sắcCôNG Cụ MàU SắC31
WuToolsWUTOOLS