Tạo bảng màu

Cách sử dụng

1. Bảng phối và thang độ sáng đã có trên màn hình khi trang mở, dựng từ màu gốc mặc định #4F46E5 — kết quả đầu tiên không cần nhấp gì.
2. Đổi thành màu của bạn: dán #4F46E5, rgb(79, 70, 229), hsl(243, 75%, 59%) hoặc tên màu CSS tiếng Anh, dùng bộ chọn hệ thống, hoặc nhấn “Màu gốc ngẫu nhiên”. Mọi thứ tính lại khi bạn gõ.
3. Chọn cách các hue liên hệ. Tương đồng (0°, ±30°, ±60°) giữ trong vùng lân cận; Bổ sung (0°, 180°) là đối diện trực tiếp; Tam giác (0°, 120°, 240°) và Tứ giác (0°, 90°, 180°, 270°) mở rộng độ trải; Chia bổ sung (0°, 150°, 210°) giữ căng thẳng mà không chói. Thang luôn là màu gốc ở độ sáng 88 / 70 / 52 / 34 / 18%, nên “bản sáng hơn/tối hơn của màu chính” chỉ cách một cú nhấp.
4. Nhấp vào bất kỳ ô màu để sao chép giá trị theo định dạng đã chọn; “Sao chép CSS” cho cả bộ dưới dạng thuộc tính tùy chỉnh :root, “Sao chép giá trị” cho mỗi dòng một giá trị.

Phạm vi, giới hạn và câu hỏi thường gặp

• Năm quy tắc, không góc tùy chỉnh và không vòng tròn màu: nếu cần hue chính xác, hãy đặt màu gốc hoặc dùng công cụ chuyển đổi màu.
• Thang dùng các bước độ sáng cố định (88 / 70 / 52 / 34 / 18%) chứ không phải “gần trắng/đen hơn 25% so với màu của bạn”. Nhờ vậy các bậc so sánh được giữa các màu gốc khác nhau, nhưng màu gốc vốn đã rất sáng hoặc rất tối sẽ có các bậc gần như không khác nó.
• Màu gốc xám, trắng hoặc đen cho bảng phối hoàn toàn giống nhau: xoay hue trên màu đã bão hòa hoàn toàn không thay đổi gì. Đó là số học trung thực, không phải lỗi.
• Chỉ màu đục: không alpha, không rgba(), không HEX 8 chữ số. Độ trong suốt thuộc về công cụ chuyển đổi màu.
• Chỉ giá trị màn hình sRGB: không CMYK, không Lab, không quản lý màu — cùng một HEX vẫn trông khác trên màn hình chưa hiệu chuẩn, và công cụ này không giả vờ ngược lại.
• Độ tương phản chỉ dùng để quyết định chữ in trên ô màu là đen hay trắng. Không báo cáo tỷ lệ tương phản; để kiểm tra khả năng tiếp cận, hãy dùng công cụ chuyển đổi màu.
• Hình học bảo đảm quan hệ hue, không bảo đảm thẩm mỹ: một cặp bổ sung ở độ bão hòa cao vẫn có thể rất chói. Quy tắc chỉ có nghĩa như vậy.
• “Màu gốc ngẫu nhiên” lấy từ crypto.getRandomValues của trình duyệt — mạnh về mật mã, không phải dịch vụ entropy vật lý — và bị vô hiệu khi trình duyệt không có nguồn đó. Mọi thứ khác vẫn hoạt động.
• Không tải lên, không lưu trữ, không đưa vào URL: tải lại trở về #4F46E5 + Tương đồng + HEX, và nút chia sẻ chỉ chia sẻ liên kết trang. Hãy mang bảng phối ra bằng “Sao chép CSS”.
• Tên màu CSS tiếng Anh được nhận làm đầu vào vì đó là cú pháp CSS; không có đầu ra tên màu bản địa hóa — cùng một màu không có tên chuẩn tiếng Trung hay tiếng Ả Rập để in.
• Việc làm tròn chỉ ở mức hiển thị: các kênh là số nguyên, nên chuyển cùng một màu giữa HEX và HSL có thể lệch một kênh 1 đơn vị.