CanDoYa
VI

Công cụ tạo bảng màu miễn phí

Chạy hoàn toàn trên trình duyệt của bạn - không tải lên, không cần đăng ký.

Kiểu phối màu
Biến CSS
Chia sẻ công cụ này

Tạo bảng màu là gì?

Công cụ tạo bảng màu dùng lý thuyết vòng tròn màu sắc để xây dựng bảng phối màu hài hòa từ một màu gốc. Bạn chọn hoặc nhập một mã màu hex, chọn kiểu phối như bổ túc, tương đồng, tam giác hoặc đơn sắc, công cụ sẽ tính ra ngay các màu phối hợp, mỗi màu kèm mã hex có thể sao chép. Mọi thứ chạy hoàn toàn trên trình duyệt của bạn.

Cách dùng

  1. 1Chọn màu gốc. Nhấp vào ô chọn màu để chọn trực quan, nhập mã hex như #6366f1, hoặc bấm Ngẫu nhiên để có điểm khởi đầu mới.
  2. 2Chọn kiểu phối màu. Chuyển đổi giữa bổ túc, bổ túc tách, tương đồng, tam giác, tứ giác, đơn sắc, sắc tối và sắc sáng. Bảng màu sẽ được tính lại ngay lập tức.
  3. 3Sao chép màu. Nhấp vào bất kỳ ô màu nào để sao chép mã hex đó, hoặc dùng nút Sao chép để lấy toàn bộ bảng màu dưới dạng biến CSS.

Dành cho ai

Đoán xem màu nào hợp với màu nào chỉ tốn thời gian thiết kế. Công cụ này áp dụng các quy tắc phối màu kinh điển trên vòng tròn màu, tức những mối quan hệ sắc độ được dạy trong lý thuyết màu sắc, nên bảng màu nào cũng được tính toán chuẩn xác chứ không phải đoán mò bằng mắt. Nhấp vào bất kỳ ô màu nào để sao chép mã hex, hoặc sao chép nguyên cả bảng màu dưới dạng biến CSS sẵn sàng dán vào code. Công cụ chạy hoàn toàn phía trình duyệt: không cần tài khoản, không tải lên, không theo dõi màu thương hiệu của bạn.

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

Công cụ tạo bảng màu này có miễn phí không?

Có, hoàn toàn miễn phí 100%, không cần đăng ký, không watermark, không giới hạn số lần dùng. Bạn có thể tạo và sao chép bao nhiêu bảng màu tùy thích, cho dự án cá nhân hay thương mại.

Dữ liệu màu của tôi có bị tải lên đâu không?

Không. Toàn bộ việc tính toán bảng màu diễn ra ngay trên trình duyệt của bạn bằng JavaScript thuần. Màu thương hiệu, dữ liệu bạn nhập và các thao tác click không bao giờ được gửi lên máy chủ.

Màu bổ túc là gì?

Màu bổ túc nằm đối diện trực tiếp với màu gốc trên vòng tròn màu, tức là xoay sắc độ đi 180 độ. Cặp màu bổ túc như xanh dương và cam tạo độ tương phản mạnh nhất nên thường được dùng cho nút kêu gọi hành động trên nền màu thương hiệu.

Bảng màu tương đồng khác bảng màu tam giác như thế nào?

Bảng màu tương đồng dùng các sắc độ liền kề (trong khoảng 30 độ quanh màu gốc) nên tạo cảm giác nhẹ nhàng, hài hòa. Bảng màu tam giác dùng ba sắc độ cách nhau 120 độ, tạo ra bảng phối sinh động, cân đối và tương phản rõ hơn giữa các màu.

Sắc tối và sắc sáng là gì?

Sắc tối làm màu gốc tối dần bằng cách giảm độ sáng về phía màu đen; sắc sáng làm màu gốc sáng dần về phía màu trắng. Cả hai đều giữ nguyên sắc độ và độ bão hòa nên rất phù hợp cho trạng thái hover, đường viền và các lớp nền dùng chung một màu thương hiệu.

Bảng màu cho một trang web nên có bao nhiêu màu?

Quy tắc phổ biến là 60-30-10: một màu chủ đạo chiếm khoảng 60% giao diện, màu phụ chiếm 30%, và màu nhấn chiếm 10%. Hãy bắt đầu với bảng phối 3-5 màu ở đây, sau đó thêm sắc tối và sắc sáng cho từng màu để dùng cho các trạng thái và bề mặt khác nhau.

Vì sao bảng màu gần như không đổi với màu xám hoặc đen?

Màu xám, đen và trắng có độ bão hòa bằng 0 nên không có sắc độ nào để các phép xoay phối màu tác động, xoay một sắc độ không tồn tại thì vẫn trả về đúng màu trung tính đó. Hãy dùng các chế độ điều chỉnh độ sáng để tạo thang màu trung tính: sắc sáng cho đen hoặc xám đậm, sắc tối cho trắng hoặc xám nhạt, và đơn sắc cho xám trung bình.