Trình tạo sắc nhạt & sắc đậm
21 màu
#ffffffrgb(255, 255, 255)#ebf3fergb(235, 243, 254)#d8e6fdrgb(216, 230, 253)#c4dafcrgb(196, 218, 252)#b1cdfbrgb(177, 205, 251)#9dc1fbrgb(157, 193, 251)#89b4fargb(137, 180, 250)#76a8f9rgb(118, 168, 249)#629bf8rgb(98, 155, 248)#4f8ff7rgb(79, 143, 247)#3b82f6rgb(59, 130, 246)#3575ddrgb(53, 117, 221)#2f68c5rgb(47, 104, 197)#295bacrgb(41, 91, 172)#234e94rgb(35, 78, 148)#1e417brgb(30, 65, 123)#183462rgb(24, 52, 98)#12274argb(18, 39, 74)#0c1a31rgb(12, 26, 49)#060d19rgb(6, 13, 25)#000000rgb(0, 0, 0)Chi tiết kỹ thuật
Cách Trình Tạo Tint & Shade Hoạt Động
Công cụ làm gì
Trình Tạo Tint & Shade tạo ra các tint sáng hơn (pha với trắng) và các shade tối hơn (pha với đen) từ bất kỳ màu gốc nào. Nhập một màu và chọn số bước để tạo ra một dải biến thể mượt. Mỗi bước hiển thị giá trị HEX, RGB và phần trăm pha trộn, giúp bạn dễ dàng xây dựng thang màu nhất quán cho thiết kế UI, nhận diện thương hiệu và trực quan hóa dữ liệu.
Các trường hợp sử dụng phổ biến cho lập trình viên
Lập trình viên dùng trình tạo tint và shade khi xây dựng thang design token (ví dụ: blue-100 đến blue-900), tạo trạng thái hover và active cho các phần tử tương tác, thiết kế phân cấp màu có khả năng tiếp cận và tạo màu nền/surface nhất quán cho chủ đề sáng và tối. Công cụ này rất cần thiết để xây dựng bảng màu tùy chỉnh cho Tailwind CSS hoặc hệ thống màu theo Material Design.
Cách Tint và Shade Hoạt Động
Tint được tạo bằng cách pha một màu với trắng, làm tăng độ sáng. Shade được tạo bằng cách pha với đen, làm giảm độ sáng. Công thức cho tint là: new = base + (255 - base) × factor. Với shade: new = base × (1 - factor). Các bước được phân bố đều giữa màu gốc và trắng thuần (tint) hoặc đen thuần (shade), tạo ra một gradient tuyến tính của các giá trị màu.
Các lỗi thường gặp và trường hợp biên
Pha tuyến tính với trắng hoặc đen có thể tạo ra tint bị nhạt hoặc shade bị đục đối với một số sắc độ. Màu vàng có thể ngả xanh khi làm tối, và màu xanh dương có thể mất độ rực khi làm sáng. Để có thang màu đồng đều theo cảm nhận thị giác, hãy cân nhắc dùng không gian màu OKLCH hoặc CIELAB. Luôn xác minh rằng các tint sáng nhất và shade tối nhất của bạn vẫn giữ đủ độ tương phản so với nền dự định.
Khi nào nên dùng công cụ này thay vì viết mã
Dùng công cụ trên trình duyệt này để khám phá nhanh và tạo thang màu trong quá trình thiết kế. Với hệ thống thiết kế dùng cho production, hãy tạo tint và shade theo cách lập trình bằng các thư viện màu như chroma.js hoặc culori, hỗ trợ không gian màu đồng đều theo cảm nhận và có thể xuất design token ở mọi định dạng.