HedgieTools

Tạo bảng màu

Bắt đầu từ màu chính để có một bảng màu giao diện đầy đủ: màu phụ, màu thứ ba, màu thành công, cảnh báo, nguy hiểm và các màu trung tính, kèm sắc độ và kiểm tra độ tương phản.

Màu chính của bạn

Nhập giá trị hoặc chọn một màu: phần còn lại của bảng màu được xây dựng xoay quanh màu này.

Màu phụ và màu thứ ba
Định dạng giá trị

Nhập giá trị HEX, chẳng hạn #2563EB, hoặc nhấp vào ô vuông để chọn màu.

Bảng màu của bạn

Nhấp vào một giá trị hoặc một sắc độ (50 đến 950) để sao chép. Biểu tượng bút chì thay màu gợi ý bằng màu của riêng bạn: màu đó giữ nguyên khi bạn đổi màu chính.

  • —

    Chính

    màu của bạn
  • —

    Phụ

    bổ túc
  • —

    Thứ ba

    gần bổ túc
  • —

    Thông tin

    xanh dương
  • —

    Thành công

    xanh lá
  • —

    Cảnh báo

    cam
  • —

    Nguy hiểm

    đỏ
  • —

    Trung lập

    xám ánh màu

Token sáng và tối

Các màu chức năng của giao diện, sẵn sàng cho chế độ sáng và chế độ tối. Mỗi màu trỏ tới một sắc độ của bảng màu. Nhấp để sao chép.

  • --backgroundNền trang
  • --surfaceThẻ và khung
  • --surface-mutedVùng phụ
  • --borderViền và đường phân cách
  • --textVăn bản chính
  • --text-mutedVăn bản phụ
  • --primaryNút và liên kết
  • --primary-hoverKhi di chuột qua
  • --on-primaryChữ trên màu chính
  • --focus-ringViền tiêu điểm
  • --secondaryMàu nhấn phụ
  • --tertiaryMàu nhấn thứ ba
  • --infoThông tin
  • --info-softNền thông tin
  • --successThành công
  • --success-softNền thành công
  • --warningCảnh báo
  • --warning-softNền cảnh báo
  • --dangerNguy hiểm, lỗi
  • --danger-softNền lỗi

Màu phối hợp

Các cách phối màu kinh điển quanh màu chính của bạn, dùng cho hình minh họa, biểu đồ hoặc điểm nhấn.

  • Bổ túc

    màu đối diện

  • Bổ túc xen kẽ

    dịu hơn màu đối diện

  • Tương đồng

    các màu lân cận

  • Bộ ba

    ba màu cân bằng

  • Bộ bốn

    bốn màu tạo thành hình vuông

  • Đơn sắc

    một tông màu, nhiều mức đậm nhạt

Xem trước và độ tương phản

Bảng màu áp dụng lên một vài thành phần giao diện, và mức độ dễ đọc của từng cặp màu theo quy tắc WCAG.

Chế độ của bản xem trước
Tiêu đề trangVăn bản phụ, ít quan trọng hơn, nằm dưới tiêu đề.
Một thẻ có liên kết và các nút.
ChínhPhụThứ ba
Thông tin · Đã có bản cập nhật mới.
Thành công · Các thay đổi của bạn đã được lưu.
Cảnh báo · Gói đăng ký của bạn sắp hết hạn.
Lỗi · Thanh toán không thành công.
  • Văn bản trên nền
    Tỷ lệ—Chữ cỡ thường—Chữ cỡ lớn—AAA—
  • Văn bản phụ trên nền
    Tỷ lệ—Chữ cỡ thường—Chữ cỡ lớn—AAA—
  • Liên kết trên nền
    Tỷ lệ—Chữ cỡ thường—Chữ cỡ lớn—AAA—
  • Nút chính
    Tỷ lệ—Chữ cỡ thường—Chữ cỡ lớn—AAA—
  • Nút phụ
    Tỷ lệ—Chữ cỡ thường—Chữ cỡ lớn—AAA—
  • Văn bản màu thứ ba trên nền
    Tỷ lệ—Chữ cỡ thường—Chữ cỡ lớn—AAA—
  • Thông báo thông tin
    Tỷ lệ—Chữ cỡ thường—Chữ cỡ lớn—AAA—
  • Thông báo thành công
    Tỷ lệ—Chữ cỡ thường—Chữ cỡ lớn—AAA—
  • Thông báo cảnh báo
    Tỷ lệ—Chữ cỡ thường—Chữ cỡ lớn—AAA—
  • Thông báo nguy hiểm
    Tỷ lệ—Chữ cỡ thường—Chữ cỡ lớn—AAA—

Xuất

Lấy bảng màu theo định dạng đã chọn ở trên (HEX).

Nhập màu chính để tạo mã.

Biến CSS cho bảng màu (--color-primary-500…). Các token trỏ tới những biến này; bật chế độ tối bằng data-theme="dark" trên phần tử html.

Giới thiệu công cụ tạo bảng màu

Chọn màu chính của thương hiệu và nhận mọi thứ một giao diện cần xoay quanh màu đó: màu đi kèm, màu trạng thái, màu trung tính, sắc độ, token sáng và tối, kiểm tra độ tương phản và mã để dán, tất cả ngay trong trình duyệt của bạn.

Bảng màu đầy đủ từ một màu duy nhất

Từ màu chính của bạn, công cụ suy ra màu phụ và màu thứ ba, các màu trạng thái (thông tin, thành công, cảnh báo, nguy hiểm) hợp với phong cách của nó, cùng các sắc xám hơi ánh màu cho nền và văn bản.

Sắc độ dùng được ngay

Mỗi màu có mười một sắc độ, từ nhạt nhất (50) đến đậm nhất (950), dùng cho nền, viền, trạng thái di chuột và văn bản. Nếu một màu gợi ý không hợp ý, hãy thay bằng màu của riêng bạn: các sắc độ sẽ thay đổi theo.

Token sáng và tối

Nền, bề mặt, viền, văn bản, trạng thái di chuột, tiêu điểm và nền thông báo: mỗi màu chức năng trỏ tới một sắc độ của bảng màu, với một giá trị cho chế độ sáng và một giá trị cho chế độ tối.

Độ tương phản được kiểm tra

Mỗi cặp văn bản và nền được đánh giá theo quy tắc WCAG: 4,5:1 cho chữ cỡ thường, 3:1 cho chữ cỡ lớn và 7:1 cho mức AAA.

Xuất sang CSS, Tailwind, JSON

Sao chép từng giá trị dưới dạng HEX, RGB, HSL hoặc OKLCH, hoặc tải xuống tệp biến CSS, theme Tailwind v4, cấu hình Tailwind v3, JSON hoặc một danh sách đơn giản. Mọi thứ diễn ra trong trình duyệt của bạn: không có gì được gửi đi hay lưu lại.

Công cụ liên quan