Bảng màu giao diện ngữ nghĩa

Nhập một màu thương hiệu, nhận được primary / secondary / success / warning / danger — xuất dưới dạng cấu hình Tailwind và biến CSS.

Màu chính thương hiệu

2F6FED · L 57%

Chính

Được tạo tự động, giữ nguyên độ sáng và độ bão hòa của thương hiệu

#010101Cơ sở

#010101Sáng

#000101Tối

Phụ

Được tạo tự động, giữ nguyên độ sáng và độ bão hòa của thương hiệu

#010101Cơ sở

#010101Sáng

#010101Tối

Thành công

Được tạo tự động, giữ nguyên độ sáng và độ bão hòa của thương hiệu

#000101Cơ sở

#010101Sáng

#000100Tối

Cảnh báo

Được tạo tự động, giữ nguyên độ sáng và độ bão hòa của thương hiệu

#010100Cơ sở

#010101Sáng

#010100Tối

Nguy hiểm

Được tạo tự động, giữ nguyên độ sáng và độ bão hòa của thương hiệu

#010101Cơ sở

#010101Sáng

#010000Tối

Xuất mã

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
      primary: {
        DEFAULT: "#010101",
        light: "#010101",
        dark: "#000101",
        foreground: "#ffffff",
      },
      secondary: {
        DEFAULT: "#010101",
        light: "#010101",
        dark: "#010101",
        foreground: "#ffffff",
      },
      success: {
        DEFAULT: "#000101",
        light: "#010101",
        dark: "#000100",
        foreground: "#ffffff",
      },
      warning: {
        DEFAULT: "#010100",
        light: "#010101",
        dark: "#010100",
        foreground: "#ffffff",
      },
      danger: {
        DEFAULT: "#010101",
        light: "#010101",
        dark: "#010000",
        foreground: "#ffffff",
      },
      },
    },
  },
};

Cách xây dựng hệ thống ngữ nghĩa - một màu chính, năm vai trò.

Nhập màu thương hiệu, nhận năm bộ ngữ nghĩa cần thiết cho mọi giao diện, xuất dưới dạng mã.

01
Nhập màu chính
Dán HEX thương hiệu của bạn; màu ngữ nghĩa kế thừa đặc tính độ sáng và độ bão hòa của nó.
02
Đọc các vai trò
Thành công nằm trong khoảng sắc độ xanh, Cảnh báo trong màu hổ phách, Nguy hiểm trong màu đỏ - sắc độ mang tính ngữ nghĩa, đặc tính vẫn giữ theo thương hiệu.
03
Xuất
Sao chép dưới dạng cấu hình Tailwind / biến CSS / JSON, sử dụng trực tiếp cho hệ thống thiết kế của bạn.

Câu hỏi thường gặp về bảng màu ngữ nghĩa

Ba câu hỏi thường gặp khi tích hợp vào hệ thống thiết kế.

Các sắc độ ngữ nghĩa có cố định không?: Các sắc độ được gắn vào các khoảng ngữ nghĩa (thành công = xanh lá, cảnh báo = màu hổ phách, nguy hiểm = đỏ) trong khi độ sáng và độ bão hòa kế thừa từ màu chính thương hiệu - mỗi thương hiệu tạo ra đặc điểm riêng.
Tại sao có ba bước cho mỗi màu ngữ nghĩa?: Màu cơ bản cho trạng thái mặc định, màu sáng cho trạng thái di chuột/màu nhạt, màu tối cho trạng thái hoạt động/đường viền; màu chữ được tự động chọn là đen hoặc trắng dựa trên độ tương phản.
Mã xuất ra có sẵn để sử dụng trong sản phẩm không?: Khối Tailwind dán trực tiếp vào tailwind.config; khối biến CSS hoạt động với bất kỳ framework hoặc CSS thuần.

Sau bảng màu ngữ nghĩa

Mở trình chỉnh sửa bảng và sử dụng nó như một giao diện thực tế.

Trình chỉnh sửa OKLCH

Điều chỉnh L / C / H trong không gian OKLCH đồng nhất về mặt cảm quan với xem trước trực tiếp và đầu ra oklch() / HEX / RGB.

Trình tạo thang màu

Chuyển đổi bất kỳ màu nào thành thang màu 11 bước cho hệ thống thiết kế, đều về mặt nhận thức trong OKLCH, độ tương phản WCAG cho mỗi bước, xuất sang Tailwind/CSS/SCSS/JSON.

Bộ kiểm tra độ tương phản

Xác thực độ tương phản WCAG 2.1 giữa bất kỳ màu tiền cảnh và màu nền nào.

Phòng thu màu AI

Mô tả một cảnh hoặc tâm trạng trong một dòng — nhận bảng màu năm vai trò kèm lý giải.

// tailwind.config.js module.exports = { theme: { extend: { colors: { primary: { DEFAULT: "#010101", light: "#010101", dark: "#000101", foreground: "#ffffff", }, secondary: { DEFAULT: "#010101", light: "#010101", dark: "#010101", foreground: "#ffffff", }, success: { DEFAULT: "#000101", light: "#010101", dark: "#000100", foreground: "#ffffff", }, warning: { DEFAULT: "#010100", light: "#010101", dark: "#010100", foreground: "#ffffff", }, danger: { DEFAULT: "#010101", light: "#010101", dark: "#010000", foreground: "#ffffff", }, }, }, }, };

Cách xây dựng hệ thống ngữ nghĩa - một màu chính, năm vai trò.

Nhập màu thương hiệu, nhận năm bộ ngữ nghĩa cần thiết cho mọi giao diện, xuất dưới dạng mã.

Nhập màu chính

Dán HEX thương hiệu của bạn; màu ngữ nghĩa kế thừa đặc tính độ sáng và độ bão hòa của nó.

Đọc các vai trò

Thành công nằm trong khoảng sắc độ xanh, Cảnh báo trong màu hổ phách, Nguy hiểm trong màu đỏ - sắc độ mang tính ngữ nghĩa, đặc tính vẫn giữ theo thương hiệu.

Xuất

Sao chép dưới dạng cấu hình Tailwind / biến CSS / JSON, sử dụng trực tiếp cho hệ thống thiết kế của bạn.

Câu hỏi thường gặp về bảng màu ngữ nghĩa

Ba câu hỏi thường gặp khi tích hợp vào hệ thống thiết kế.

Các sắc độ ngữ nghĩa có cố định không?

Các sắc độ được gắn vào các khoảng ngữ nghĩa (thành công = xanh lá, cảnh báo = màu hổ phách, nguy hiểm = đỏ) trong khi độ sáng và độ bão hòa kế thừa từ màu chính thương hiệu - mỗi thương hiệu tạo ra đặc điểm riêng.

Tại sao có ba bước cho mỗi màu ngữ nghĩa?

Màu cơ bản cho trạng thái mặc định, màu sáng cho trạng thái di chuột/màu nhạt, màu tối cho trạng thái hoạt động/đường viền; màu chữ được tự động chọn là đen hoặc trắng dựa trên độ tương phản.

Mã xuất ra có sẵn để sử dụng trong sản phẩm không?

Khối Tailwind dán trực tiếp vào tailwind.config; khối biến CSS hoạt động với bất kỳ framework hoặc CSS thuần.