Cách chọn màu và tạo CSS gradient, bóng và viền
Sao chép HEX/RGB/HSL, linear-gradient, box-shadow và border từ bản xem trực tiếp — token thiết kế trên trình duyệt, không phải IDE đầy đủ.
Bộ chọn so với bộ đổi
Chọn màu tại /tools/color-picker là chọn trực quan rồi copy HEX, RGB và HSL. Đổi màu tại /tools/color-converter để gõ #FF5733 hoặc rgb(255, 87, 51) khi bạn đã có giá trị. Dùng picker khi đang dò; dùng converter khi ticket dán hex.
Lấy mẫu màu từ ảnh
Image Color Picker tại /tools/image-color-picker đọc JPEG, PNG hoặc WebP bạn chọn trên tab này. Hover phóng pixel dưới con trỏ bằng kính lúp nearest-neighbor để đường mảnh và cạnh anti-alias dễ đánh giá; nhấp khóa HEX, RGB và HSL. Không tải lên. Đây không phải eyedropper hệ điều hành cho cửa sổ khác, cũng không phải pad bão hòa — nguồn là tệp. Cắt hoặc nén bitmap trước nếu ảnh rất lớn, rồi lấy mẫu ở đây. Image Base64 nhúng file; không trả về hex.
Gradient, bóng, viền
Tạo gradient tại /tools/gradient-generator dựng CSS linear-gradient với bản xem (góc và điểm dừng màu). Tạo bóng CSS tại /tools/css-shadow-generator chỉnh offset, blur, spread và màu box-shadow. Tạo viền CSS tại /tools/css-border-generator đặt độ dày, kiểu, bo góc và màu. Copy CSS vào stylesheet. Định dạng đoạn bằng Định dạng CSS nếu muốn thụt. Đây không phải file cấu hình Tailwind và không phải xuất Figma.
Các bước
1) Nếu token nằm trong ảnh chụp hoặc logo, mở Image Color Picker, di chuột để phóng, rồi nhấp một pixel. Nếu đang bịa swatch, mở Chọn màu (hoặc Đổi màu) và copy token. 2) Mở Gradient, Bóng hoặc Viền và khớp màu đó. 3) Chỉnh bản xem đến khi ổn trên theme Tối và Sáng nếu app có cả hai. 4) Dán vào CSS. 5) Nén sau bằng Định dạng CSS nếu bước build chưa làm.
Ví dụ làm việc
Ảnh sản phẩm: lấy mẫu #10b981 trên Image Color Picker, rồi HSL để chỉnh độ sáng hover trên Color Picker. Hero: linear-gradient(135deg, #0f172a, #10b981). Thẻ: box-shadow 0 8px 24px với đen trong suốt. Nút: 1px solid, bo 8px. Công cụ nén/đổi kích thước/cắt ảnh sửa pixel; chúng không phát CSS. Mã QR là đồ họa. Không tải lên.
Giới hạn
Không trình sửa radial/conic trừ khi giao diện có. Không filter: drop-shadow tách khỏi box-shadow. Không phiên bản hệ thống thiết kế. Liên quan: /tools/image-color-picker, /tools/color-converter, /tools/css-formatter, /tools/html-formatter.
Quyền riêng tư
Token ở lại tab. Liên quan: /tools/image-color-picker, /tools/gradient-generator, /tools/css-shadow-generator, /tools/css-border-generator. Đóng trang nếu bảng màu là thương hiệu chưa ra mắt.