Bạn cần màu cho bản phác thảo, biểu đồ hay khung hình trống, nhưng đã chán với việc chọn đi chọn lại những màu quen thuộc? Trình tạo màu ngẫu nhiên miễn phí này lấy màu từ toàn bộ dải 24-bit mà màn hình có thể hiển thị, rồi hiển thị mỗi màu trên một ô màu kèm mã của nó. Chọn số lượng màu trong ô “Số lượng mục chọn” từ 1 đến 50, đánh dấu các định dạng cần thiết rồi nhấn “Tạo”. Trang mở ra với một màu theo định dạng HEX, nên kết quả đầu tiên chỉ cần một lần nhấp. Hộp kiểm “Mã HEX” được chọn sẵn, cùng với “Mã RGB” và “Mã HSL” ở cạnh, và có thể bật bất kỳ kết hợp nào trong ba định dạng cùng lúc. Nút bánh răng cạnh “Tạo” mở bảng “Tùy chọn nâng cao”, nơi bạn có thể giới hạn màu theo loại hoặc phạm vi, loại bỏ trùng lặp, và thay đổi cách viết HEX.
Mỗi màu được tạo ngay trong trình duyệt của bạn qua Web Crypto API (crypto.getRandomValues), cung cấp các byte ngẫu nhiên mạnh về mặt mật mã học từ nguồn ngẫu nhiên riêng của hệ thống — không phải hàm giả ngẫu nhiên như Math.random(). Một màu trên màn hình có ba kênh — đỏ, xanh lá và xanh lam — mỗi kênh là một số nguyên từ 0 đến 255, và một byte ngẫu nhiên nhận đúng một trong 256 giá trị. Vì vậy mỗi kênh chỉ là một byte, không phép chia nào và không phần dư nào, và không có sắc thái nào được ưu tiên bởi bước chuyển đổi nào. Điều này giúp tất cả 16.777.216 màu mà trang có thể tạo đều có cơ hội bằng nhau trong mỗi lần nhấn “Tạo”. Phạm vi hẹp hơn trong “Tùy chọn nâng cao” vẫn duy trì quy tắc đó trong phạm vi: màu vẫn được lấy từ toàn bộ không gian, những màu nằm ngoài bị loại, nên mỗi màu trong phạm vi có cơ hội như nhau. Không có gì được gửi đến máy chủ, không có gì được ghi log, và trang tiếp tục hoạt động ngoại tuyến sau khi đã tải xong.
Ba định dạng này mô tả cùng một màu theo ba cách khác nhau. Định dạng “Mã HEX” là dạng sáu chữ số như #0778ff được dùng trong CSS và hầu hết các công cụ thiết kế; nó được viết bằng chữ thường với dấu # phía trước, và các tùy chọn “Chữ hoa” và “Không có #” trong “Tùy chọn nâng cao” sẽ thay đổi điều đó cho các công cụ yêu cầu định dạng khác. Định dạng “Mã RGB” hiển thị ba kênh riêng biệt dưới dạng rgb(7, 120, 255), phù hợp cho code làm việc với từng kênh riêng. Định dạng “Mã HSL” mô tả màu qua hue, saturation và lightness dưới dạng hsl(213, 100%, 51%), dễ điều chỉnh thủ công nhất sau này. Cả ba đều có thể dán thẳng vào stylesheet. Nhưng chúng không chính xác như nhau. “Mã HEX” và “Mã RGB” chính xác tuyệt đối; HSL là xấp xỉ. Trang viết hue, saturation và lightness dưới dạng số nguyên, và với khoảng 89% màu, giá trị xấp xỉ đó sẽ không cho lại đúng màu ban đầu: #646503 hiển thị là hsl(61, 94%, 20%), khi chuyển ngược lại thành #616303. Sai lệch không vượt quá 5 bước ở bất kỳ kênh nào, thường là 1 hoặc 2 — mắt thường không thấy trên màn hình, nhưng có thật khi lưu giá trị HSL và mong nhận lại đúng HEX ban đầu. Vì vậy hãy lưu HEX hoặc RGB làm giá trị để giữ.
Một màu kết quả hiển thị dưới dạng chip ở giữa; nhiều màu hiển thị dưới dạng danh sách có đánh số, một màu mỗi hàng, với các định dạng đã chọn nằm cạnh nhau và một nhãn tương phản nhỏ ở cuối mỗi hàng. Danh sách nhiều hơn ba màu sẽ cuộn trong hộp, mũi tên ở góc mở rộng nó ra toàn bộ chiều cao; trang ghi nhớ trạng thái bạn để lại. Nhấp vào bất kỳ mã nào để sao chép riêng mã đó. Nút “Sao chép” ở cuối hàng sao chép tất cả mã của màu đó trên một dòng, ngăn cách bằng dấu cách. Nhấp vào ô màu mở bộ chọn màu của trình duyệt: chọn màu khác ở đó sẽ ghi lại mỗi mã trong hàng đó theo mọi định dạng bạn đã bật kèm nhãn của nó. Nút “Sao chép tất cả” sao chép toàn bộ lô, một màu mỗi dòng; “Lưu vào tệp” lưu cùng văn bản đó dưới dạng file .txt; cả hai đều theo dõi các màu bạn đã thay đổi trong bộ chọn màu. “Lịch sử” lưu 10 lô gần nhất trong trình duyệt này như khi được tạo, “Xóa” dọn sạch kết quả. Các cài đặt của bạn, kể cả trong “Tùy chọn nâng cao”, được ghi nhớ cho lần truy cập tiếp theo.
Các màu có cơ hội bằng nhau trông không phân bố đều theo cách mắt thường thấy, và biết điều gì sẽ xảy ra giúp tránh nhấn “Tạo” vì lý do sai. Đo trên toàn bộ dải, khoảng 35% màu là sáng và bão hòa, với HSL saturation ít nhất 70% và lightness từ 35%–65%. Màu gần xám với saturation dưới 20% chỉ khoảng 4%, màu rất tối (lightness dưới 20%) và rất sáng (trên 80%) mỗi loại khoảng 3%. Vì vậy một lô mười màu từ “Tất cả màu” thường có vài màu đậm, và pastel hay màu gần xám hiếm khi xuất hiện. Khi cần một loại cụ thể, hãy chọn trong “Loại màu”: “Rực rỡ” chỉ giữ nhóm bão hòa đó, “Pastel”, “Tối”, “Trầm” và “Thang xám” làm tương tự cho nhóm của chúng. “Tùy chỉnh” cho phép bạn đặt phạm vi “Hue”, “Saturation” và “Lightness” riêng, và phạm vi hue có thể vượt qua 0, nên 330 đến 30 cho màu đỏ. Phạm vi được kiểm tra so với mã HSL trang hiển thị, không mã nào lọt ra ngoài phạm vi, và nếu quá ít màu trong phạm vi cho “Số lượng mục chọn” của bạn, trang sẽ yêu cầu mở rộng phạm vi thay vì lặp lại màu. Ngoài ra trùng lặp là có thể nhưng hiếm: đánh dấu “Không lặp lại” để chặn hoàn toàn; nếu không, khả năng hai trong 50 màu từ toàn bộ dải trùng nhau là khoảng 1 trong 13.700.
Màu ngẫu nhiên thường cần làm nền, đặt ra câu hỏi mà ô màu không thể trả lời bằng mắt: liệu chữ có đọc được trên nó không? Tiêu chuẩn khả năng tiếp cận web WCAG yêu cầu tỷ lệ tương phản tối thiểu 4,5:1 cho chữ thường. Đo trên mỗi màu trang có thể tạo, chữ đen đạt ngưỡng đó với khoảng 65% màu và chữ trắng với khoảng 36%, và không màu nào cả hai đều thất bại: tùy chọn tốt hơn luôn đạt ít nhất 4,58:1. Vì vậy với bất kỳ nền ngẫu nhiên nào, chữ đen hoặc trắng sẽ đạt chuẩn, và trang cho biết cái nào. Mỗi màu có một nhãn nhỏ viết Aa bằng màu tốt hơn trong hai màu, theo sau là tỷ lệ tương phản của nó. Tỷ lệ được làm tròn xuống để không bao giờ phóng đại màu, và cập nhật khi màu thay đổi trong bộ chọn màu. Nhãn chỉ so sánh chữ đen và trắng; với màu thương hiệu hoặc màu chữ khác, hãy kiểm tra cặp đó bằng công cụ kiểm tra tương phản.
Ngẫu nhiên không phải là hài hòa. Mỗi màu trong một lô được lấy độc lập, không biết gì về các màu khác, nên trình tạo này không bao giờ xây dựng bảng màu theo nghĩa của nhà thiết kế — không có cặp bổ sung, không có dãy tương tự, không có lightness chung. Phạm vi hẹp thay đổi tính chất của lô, không phải quy tắc đó: pastel hay dãy màu xanh vẫn đến từng cái một, không có liên kết nào giữa chúng. Đó là ý nghĩa của công cụ này: nó cho bạn màu mà bạn không tự chọn, phá vỡ thói quen hay rào cản sáng tạo. Để biến kết quả ngẫu nhiên tìm được thành hữu ích, hãy giữ màu bạn thích và dựng các màu còn lại từ nó, thay vì nhấn “Tạo” cho đến khi cả nhóm tình cờ ăn khớp. Giữ nguyên hue và thay lightness để có biến thể sáng và tối, hoặc xoay hue 180 độ để có màu tương phản. Định dạng “Mã HSL” biến những thao tác đó thành phép tính, không phải phỏng đoán.
Tại sao chọn trình tạo màu ngẫu nhiên này?
- Mỗi màu được tạo trong trình duyệt của bạn bằng Web Crypto API, không tải lên gì cả
- Tất cả 16.777.216 màu có cơ hội bằng nhau, một byte ngẫu nhiên mỗi kênh
- Mã HEX, RGB và HSL cho cùng một màu, theo bất kỳ kết hợp nào
- Tới 50 màu cùng lúc, mỗi màu trên ô màu với nhãn tương phản
- Rực rỡ, Pastel, Tối, Trầm và Thang xám, hoặc đặt phạm vi Hue, Saturation và Lightness riêng
- Không lặp lại khi cần, và HEX viết hoa hoặc không có #
- Nhấp vào mã để sao chép, hoặc thay bất kỳ màu nào trong bộ chọn màu của trình duyệt
- Sao chép tất cả, Lưu vào tệp và Lịch sử 10 lô gần nhất trong trình duyệt
- Miễn phí và không giới hạn: không cần đăng ký, không có hạn mức, không lưu gì trên máy chủ
Màu ngẫu nhiên hữu ích ở bất kỳ đâu cần màu trước khi ai đó quyết định. Các nhà thiết kế dùng chúng để phá vỡ rào cản sáng tạo và tìm điểm khởi đầu mà bảng màu thông thường không bao giờ cho. Các nhà phát triển điền vào mockup, placeholder và avatar, gán màu riêng cho mỗi chuỗi trong biểu đồ trước khi chủ đề thực sự được xác định, và kiểm tra xem giao diện hoạt động thế nào với những nền mà nó không được thiết kế để dùng — một lô 50 màu từ “Tất cả màu” hầu như luôn có ít nhất một màu rất tối hoặc rất sáng, “Tối” hay “Pastel” hướng kiểm tra đến một đầu cụ thể. Các nghệ sĩ nghệ thuật tạo sinh và người tạo mẫu trò chơi đưa giá trị thẳng vào code, nơi định dạng RGB phù hợp trực tiếp với hầu hết thư viện đồ họa. Giáo viên đặt ba định dạng cạnh nhau để thấy cách một màu có thể được viết là code, là ba kênh, hay là vị trí trên vòng tròn màu sắc, và tại sao phiên bản HSL được làm tròn. Bất kỳ ai dán nhãn, gắn thẻ hay mã hóa màu cho danh sách đều nhận được các màu khác nhau mà không phải lo lắng phải chọn cái nào.
Có một số giới hạn thành thật cần biết. Đây là trình tạo, không phải công cụ bảng màu: nó không xây dựng sự hài hòa màu sắc và không khóa một màu trong khi các màu khác thay đổi, và phạm vi hẹp cho một loại màu, không phải các màu được chọn để hài hòa với nhau. Nhãn tương phản chỉ so sánh chữ đen và trắng. Trang làm việc với màu sRGB — HEX, RGB và HSL — không có độ trong suốt, và không có CMYK, Pantone, OKLCH hay màu CSS có tên; để in ấn hãy đối chiếu màu trong quy trình in của bạn thay vì tin vào mã từ màn hình. Cùng một mã có thể trông hơi khác trên các màn hình khác nhau vì màn hình không được hiệu chỉnh như nhau. Các giá trị HSL được làm tròn như đã mô tả, và nếu “Không lặp lại” không được đánh dấu, lô không được kiểm tra trùng lặp. Điều trang đảm bảo là hẹp và chính xác: mỗi một trong 16.777.216 màu của nó, hay mỗi màu trong phạm vi bạn đặt, có cơ hội bằng nhau trong mỗi lần nhấn, được lấy từ nguồn mật mã học của trình duyệt và không bao giờ gửi đi đâu cả.