Trình tạo bóng màu

Chọn một màu và tạo phạm vi đầy đủ các sắc thái sáng hơn và nuance tối hơn. Nhấp vào một mẫu để sao chép giá trị của nó.

10

Sắc thái (sáng hơn)

Màu cơ bản

Nuance (tối hơn)

Sắc thái và nuance

Sắc thái có được bằng cách trộn một màu với trắng, làm cho nó dần dần sáng hơn. Nuance có được bằng cách trộn với đen, làm cho nó tối hơn. Cùng nhau, chúng tạo thành một thang tông đầy đủ, hữu ích cho thiết kế giao diện, gradient, các trạng thái di chuột và hệ thống màu trợ năng.

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

Cách sử dụng các nuance này?

Sử dụng các sắc thái sáng cho nền, các trạng thái di chuột và viền. Sử dụng các nuance tối cho văn bản, các trạng thái hoạt động và làm nổi bật. Nhấp «Sao chép tất cả dưới dạng biến CSS» để có một đoạn CSS sẵn sàng sử dụng.

Tôi có thể sao chép các màu riêng lẻ không?

Có! Nhấp vào một mẫu để sao chép giá trị HEX của nó vào clipboard.

Tint, Shade và Tone: Định nghĩa chính thức

Ba thuật ngữ thường được dùng tùy tiện; lý thuyết màu sắc cổ điển phân biệt chúng chính xác:

Bộ tạo màu này tạo ra tint (sáng hơn màu gốc) và shade (tối hơn). Tone (thêm xám thay vì trắng hoặc đen) hữu ích cho bảng màu trầm, tinh tế (tưởng tượng các hệ thống màu thiết kế nội thất thập niên 1970) nhưng hiếm khi cần thiết cho công việc UI thông thường.

Tại sao các Hệ thống Thiết kế Hiện đại Dùng Thang Số

Tailwind CSS phổ biến hóa thang số 50-100-200-…-900-950 trên mỗi màu, với điểm dừng «500» được xem theo quy ước là màu gốc. Material Design dùng hệ thống song song 50-100-…-900; Bootstrap 5 dùng 100-…-900; IBM Carbon dùng 10 điểm trên mỗi màu mẫu. Ý tưởng chung: một màu thương hiệu đơn lẻ hiếm khi đủ, UI cần các biến thể nhất quán cho trạng thái hover, nền, viền, vòng focus, trạng thái disabled, badge và tương đương dark-mode. Thang số có thể dự đoán mang lại những biến thể đó theo cách có thể dùng lại qua các component, dễ tái cấu trúc khi thương hiệu thay đổi, và dễ khám phá với bất kỳ ai đọc codebase.

Hệ thốngĐiểm dừng trên mỗi màuĐiểm dừng gốc
Tailwind CSS v3+11 (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950)500
Material Design 313 tonal (0, 10, 20, …, 100)40
Bootstrap 59 (100, 200, …, 900) cộng gốc500
IBM Carbon10 trên mỗi màu mẫu60

Cách các Thuật toán Khác nhau Tính Thang Màu

Có ba cách phổ biến để tính thang tint/shade, với kết quả thị giác khác nhau:

Nếu thang màu của bạn trông «flat» (các bước vàng bị nhạt nhòa, các bước xanh lam đều đọc như cùng màu xanh tối) thì hầu như luôn là do toán học nền tảng dựa trên HSL thay vì OKLCH. CSS hiện đại (CSS Color Module Level 4) hiển thị trực tiếp oklch(), lab() và color-mix(in oklch, …), giúp thang đồng đều tri giác chỉ cần một dòng mà không cần công cụ bên ngoài.

Các Trường hợp Sử dụng

Khả năng Tiếp cận và Độ Tương phản

Thang màu được tạo chỉ hữu ích bằng các cặp văn bản-trên-nền mà nó tạo ra. Các ngưỡng tối thiểu của WCAG 2.1 cần ghi nhớ:

Các quy tắc đáng tin cậy trên hầu hết các thang được xây dựng tốt: cặp 50 + 900 luôn đạt cho văn bản thân, cặp 100 + 800 hầu như luôn đạt. Cặp 400 + 500 hầu như không bao giờ đạt. Hãy kiểm tra các cặp cụ thể bạn định dùng, công cụ Trình kiểm tra tương phản màu tính tỉ lệ WCAG cho bất kỳ hai giá trị HEX nào.

Tích hợp Đầu ra vào Codebase của Bạn

Ba cách phổ biến để dùng thang màu được tạo:

/* 1. Plain CSS variables */
:root {
  --brand-50: #f0f9fc;
  --brand-100: #d9eef6;
  --brand-500: #2b7190;
  --brand-900: #0d2935;
}

.btn { background: var(--brand-500); }
.btn:hover { background: var(--brand-600); }
// 2. Tailwind config (tailwind.config.js)
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#f0f9fc',
          100: '#d9eef6',
          500: '#2b7190',
          900: '#0d2935',
        },
      },
    },
  },
};

// then in markup
<button class="bg-brand-500 hover:bg-brand-600">Click</button>
// 3. Sass / SCSS map
$brand: (
  50:  #f0f9fc,
  500: #2b7190,
  900: #0d2935,
);

.btn { background: map-get($brand, 500); }

Các Lỗi Thường gặp

  1. Tạo quá nhiều điểm dừng. 11 điểm của Tailwind là điểm lý tưởng. 20 điểm là quá mức, hầu hết không thể phân biệt về mặt thị giác, và bạn sẽ không bao giờ dùng chúng.
  2. Dùng thang dựa trên HSL cho màu vàng / cam / huỳnh quang. Chúng bị nhạt ở các điểm sáng và không tối đậm gọn gàng. Hãy dùng tạo thang dựa trên OKLCH nếu màu thương hiệu của bạn thuộc dải sắc «tricky».
  3. Coi thang màu là hoàn chỉnh mà không kiểm tra độ tương phản văn bản. Quan hệ màu sắc đẹp đôi khi ghép văn bản trắng với điểm 400 và không đạt WCAG 4,5:1. Hãy kiểm tra mọi cặp bạn thực sự sẽ dùng.
  4. Đảo ngược bảng màu sáng để tạo bảng màu dark-mode. Hấp dẫn về toán học, sai về thị giác, màu sắc cảm thấy cân bằng trên trắng lại cảm thấy lòe loẹt trên gần đen. Hãy tạo hoặc tinh chỉnh thủ công một thang dark-mode song song.
  5. Dùng màu gốc là «500» khi nó khớp tri giác tốt hơn với điểm dừng khác. Nếu màu thương hiệu của bạn thực sự tối, nó có thể là 700 trong thang của nó; hãy để quan hệ tri giác quyết định vị trí nào nó chiếm, không phải quy ước.
  6. Quên điểm dừng 50. Tint nhạt nhất là hữu ích nhất cho nền và điểm nhấn tinh tế. Đừng cắt ngắn thang của bạn ở 100.

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

Tại sao thang màu của tôi trông flat, mọi điểm dừng đều cảm thấy giống nhau?

Hai nguyên nhân phổ biến: (1) quá nhiều bước trong phạm vi quá hẹp, hãy thử ít bước hơn, đặc biệt nếu màu đã ở mức luminance trung bình; (2) chia tỷ lệ dựa trên HSL trên sắc màu mà HSL hiệu chỉnh kém (vàng, cam, màu neon). Dùng bộ tạo bảng màu dựa trên OKLCH thường khắc phục cả hai.

Làm thế nào để tạo bảng màu dark-mode từ thang light-mode?

Đừng chỉ đơn giản đảo ngược. Đảo ngược thô (lật các điểm sáng và tối) tạo ra bảng màu dark-mode cảm thấy lòe loẹt hoặc bị nhạt nhòa. Quy ước trong Material 3, Radix Colors và các biến thể tối của Tailwind là tạo thang song song được tinh chỉnh cho nền tối, thường với độ bão hòa giảm nhẹ và sắc màu dịch chuyển để bù cho cách màu sắc được cảm nhận trên bề mặt tối. Hầu hết các hệ thống thiết kế lớn đều công bố cả hai bảng màu song song nhau.

Tôi có thể dùng màu được tạo cho mục đích thương mại không?

Có. Giá trị màu sắc không có bản quyền; mã HEX là sự kiện về pixel. Dùng bảng màu được tạo ở bất kỳ đâu, dự án open-source, trang thương mại, hệ thống thương hiệu, in ấn, bao bì.

Số bước tốt là bao nhiêu?

Đối với thiết kế UI, 9 đến 11 điểm dừng trên mỗi màu là quy ước đã được thiết lập (Tailwind, Bootstrap, Carbon đều nằm trong phạm vi đó). Material Design dùng 13. Dưới 7 điểm dừng thang màu cảm thấy thiếu phân giải; trên 13 các điểm dừng trở nên khó phân biệt với nhau.

Có dữ liệu nào được gửi lên máy chủ không?

Không. Toán học màu sắc chạy trong trình duyệt của bạn; HEX đầu vào, các điểm dừng được tạo và CSS được sao chép không bao giờ chạm đến máy chủ. Hữu ích khi màu thương hiệu chưa được phát hành hoặc đang trong thời gian cấm vận.

Điều này khác gì so với bộ tạo bảng màu?

Bộ tạo bảng màu chọn nhiều màu riêng biệt hoạt động cùng nhau (bổ trợ, tương đồng, tam giác, v.v.), các sắc màu hoàn toàn khác nhau. Bộ tạo shade (cái này) giữ một sắc màu đơn lẻ và tạo ra các biến thể sáng hơn và tối hơn của nó. Công việc khác nhau: bộ tạo bảng màu cho bạn màu chính thương hiệu cùng màu nhấn; bộ tạo shade cho bạn các biến thể của một trong những màu đó.

Công cụ liên quan

Trình tạo bảng màu

Tạo bảng màu hài hòa trong một cú nhấp.

Bộ chuyển đổi màu

Chuyển đổi giữa HEX, RGB, HSL và CMYK.

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

Kiểm tra tỷ lệ tương phản WCAG 2.1.