Cung cấp giá trị ban đầu
Tạo 2–10 màu theo chiến lược đã chọn, khóa màu muốn giữ và xuất bảng đã tinh chỉnh thành danh sách giá trị, CSS, JSON hoặc ảnh.
5
Tương đồng: Adjacent hues on the colour wheel
Nhấn phím Space để tạo bảng màu mới
Tạo bảng màu hài hòa cho thương hiệu, website, bài thuyết trình, minh họa hoặc giao diện sản phẩm. Bắt đầu từ một màu có sẵn hoặc tạo tổ hợp mới, khóa các màu phù hợp rồi xuất toàn bộ giá trị ngay trên trang.
- Nhập mã HEX khởi đầu nếu bạn đã có màu thương hiệu hoặc màu tham chiếu; nếu chưa, có thể giữ giá trị hiện tại để khám phá tự do.
- Chọn số lượng màu cần có và chọn cách tạo bảng màu đang được giao diện hỗ trợ.
- Bấm Tạo bảng màu hoặc nhấn phím Space. Các màu đã khóa được giữ nguyên, còn những màu khác sẽ được tạo lại.
- Chỉnh trực tiếp mã HEX, sao chép từng màu hoặc mở thang sắc độ khi cần các biến thể sáng và tối hơn.
- Xuất bảng màu hoàn chỉnh dưới dạng danh sách mã màu, biến CSS, JSON hoặc ảnh PNG để chia sẻ.
Chọn định dạng xuất phù hợp với quy trình làm việc
Dùng danh sách mã màu để dán nhanh vào công cụ thiết kế, biến CSS để triển khai giao diện web, JSON cho dữ liệu ứng dụng và ảnh để duyệt thiết kế, thuyết trình hoặc bàn giao.
Có thể giữ một màu và tạo lại các màu còn lại không?
Có. Hãy khóa mọi màu cần giữ rồi tạo lại bảng màu. Các màu đã khóa không thay đổi, còn các màu chưa khóa sẽ được thay bằng một tổ hợp hài hòa mới.
Nên dùng định dạng xuất nào cho website?
Biến CSS là lựa chọn nhanh nhất để triển khai trực tiếp ở frontend. Dùng JSON khi bảng màu nằm trong cấu hình theme, quy trình design token hoặc mô hình dữ liệu của ứng dụng.
Có thể tạo thang sắc độ kiểu Tailwind không?
Hãy mở thang sắc độ của một màu để xem các biến thể sáng và tối hơn. Kiểm tra độ tương phản và tinh chỉnh trước khi ánh xạ vào các mức Tailwind như 50 đến 950.
Trả lời nhanh
Tạo 2–10 màu theo chiến lược đã chọn, khóa màu muốn giữ và xuất bảng đã tinh chỉnh thành danh sách giá trị, CSS, JSON hoặc ảnh. Tên màu sinh động là dữ liệu lúc chạy nên được giữ nguyên. Bảng màu nhìn hài hòa không tự động đạt khả năng tiếp cận, sẵn sàng cho thương hiệu hay có tính hòa sắc khoa học.
Công cụ này làm gì
Tạo 2–10 màu theo chiến lược đã chọn, khóa màu muốn giữ và xuất bảng đã tinh chỉnh thành danh sách giá trị, CSS, JSON hoặc ảnh. Khám phá phương án nhanh, khóa các swatch phù hợp, xuất token và kiểm tra các tổ hợp quan trọng bằng contrast công cụ kiểm tra.
Khả năng đã xác minh
Điều chỉnh tùy chọn cần thiết
Chiến lược gồm nhóm random, color theory, mood, era, nature và culture. Phím Space tạo lại các swatch chưa khóa; chỉnh và khóa giúp giữ lựa chọn có chủ đích.
Kiểm tra giới hạn chính xác
Tên màu sinh động là dữ liệu lúc chạy nên được giữ nguyên. Bảng màu nhìn hài hòa không tự động đạt khả năng tiếp cận, sẵn sàng cho thương hiệu hay có tính hòa sắc khoa học. Đối chiếu kết quả với nơi sử dụng dự kiến trước khi dùng lại.
Khi nào nên dùng
- Khám phá phương án nhanh, khóa các swatch phù hợp, xuất token và kiểm tra các tổ hợp quan trọng bằng contrast công cụ kiểm tra.
- Chiến lược gồm nhóm random, color theory, mood, era, nature và culture. Phím Space tạo lại các swatch chưa khóa; chỉnh và khóa giúp giữ lựa chọn có chủ đích. Trong mục “Khi nào nên dùng 2”, lưu ý này áp dụng riêng cho Tạo bảng màu.
- Khám phá phương án nhanh, khóa các swatch phù hợp, xuất token và kiểm tra các tổ hợp quan trọng bằng contrast công cụ kiểm tra. Dùng công cụ liên quan đầu tiên để tiếp tục từ kết quả của Tạo bảng màu mà không đổi ngôn ngữ.
Cách sử dụng
Cung cấp giá trị ban đầu
Tạo 2–10 màu theo chiến lược đã chọn, khóa màu muốn giữ và xuất bảng đã tinh chỉnh thành danh sách giá trị, CSS, JSON hoặc ảnh. Trong mục “Cách sử dụng: Cung cấp giá trị ban đầu”, lưu ý này áp dụng riêng cho Tạo bảng màu.
Điều chỉnh tùy chọn cần thiết
Chiến lược gồm nhóm random, color theory, mood, era, nature và culture. Phím Space tạo lại các swatch chưa khóa; chỉnh và khóa giúp giữ lựa chọn có chủ đích. Trong mục “Cách sử dụng: Điều chỉnh tùy chọn cần thiết”, lưu ý này áp dụng riêng cho Tạo bảng màu.
Kiểm tra và tiếp tục
Khám phá phương án nhanh, khóa các swatch phù hợp, xuất token và kiểm tra các tổ hợp quan trọng bằng contrast công cụ kiểm tra. Trong mục “Cách sử dụng: Kiểm tra và tiếp tục”, lưu ý này áp dụng riêng cho Tạo bảng màu.
Kiểm tra giới hạn chính xác
Tên màu sinh động là dữ liệu lúc chạy nên được giữ nguyên. Bảng màu nhìn hài hòa không tự động đạt khả năng tiếp cận, sẵn sàng cho thương hiệu hay có tính hòa sắc khoa học. Đối chiếu kết quả với nơi sử dụng dự kiến trước khi dùng lại. Đọc giới hạn đã nêu trước khi dùng kết quả cho quyết định môi trường thực tế hoặc khả năng tiếp cận.
Giải thích tùy chọn
Cung cấp giá trị ban đầu
Tạo 2–10 màu theo chiến lược đã chọn, khóa màu muốn giữ và xuất bảng đã tinh chỉnh thành danh sách giá trị, CSS, JSON hoặc ảnh. Trong mục “Giải thích tùy chọn: Cung cấp giá trị ban đầu”, lưu ý này áp dụng riêng cho Tạo bảng màu.
Điều chỉnh tùy chọn cần thiết
Chiến lược gồm nhóm random, color theory, mood, era, nature và culture. Phím Space tạo lại các swatch chưa khóa; chỉnh và khóa giúp giữ lựa chọn có chủ đích. Trong mục “Giải thích tùy chọn: Điều chỉnh tùy chọn cần thiết”, lưu ý này áp dụng riêng cho Tạo bảng màu.
Kết quả được tạo như thế nào
Chiến lược gồm nhóm random, color theory, mood, era, nature và culture. Phím Space tạo lại các swatch chưa khóa; chỉnh và khóa giúp giữ lựa chọn có chủ đích. Trong mục “Kết quả được tạo như thế nào”, lưu ý này áp dụng riêng cho Tạo bảng màu.
Độ chính xác và giới hạn
- Tên màu sinh động là dữ liệu lúc chạy nên được giữ nguyên. Bảng màu nhìn hài hòa không tự động đạt khả năng tiếp cận, sẵn sàng cho thương hiệu hay có tính hòa sắc khoa học.
- Bộ nhớ tạm, giải mã tệp, tải xuống và tùy chọn cần quyền phụ thuộc khả năng của trình duyệt hiện tại.
Xử lý và quyền riêng tư
Quy trình đã xác minh chạy trong trình duyệt. Tệp và giá trị màu ở lại trên trang, trừ khi một tùy chọn ghi rõ việc mở URL mạng.
Mẹo sử dụng
- Bắt đầu từ mẫu đã biết rồi chỉ đổi từng tùy chọn để dễ hiểu tác động.
- Đọc giới hạn đã nêu trước khi dùng kết quả cho quyết định môi trường thực tế hoặc khả năng tiếp cận.
Xử lý sự cố
Dữ liệu đầu vào hoặc thao tác không hoạt động
Kiểm tra phạm vi hoặc yêu cầu tệp đang hiển thị, đặt lại công cụ rồi thử dữ liệu đầu vào nhỏ hơn hoặc được trình duyệt hỗ trợ. Tùy chọn cần quyền có thể yêu cầu ngữ cảnh bảo mật.
Độ chính xác và giới hạn
Tên màu sinh động là dữ liệu lúc chạy nên được giữ nguyên. Bảng màu nhìn hài hòa không tự động đạt khả năng tiếp cận, sẵn sàng cho thương hiệu hay có tính hòa sắc khoa học. Trong mục “Xử lý sự cố: Độ chính xác và giới hạn”, lưu ý này áp dụng riêng cho Tạo bảng màu.
Kiểm tra giới hạn chính xác
Tên màu sinh động là dữ liệu lúc chạy nên được giữ nguyên. Bảng màu nhìn hài hòa không tự động đạt khả năng tiếp cận, sẵn sàng cho thương hiệu hay có tính hòa sắc khoa học. Đặt lại công cụ rồi thử bằng giá trị chắc chắn được hỗ trợ trước khi kết luận lỗi thuật toán.
Câu hỏi về công cụ
Tạo bảng màu làm gì?
Tạo 2–10 màu theo chiến lược đã chọn, khóa màu muốn giữ và xuất bảng đã tinh chỉnh thành danh sách giá trị, CSS, JSON hoặc ảnh. Trong mục “Tạo bảng màu làm gì?”, lưu ý này áp dụng riêng cho Tạo bảng màu.
Giới hạn quan trọng nhất là gì?
Tên màu sinh động là dữ liệu lúc chạy nên được giữ nguyên. Bảng màu nhìn hài hòa không tự động đạt khả năng tiếp cận, sẵn sàng cho thương hiệu hay có tính hòa sắc khoa học. Trong mục “Giới hạn quan trọng nhất là gì?”, lưu ý này áp dụng riêng cho Tạo bảng màu.
Dữ liệu được xử lý ở đâu?
Quy trình đã xác minh chạy trong trình duyệt. Tệp và giá trị màu ở lại trên trang, trừ khi một tùy chọn ghi rõ việc mở URL mạng. Trong mục “Dữ liệu được xử lý ở đâu?”, lưu ý này áp dụng riêng cho Tạo bảng màu.
Cần chuẩn bị dữ liệu đầu vào nào cho Tạo bảng màu?
Tạo 2–10 màu theo chiến lược đã chọn, khóa màu muốn giữ và xuất bảng đã tinh chỉnh thành danh sách giá trị, CSS, JSON hoặc ảnh. Tạo 2–10 màu theo chiến lược đã chọn, khóa màu muốn giữ và xuất bảng đã tinh chỉnh thành danh sách giá trị, CSS, JSON hoặc ảnh.
Cần kiểm tra gì trước khi dùng kết quả của Tạo bảng màu?
Tên màu sinh động là dữ liệu lúc chạy nên được giữ nguyên. Bảng màu nhìn hài hòa không tự động đạt khả năng tiếp cận, sẵn sàng cho thương hiệu hay có tính hòa sắc khoa học. Đối chiếu kết quả với nơi sử dụng dự kiến trước khi dùng lại. Trong mục “Cần kiểm tra gì trước khi dùng kết quả của Tạo bảng màu?”, lưu ý này áp dụng riêng cho Tạo bảng màu.
Quy trình nào có thể tiếp nối Tạo bảng màu?
Dùng công cụ liên quan đầu tiên để tiếp tục từ kết quả của Tạo bảng màu mà không đổi ngôn ngữ. Khám phá phương án nhanh, khóa các swatch phù hợp, xuất token và kiểm tra các tổ hợp quan trọng bằng contrast công cụ kiểm tra.
Tiếp tục quy trình màu
Khám phá phương án nhanh, khóa các swatch phù hợp, xuất token và kiểm tra các tổ hợp quan trọng bằng contrast công cụ kiểm tra. Trong mục “Tiếp tục quy trình màu”, lưu ý này áp dụng riêng cho Tạo bảng màu.
Tiếp tục bằng công cụ liên quan
Dùng công cụ liên quan đầu tiên để tiếp tục từ kết quả của Tạo bảng màu mà không đổi ngôn ngữ.
Tạo bảng màu hòa sắc