Tạo Bảng Màu miễn phí

Cách hoạt động

Công cụ được xây dựng không dùng thư viện bên ngoài nào — mọi phép tính màu chạy bằng JavaScript tự viết trực tiếp trong trình duyệt. Nó chuyển màu bạn chọn giữa hex và HSL, rồi áp dụng các quy tắc phối màu kinh điển (bổ sung, bộ ba, tương đồng, v.v.) bằng phép tính trên vòng sắc độ để tạo từng bảng màu.

1. 1
   Chuyển đổi hex sang HSL

   Khi bạn chọn màu, công cụ phân tích chuỗi hex thành các thành phần RGB và chuyển sang HSL (sắc độ, độ bão hòa, độ sáng). Sắc độ là vị trí 0–360 độ trên vòng màu; mọi phép tính bảng màu diễn ra trong không gian này.
2. 2
   Phép tính sắc độ để phối màu

   Mỗi loại bảng màu là một công thức xoay cố định áp dụng cho sắc độ gốc. Bổ sung cộng 180°, bộ ba cộng 120° và 240°, bộ bốn bước 90°, bổ sung chia tách dùng 150° và 210°. Đơn sắc và sắc thái giữ nguyên sắc độ và độ bão hòa trong khi tăng giảm độ sáng.
3. 3
   Xuất HSL sang hex

   Mỗi bộ ba HSL đã tính được chuyển lại thành màu hex bằng công thức chroma chuẩn. Kết quả hiển thị dạng dải màu với nhãn tự động tương phản (chữ tối trên ô sáng, chữ sáng trên ô tối) được xác định bằng ngưỡng độ chói đơn giản.
4. 4
   Xuất theo định dạng bạn muốn

   Bảng màu có thể được sao chép dạng chuỗi hex hoặc xuất thành tệp biến CSS (:root { --color-1: … }), biến SCSS, đoạn cấu hình Tailwind, đối tượng JSON hoặc dải màu PNG. Xuất PNG dùng Canvas API của trình duyệt (toDataURL) để vẽ từng ô màu kèm nhãn hex — mọi thứ được tạo cục bộ khi nhấp.

Công cụ liên quan