Chuyển đến nội dung chính
EVOA Toolbox

Tạo bảng màu

Tạo các bảng phối màu từ một màu gốc, khóa màu yêu thích, kiểm tra độ tương phản WCAG và xuất sang CSS, Tailwind, JSON hoặc PNG.

Được xử lý cục bộ trong trình duyệt. Văn bản của bạn không được tải lên.

Đang tải công cụ…

Công cụ này làm gì

Chọn một màu gốc và nhận ngay bảng màu được xây dựng theo quy tắc lý thuyết màu sắc: bổ túc (complementary), tương đồng (analogous), tam giác (triadic), tứ giác (tetradic), bổ túc chia (split-complementary), đơn sắc (monochromatic), hoặc một dải sắc độ tối và sáng (shades và tints). Phép tính sắc độ được thực hiện trong HSL, và mỗi ô màu hiển thị giá trị dưới dạng HEX, RGB, HSL và OKLCH để bạn sao chép loại phù hợp với công nghệ đang dùng.

Mỗi ô màu còn cho biết tỷ lệ tương phản với chữ trắng và chữ đen, cũng như việc nó đạt WCAG AA (4.5:1), AAA (7:1) hay chỉ đạt ngưỡng cho chữ cỡ lớn (3:1), giúp bạn chọn màu cho nút và nền. Nhấn Ngẫu nhiên để khám phá: khóa những màu bạn thích và các màu còn lại sẽ thay đổi xung quanh chúng.

Khi đã hài lòng, hãy xuất bảng màu dưới dạng biến CSS tùy chỉnh, khối @theme của Tailwind v4, phần mở rộng cấu hình Tailwind v3, JSON hoặc ảnh PNG các ô màu. Mọi thứ chạy cục bộ và không có gì được gửi đi đâu cả.

Cách sử dụng

  1. 1Chọn màu gốc bằng bộ chọn màu hoặc nhập giá trị hex như #2f5bea.
  2. 2Chọn một kiểu phối màu. Dùng thanh trượt số lượng cho kiểu đơn sắc, sắc độ tối và sắc độ sáng.
  3. 3Nhấn Ngẫu nhiên để khám phá, và khóa những màu bạn muốn giữ lại.
  4. 4Kiểm tra nhãn tương phản trên từng ô màu trước khi dùng cho chữ hoặc nút.
  5. 5Sao chép giá trị từng ô màu hoặc xuất cả bảng màu theo định dạng bạn cần.

Định dạng được hỗ trợ

Đầu vào: màu HEX (#rgb hoặc #rrggbb). Đầu ra: biến CSS, đoạn mã Tailwind v3/v4, JSON và PNG.

Quyền riêng tư

Công cụ này chạy trong trình duyệt của bạn. Dữ liệu bạn cung cấp được xử lý trên thiết bị và không được gửi đến máy chủ của chúng tôi.

Hạn chế

  • Các kiểu phối màu chỉ là gợi ý theo toán học, không phải thiết kế hoàn chỉnh; hãy tinh chỉnh bằng mắt và thử trong ngữ cảnh thực tế.
  • Độ tương phản chỉ được đo giữa màu của ô với trắng thuần và đen thuần. Hãy kiểm tra riêng các cặp chữ và nền thực tế của bạn.
  • Màu sắc hiển thị khác nhau giữa các màn hình và hồ sơ màu; các giá trị là sRGB.
  • Giá trị alpha/độ mờ không nằm trong bảng màu.

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

Màu tương đồng và màu tam giác khác nhau thế nào?

Màu tương đồng nằm cạnh nhau trên vòng màu (cách nhau 30 độ) và tạo cảm giác êm dịu, hài hòa. Màu tam giác cách nhau 120 độ và mang lại nhiều sự đa dạng và tương phản hơn.

AA và AAA nghĩa là gì?

Đó là các mức tương phản WCAG 2 dành cho văn bản. AA cần 4.5:1 cho chữ thường (3:1 cho chữ cỡ lớn); AAA cần 7:1 cho chữ thường. Công cụ hiển thị mức cao nhất mà mỗi ô màu đạt được khi đặt trên nền trắng và trên nền đen.

Tính năng khóa hoạt động thế nào?

Ô màu đã khóa giữ nguyên màu khi bạn nhấn Ngẫu nhiên hoặc đổi màu gốc hay kiểu phối màu, nhờ vậy bạn có thể xây dựng bảng màu quanh những màu mình đã thích.

Tôi nên dùng kiểu xuất nào cho Tailwind?

Dùng kết quả @theme v4 với Tailwind 4 (cấu hình ưu tiên CSS) và kết quả cấu hình v3 cho các dự án vẫn dùng tailwind.config.js.

Công cụ liên quan