Tạo bảng màu

Tạo bảng màu hài hòa, khóa màu yêu thích và dựng dải sắc kiểu Tailwind
  • Tệp không rời khỏi thiết bị của bạn
  • Chạy trên trình duyệt
  • Miễn phí, không cần đăng ký, không hình mờ

3b82f6

e24956

3ba01b

Cách dùng Tạo bảng màu

Tạo bảng màu theo ba cách: quy tắc hài hòa từ một màu gốc, bảng ngẫu nhiên có thể khóa và tạo lại, hoặc thang 11 bước từ 50 đến 950 như Tailwind. Màu được tính trong OKLCH, và mọi bảng xuất sang CSS, Tailwind v3 hoặc v4, JSON, .gpl hoặc .ase.

  1. 1

    Chọn “Chế độ”: Hài hòa, Ngẫu nhiên hoặc Sắc độ.

  2. 2

    Với Hài hòa hoặc Sắc độ, đặt “Màu gốc”, rồi chọn “Quy tắc”, hoặc “Tên màu” và bước “Giữ màu gốc tại”.

  3. 3

    Với Ngẫu nhiên, nhấn “Tạo” hoặc nhấn Space, và khóa các màu muốn giữ trước khi tạo lại.

  4. 4

    Di chuột lên một màu rồi nhấn biểu tượng sao chép; trong Hài hòa bạn cũng có thể đặt nó làm màu gốc mới.

  5. 5

    Trong “Xuất”, chọn HEX, CSS, Tailwind v3, Tailwind v4 hoặc JSON rồi sao chép mã, hoặc tải .gpl hoặc .ase.

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

Vì sao các hài hòa được tính trong OKLCH?

Sắc được xoay trong OKLCH, nên mọi màu giữ độ sáng và độ rực cảm nhận của màu gốc. Xoay trong HSL sẽ khiến vàng trông sáng hơn xanh dương nhiều.

Các sắc từ 50 đến 950 được dựng thế nào?

Độ sáng theo một đường cong gần với bảng màu của Tailwind, và chroma đạt đỉnh quanh 500–600. Màu gốc được giữ đúng tại bước của nó; “Tự động” chọn bước gần độ sáng nhất.

Tôi có quay lại bảng ngẫu nhiên trước đó được không?

Có. Dùng “Bảng trước” và “Bảng sau”; 50 bảng gần nhất được giữ khi trang còn mở, nhưng không lưu sau khi bạn đóng trang.

Một bảng có thể có bao nhiêu màu?

Bảng ngẫu nhiên có 2 đến 10 màu (dùng nút − và +). Quy tắc hài hòa cho số cố định, ví dụ 2 với bổ sung và 5 với tương tự hoặc đơn sắc, và Sắc độ luôn cho 11.

Bản xuất Tailwind v4 trông như thế nào?

Một khối @theme gồm các biến --color-*, sẵn sàng dán vào CSS. Sắc độ được ghi thành giá trị oklch() đặt tên kiểu --color-brand-500; các chế độ khác dùng HEX.