Color Palette Generator

Generate a complete 10-shade color palette from any base color in Tailwind CSS style.

Màu cơ sở

50#f0f6fergb(240, 246, 254)hsl(217, 91%, 97%)

100#dde9fdrgb(221, 233, 253)hsl(217, 91%, 93%)

200#b6d1fcrgb(182, 209, 252)hsl(217, 91%, 85%)

300#7bacf9rgb(123, 172, 249)hsl(217, 91%, 73%)

400#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)

500#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)

600#0b60eargb(11, 96, 234)hsl(217, 91%, 48%)

700#094cb9rgb(9, 76, 185)hsl(217, 91%, 38%)

800#063888rgb(6, 56, 136)hsl(217, 91%, 28%)

900#042458rgb(4, 36, 88)hsl(217, 91%, 18%)

Giới thiệu công cụ

Bộ trích xuất bảng màu tạo ra thang 10 bước cho hệ thống thiết kế từ bất kỳ màu cơ sở nào, phù hợp với quy ước sắc độ 50-900 được sử dụng bởi Tailwind CSS, Material Design và các framework tương tự.

Mỗi mẫu trong thang được tạo hiển thị giá trị hex, RGB và HSL. Màu chữ trên mỗi mẫu tự động điều chỉnh thành trắng hoặc tối dựa trên độ sáng.

Cách sử dụng

Chọn màu cơ sở bằng bộ chọn màu hoặc nhập giá trị hex.
Thang 10 bước (50-900) được tạo ngay lập tức, bao phủ toàn bộ phạm vi độ sáng.
Sử dụng các giá trị hex, RGB hoặc HSL để áp dụng màu vào hệ thống thiết kế hoặc biến CSS.

Trường hợp sử dụng

Nhóm hệ thống thiết kế tạo thang màu hoàn chỉnh làm phần mở rộng cấu hình Tailwind hoặc thuộc tính CSS tùy chỉnh. Lập trình viên frontend xây dựng các thành phần UI có thể truy cập.

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

Thang này khác với "sắc độ" trong các công cụ khác như thế nào? — Công cụ này tạo thang cố định 10 bước (50, 100, 200, … 900) neo ở các giá trị độ sáng cụ thể, phù hợp với các quy ước hệ thống thiết kế phổ biến.
Thay đổi độ bão hòa có ảnh hưởng đến thang không? — Độ bão hòa của màu cơ sở được giữ nguyên ở tất cả các bước — chỉ có độ sáng thay đổi.
Tôi có thể dùng trực tiếp trong Tailwind CSS không? — Có. Sao chép các giá trị hex từ mỗi mức sắc độ và thêm vào tailwind.config.js dưới theme.extend.colors với số sắc độ làm khóa.