∑

Palette Generator

Tạo bảng màu 5 màu hài hòa — chọn chế độ harmony, khóa màu yêu thích, regenerate và export CSS/JSON/Tailwind

Nhấn Space để tạo mới
#6366f1
#8b5cf6
#a78bfa
#c4b5fd
#ede9fe

Export

:root {
  --color-1: #6366f1;
  --color-2: #8b5cf6;
  --color-3: #a78bfa;
  --color-4: #c4b5fd;
  --color-5: #ede9fe;
}

Điểm nổi bật

Các điểm đáng chú ý nhất của công cụ này để bạn nắm nhanh trước khi dùng.

#01

Nhiều chế độ harmony

Analogous, complementary, triadic, monochromatic, split-complementary — mỗi chế độ cho ra bảng màu hài hòa theo quy tắc màu sắc khác nhau.

#02

Khóa màu yêu thích

Lock từng màu riêng lẻ — regenerate sẽ giữ nguyên màu đã khóa, chỉ thay đổi những màu chưa khóa.

#03

Phím tắt Space

Nhấn Space để tạo bảng màu mới tức thì — nhanh nhất để khám phá hàng trăm combination.

#04

Export đa định dạng

Copy dưới dạng CSS variables, Tailwind arbitrary values hoặc JSON array — dùng ngay trong code.

Cách sử dụng

Làm theo từng bước để dùng công cụ nhanh và đúng intent ngay từ lần đầu.

1

Chọn chế độ harmony

Chọn Analogous nếu muốn màu gần nhau, Complementary cho màu đối lập, Triadic cho 3 màu cân bằng.

2

Nhấn Generate hoặc Space

Tạo ngay bảng màu 5 màu theo chế độ đã chọn. Nhấn liên tục để duyệt qua nhiều lựa chọn.

3

Khóa màu ưng ý

Hover vào ô màu và click icon 🔒 để giữ màu đó. Các lần Generate tiếp theo sẽ giữ nguyên màu đã khóa.

4

Copy và sử dụng

Copy toàn bộ palette dưới dạng CSS variables (:root { --color-1: #hex }) để dùng ngay trong dự án.

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

Những câu hỏi gặp nhiều nhất khi dùng công cụ, được trình bày ngắn gọn và dễ quét.

Analogous chọn các màu nằm gần nhau trên vòng màu (cách nhau 30°). Kết quả là bảng màu hài hòa, dịu mắt — thường dùng cho web/app UI.