Trình tạo màu ngẫu nhiên

Màu ngẫu nhiên

Tạo một bộ mã màu HEX ngẫu nhiên mới từ dải sRGB 24 bit. Chọn số lượng mẫu màu bạn cần, xem trước từng màu ngay lập tức, rồi sao chép mã vào CSS, ghi chú thiết kế, fixture QA hoặc thử nghiệm bảng màu.

Cách tạo màu HEX ngẫu nhiên

  1. 1

    Chọn số lượng

    Nhập bất kỳ số nào từ 1 đến 50 tùy theo số mẫu màu bạn muốn xem.

  2. 2

    Tạo mẫu màu

    Mỗi kết quả là một mã HEX sáu chữ số theo dạng #RRGGBB, với các giá trị kênh đỏ, xanh lục và xanh lam riêng biệt.

  3. 3

    Sao chép và kiểm tra

    Giữ lại màu bạn thích, kiểm tra độ tương phản trước khi dùng với văn bản, và chỉ chuyển sang RGB hoặc HSL nếu quy trình của bạn cần.

Trình tạo này tạo ra gì

Mỗi mã đại diện cho một màu sRGB 24 bit: 8 bit cho đỏ, 8 cho xanh lục và 8 cho xanh lam. Điều đó tạo ra 16.777.216 giá trị HEX có thể có, từ #000000 đến #FFFFFF. Công cụ hiển thị mẫu màu và mã; công cụ không đặt tên, xếp hạng hoặc bảo đảm độ dễ đọc của màu.

Cách đọc màu HEX

Phần Ý nghĩa Phạm vi
# Dấu màu trong CSS Tiền tố cố định
RR Kênh đỏ 00 đến FF
GG Kênh xanh lục 00 đến FF
BB Kênh xanh lam 00 đến FF

Cách dùng thực tế

  • Phác thảo trạng thái giao diện, điểm nhấn biểu đồ hoặc hình ảnh tạm khi màu cuối cùng chưa được quyết định.
  • Tạo bảng màu ban đầu, sau đó loại bỏ các màu quá giống nhau, quá tối hoặc quá chói.
  • Tạo dữ liệu kiểm thử cho CSS, SVG, canvas và ví dụ trong design system.

Trước khi dùng màu ngẫu nhiên trong sản phẩm thật

Màu ngẫu nhiên chỉ là điểm khởi đầu. Với văn bản, nút và thành phần điều khiển, hãy kiểm tra màu đó với màu tiền cảnh hoặc nền. WCAG AA yêu cầu tỷ lệ tương phản 4,5:1 cho văn bản thường và 3:1 cho văn bản lớn. Với thương hiệu hoặc in ấn, hãy xem lại màu trên màn hình đã hiệu chuẩn và chuyển đổi riêng cho bản in.

Câu hỏi thường gặp

HEX ngẫu nhiên bao phủ mọi giá trị kênh, nên nhiều kết quả sẽ không giống màu trong bảng màu đã được tinh chỉnh. Hãy tạo một tập lớn hơn và giữ lại các mẫu có đủ độ tương phản và độ bão hòa cho mục đích của bạn.

Công cụ này tạo các màu ngẫu nhiên độc lập. Để có bảng màu gắn kết hơn, hãy dùng trình tạo bảng màu hoặc tự giữ trong cùng một nhóm hue khi chọn biến thể sáng hơn và tối hơn.

Công cụ này không có điều khiển seed. Hãy sao chép các mã HEX bạn muốn giữ để có thể dùng lại sau.

Có. Giá trị HEX sáu chữ số #RRGGBB là cú pháp màu CSS tiêu chuẩn và dùng được trong các thuộc tính như color, background-color, đường viền, gradient và phần tô SVG.

Không nếu chưa kiểm tra tương phản. Một mẫu màu ngẫu nhiên có thể dễ dàng không đạt yêu cầu tương phản WCAG, nhất là khi nằm sau chữ nhỏ hoặc kiểu chữ mảnh.

Công cụ liên quan