Tạo Tint và Shade — Tạo Biến Thể Màu Sắc

Thang màu hoàn chỉnh — từ tint sáng nhất đến shade tối nhất — là nền tảng của mọi hệ thống thiết kế. Trình tạo của chúng tôi tạo 9–11 biến thể màu từ bất kỳ màu đầu vào nào, tương tự thang màu Tailwind CSS.

Tint Vs. Shade

Tint là màu pha với trắng (độ sáng cao hơn). Shade là màu pha với đen (độ sáng thấp hơn). Trong hệ thống thiết kế, màu được đánh số: 50 (sáng nhất) đến 900 (tối nhất), với 500 là tint cơ bản.

HSL Cho Biến Thể Màu

Phương pháp đơn giản nhất: chỉ điều chỉnh giá trị L trong HSL trong khi H và S không đổi. Kết quả tốt hơn: dùng không gian màu OKLCH để thay đổi độ sáng đồng đều theo tri giác. Biến thể OKLCH trông đồng đều hơn về mặt thị giác so với HSL.

Sử Dụng Trong Hệ Thống Thiết Kế

Thang màu cung cấp từ vựng chung cho lập trình viên và nhà thiết kế: "dùng primary-700 cho nút, primary-100 cho nền". Sự nhất quán giảm mệt mỏi quyết định và tăng tốc quy trình thiết kế.