DevBox Tools logoDevBox Tools

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

Trình tạo màu ngẫu nhiên ở định dạng HEX, RGB và HSL. Nhận một hoặc nhiều màu với bản xem trước trực quan và sao chép các giá trị một cách tiện lợi.

Màu ngẫu nhiên

Xem trước

Black Text
Shadow
White Text
Shadow

Mã màu

HEX
#C5ECE5
RGB
rgb(197, 236, 229)
HSL
hsl(169, 51%, 85%)

Gradient màu

%HEXRGBHSL
100%
#ffffffrgb(255, 255, 255)hsl(0, 0%, 100%)
95%
#f9fdfcrgb(249, 253, 252)hsl(165, 50%, 98%)
90%
#f3fbfargb(243, 251, 250)hsl(173, 50%, 97%)
85%
#eef9f7rgb(238, 249, 247)hsl(169, 48%, 95%)
80%
#e8f7f5rgb(232, 247, 245)hsl(172, 48%, 94%)
75%
#e2f6f2rgb(226, 246, 242)hsl(168, 53%, 93%)
70%
#dcf4efrgb(220, 244, 239)hsl(167, 52%, 91%)
65%
#d6f2edrgb(214, 242, 237)hsl(169, 52%, 89%)
60%
#d1f0eargb(209, 240, 234)hsl(168, 51%, 88%)
55%
#cbeee8rgb(203, 238, 232)hsl(170, 51%, 86%)
50%
#c5ece5rgb(197, 236, 229)hsl(169, 51%, 85%)
45%
#b1d4cergb(177, 212, 206)hsl(170, 29%, 76%)
40%
#9ebdb7rgb(158, 189, 183)hsl(168, 19%, 68%)
35%
#8aa5a0rgb(138, 165, 160)hsl(169, 13%, 59%)
30%
#768e89rgb(118, 142, 137)hsl(167, 10%, 51%)
25%
#637673rgb(99, 118, 115)hsl(171, 9%, 43%)
20%
#4f5e5crgb(79, 94, 92)hsl(172, 9%, 34%)
15%
#3b4745rgb(59, 71, 69)hsl(170, 9%, 25%)
10%
#272f2ergb(39, 47, 46)hsl(172, 9%, 17%)
5%
#141817rgb(20, 24, 23)hsl(165, 9%, 9%)
0%
#000000rgb(0, 0, 0)hsl(0, 0%, 0%)
Khám phá công cụ tương tự
Hỗ trợ DevBox Tools ❤️

Tính năng của công cụ "Trình tạo màu ngẫu nhiên"

Tạo màu ở các định dạng khác nhau

Tạo các màu ngẫu nhiên ở các định dạng HEX (#FFFFFF), RGB (rgb(255, 255, 255)) và HSL (hsl(0, 0%, 100%)) với sự hỗ trợ của kênh alpha cho độ trong suốt.

Tạo các biến thể màu

Tạo các biến thể sáng và tối của một màu đã chọn, hiển thị các thay đổi theo phần trăm từ 0% đến 100% để tạo các bảng màu hài hòa.

Xử lý hàng loạt lên đến 100 màu

Cho phép bạn tạo tối đa 100 màu cùng một lúc với khả năng loại trừ các bản sao, điều này thuận tiện để tạo các bảng màu lớn.

Hướng dẫn và chi tiết sử dụng

Công cụ Random Color Generator làm gì

Random Color Generator tạo ra các màu ngẫu nhiên ở định dạng HEX, RGB và HSL, kèm theo xem trước trực quan, sao chép nhanh và tạo bảng màu.

Với công cụ này, bạn có thể:

  • lấy một màu ngẫu nhiên chỉ với một cú nhấp

  • tạo nhiều màu cùng lúc

  • tạo các biến thể (shade) của một màu

  • làm việc với nhiều định dạng màu khác nhau

Phù hợp cho designer, developer và các tác vụ liên quan đến UI.

Bắt đầu nhanh

  1. Chọn chế độ (Biến thể / Bảng màu / Hàng loạt)

  2. Nhấn “Tạo màu”

  3. Điều chỉnh cài đặt nếu cần

  4. Sao chép kết quả

Các chế độ của công cụ

Công cụ hỗ trợ 3 chế độ tạo màu.

Biến thể

Tạo một màu ngẫu nhiên kèm xem trước.

Tính năng:

  • giá trị HEX, RGB, HSL

  • xem trước văn bản (kiểm tra độ tương phản)

  • gradient và các sắc độ màu

  • sao chép giá trị

Sử dụng khi: bạn cần chọn màu nhanh.

Bảng màu

Tạo một bộ màu ngẫu nhiên.

Tính năng:

  • nhiều màu cùng lúc

  • thẻ màu trực quan

  • sao chép HEX nhanh

Dùng cho:

  • tìm phối màu

  • thiết kế UI/UX

  • lấy cảm hứng

Hàng loạt

Tạo danh sách màu (tối đa 100) theo định dạng đã chọn.

Tính năng:

  • chọn định dạng (HEX / RGB / HSL)

  • thiết lập số lượng và kênh alpha

  • sao chép toàn bộ danh sách

Dùng cho:

  • tạo dữ liệu

  • kiểm thử

  • tự động hóa

Định dạng mã màu

Màu sắc có 3 định dạng chính: HEX, RGB và HSL. Mỗi định dạng có mục đích sử dụng khác nhau.

Định dạng

Cú pháp

Ví dụ

Cách hoạt động

Khi sử dụng

HEX

#RRGGBB

#FF5733

Sử dụng giá trị hệ 16 cho các kênh đỏ, xanh lá, xanh dương

Phát triển web, CSS, sao chép nhanh

RGB

rgb(R, G, B)

rgb(255, 87, 51)

Xác định màu theo cường độ RGB (0–255)

Đồ họa, Canvas, JS động

HSL

hsl(H, S%, L%)

hsl(14, 100%, 60%)

Dựa trên hue, saturation và lightness

Design system, palette, biến thể

Kênh alpha (độ trong suốt) được hỗ trợ qua RGBA và HSLA. Dùng cho overlay, bóng và hiệu ứng UI.

Cách chọn màu phù hợp

Khi làm việc với màu ngẫu nhiên, hãy lưu ý:

  • Độ tương phản — văn bản phải dễ đọc

  • Độ bão hòa — màu quá яр có thể gây mỏi mắt

  • Tính nhất quán — chỉ nên dùng 2–3 màu chính

  • Hành vi UI — kiểm tra trạng thái khi di chuột và khi nhấn

Đối với giao diện, HSL thường là lựa chọn tốt nhất vì cho phép kiểm soát biến thể màu dễ hơn.

HSL đặc biệt hữu ích khi tạo các sắc độ của một màu: chỉ cần điều chỉnh lightness (L) để tạo trạng thái hover/active mà không phá vỡ sự hài hòa.

Hạn chế

  • Màu được tạo ngẫu nhiên — có thể không hài hòa

  • Không đảm bảo độ tương phản — văn bản có thể khó đọc

  • Không xét đến guideline thương hiệu hoặc design system

Lỗi phổ biến

  • Dùng màu ngẫu nhiên mà không kiểm tra tương phản: khó đọc

  • Dùng quá nhiều màu: UI rối

  • Bỏ qua sự khác biệt định dạng: lỗi trong CSS hoặc code

  • Dùng palette hoàn toàn ngẫu nhiên trong production: giảm UX

Mô tả công cụ

alien

Trình tạo màu ngẫu nhiên tạo ra các màu ngẫu nhiên ở các định dạng khác nhau (HEX, RGB, HSL) cho các nhà thiết kế, nhà phát triển và nghệ sĩ. Điều này hữu ích để tạo các bảng màu, kiểm tra các thiết kế và tạo cảm hứng cho các dự án.

Công cụ này hỗ trợ tạo màu ở các định dạng HEX, RGB và HSL, cũng như tạo các biến thể sáng và tối của một màu đã chọn. Bạn có thể tạo tối đa 100 màu cùng một lúc với khả năng loại trừ các bản sao.

Lý tưởng cho các nhà thiết kế web, các nhà thiết kế đồ họa, các nhà phát triển và tất cả những ai làm việc với màu sắc trong các dự án của họ. Các màu được tạo ra có thể được sao chép và sử dụng trong CSS, các chương trình thiết kế và phát triển web.

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

Trình tạo màu ngẫu nhiên tạo ra các màu ngẫu nhiên ở các định dạng khác nhau (HEX, RGB, HSL) cho các nhà thiết kế, nhà phát triển và nghệ sĩ. Điều này hữu ích để tạo các bảng màu, kiểm tra các thiết kế và tạo cảm hứng cho các dự án.

Trình tạo hỗ trợ các định dạng HEX (#FFFFFF), RGB (rgb(255, 255, 255)), HSL (hsl(0, 0%, 100%)), cũng như các biến thể của chúng với kênh alpha cho độ trong suốt.

Có, trình tạo tạo ra các biến thể sáng và tối của màu đã chọn, hiển thị các thay đổi theo phần trăm từ 0% đến 100%. Điều này giúp tạo ra các bảng màu hài hòa.

Trình tạo cho phép bạn tạo tối đa 100 màu cùng một lúc. Bạn có thể chọn số lượng màu, định dạng và bật tùy chọn loại trừ các bản sao.

Các màu được tạo ra có thể được sao chép vào clipboard và được sử dụng trong CSS, các chương trình thiết kế, phát triển web và bất kỳ dự án nào khác yêu cầu các giải pháp màu sắc.

RGB (đỏ, xanh lá cây, xanh lam) xác định các màu theo cường độ của màu đỏ, xanh lá cây và xanh lam. HSL (sắc thái, độ bão hòa, độ sáng) xác định các màu theo sắc thái (màu sắc), độ bão hòa (cường độ của màu sắc) và độ sáng (độ sáng). HSL thường trực quan hơn đối với con người khi chọn màu.

Có, bạn có thể chuyển đổi ngay lập tức giữa các định dạng HEX, RGB và HSL để thuận tiện cho việc làm việc trong các dự án khác nhau.

Kênh alpha (A) trong các định dạng như RGBA hoặc HSLA đại diện cho độ mờ hoặc độ trong suốt của một màu. Giá trị 1 (hoặc 100%) có nghĩa là hoàn toàn mờ, trong khi 0 có nghĩa là hoàn toàn trong suốt. Điều này quan trọng đối với các yếu tố thiết kế có các lớp phủ và các hiệu ứng trong suốt.

Đánh giá công cụ này
4.5(25 người dùng đã đánh giá)