Các công cụ màu sắc của ToolDeck cho phép bạn chuyển đổi giữa các định dạng màu, kiểm tra tỷ lệ tương phản hỗ trợ tiếp cận, tạo bảng màu, xây dựng gradient CSS và tra cứu tên màu hoặc lớp Tailwind trực tiếp trong trình duyệt. Bộ Chuyển Đổi Màu xử lý HEX, RGB, HSL và HSV theo cả hai chiều. Công cụ Kiểm Tra Độ Tương Phản kiểm tra tuân thủ WCAG 2.1 AA và AAA. Công cụ Tạo Bảng Màu tạo các sơ đồ bổ sung, tương đồng, tam giác và tứ giác từ bất kỳ màu cơ sở nào. Công cụ Tạo Gradient CSS xuất mã gradient tuyến tính và hướng tâm sẵn sàng để sao chép. Công cụ Tìm Tên Màu khớp bất kỳ giá trị nào với tên màu CSS gần nhất, và Công cụ Tìm Màu Tailwind ánh xạ các màu tùy ý sang lớp tiện ích Tailwind. Tất cả công cụ chạy phía client mà không có dữ liệu nào được gửi đến bất kỳ máy chủ nào.
Công Cụ Màu Sắc Là Gì?
Công cụ màu sắc là các tiện ích giúp lập trình viên và nhà thiết kế làm việc với các giá trị màu kỹ thuật số. Mỗi màu trên màn hình được lưu dưới dạng số: ba kênh cho RGB (đỏ, xanh lá, xanh dương), bộ ba hex cho CSS rút gọn, hoặc góc màu sắc cộng với độ bão hòa và độ sáng cho HSL. Chuyển đổi thủ công giữa các biểu diễn này rất chậm và dễ xảy ra lỗi, đặc biệt khi bạn cũng cần tính đến độ trong suốt alpha hoặc các mô hình mới hơn như OKLCH.
Ngoài chuyển đổi định dạng, công việc với màu sắc còn bao gồm kiểm tra khả năng tiếp cận, tạo bảng màu và soạn thảo gradient. WCAG 2.1 định nghĩa tỷ lệ tương phản tối thiểu (4,5:1 cho văn bản thường ở mức AA, 7:1 cho AAA) rất khó xác minh bằng mắt thường. Tạo sơ đồ màu hài hòa yêu cầu tính toán góc chính xác trên bánh xe màu HSL. Gradient CSS cần cú pháp đúng cho hướng, điểm dừng màu và giá trị dự phòng. Thực hiện bất kỳ thao tác nào trong số này theo cách thủ công trên một hệ thống thiết kế với hàng chục token sẽ trở nên tẻ nhạt rất nhanh.
Công cụ màu sắc tự động hóa các tác vụ này. Chúng nhận một màu theo một định dạng, tính toán và trả về kết quả bạn cần — dù đó là giá trị đã chuyển đổi, kết luận đạt/không đạt về khả năng tiếp cận, một bộ mẫu màu hài hòa, hay đoạn mã CSS. Khi công cụ chạy trong trình duyệt, bạn cũng tránh được việc tải lên các design token nhạy cảm lên dịch vụ bên thứ ba.
Tại Sao Sử Dụng Công Cụ Màu Sắc Trên ToolDeck?
Các công cụ màu sắc của ToolDeck chạy hoàn toàn trong trình duyệt của bạn. Không có giá trị màu nào rời khỏi máy của bạn, không cần tài khoản và mọi công cụ tải tức thì mà không cần cài đặt tiện ích mở rộng hay phần mềm máy tính.
🎨Chuyển đổi định dạng trong một bước
Dán mã HEX và nhận các giá trị RGB, HSL và HSV cùng lúc. Không cần kết nối nhiều công cụ chuyển đổi hay nhớ các công thức chuyển đổi.
🔒Giữ design token riêng tư
Tất cả quá trình xử lý diễn ra phía client. Màu thương hiệu, quyết định bảng màu chưa phát hành và các giá trị hệ thống thiết kế nội bộ của bạn ở lại trên thiết bị của bạn.
♿Kiểm tra khả năng tiếp cận ngay lập tức
Kiểm tra bất kỳ cặp màu nền/chữ nào so với ngưỡng WCAG 2.1 AA và AAA cho cả văn bản thường và văn bản lớn. Nhận tỷ lệ tương phản chính xác, không chỉ nhãn đạt/không đạt.
⚡Sao chép kết quả sẵn sàng cho production
Mọi công cụ đều xuất các giá trị bạn có thể dán trực tiếp vào CSS, cấu hình Tailwind hoặc các trường nhập của công cụ thiết kế. Không cần định dạng lại.
Các Trường Hợp Sử Dụng Công Cụ Màu Sắc
Dưới đây là sáu tình huống phổ biến mà các công cụ màu sắc của ToolDeck giúp tiết kiệm thời gian.
Bảo Trì Hệ Thống Thiết Kế
Khi cập nhật hệ thống thiết kế, bạn thường nhận màu ở dạng HEX từ nhà thiết kế nhưng cần HSL cho CSS custom properties.
Bộ Chuyển Đổi Màu chuyển đổi giữa các định dạng để bạn có thể điền vào các tệp token mà không cần tính toán thủ công.
Kiểm Toán Khả Năng Tiếp Cận
Trong quá trình kiểm toán tuân thủ WCAG, mọi tổ hợp văn bản/nền đều phải đáp ứng tỷ lệ tương phản tối thiểu.
Kiểm Tra Độ Tương Phản Màu hiển thị tỷ lệ chính xác và trạng thái đạt AA/AAA cho cả kích thước văn bản thường và lớn.
Khám Phá Bảng Màu Thương Hiệu
Bắt đầu từ một màu thương hiệu duy nhất, bạn cần các biến thể nhấn màu và trung tính.
Tạo Bảng Màu tính toán các hòa âm bổ sung, tương đồng, tam giác và tứ giác để bạn có thể đánh giá các tùy chọn trước khi chọn bảng màu.
Tạo Kiểu Nền CSS
Xây dựng phần hero hoặc nền card với gradient yêu cầu cú pháp CSS đúng cho góc, điểm dừng màu và tiền tố nhà cung cấp.
Tạo Gradient CSS cho phép bạn xây dựng gradient trực quan và sao chép mã.
Di Chuyển Sang Tailwind
Khi di chuyển dự án sang Tailwind CSS, bạn cần ánh xạ các giá trị HEX hoặc RGB hiện có sang lớp tiện ích Tailwind gần nhất.
Tìm Màu Tailwind tìm kết quả khớp gần nhất và hiển thị độ chênh lệch để bạn có thể quyết định xem sự xấp xỉ có chấp nhận được không.
Xem Xét Mã và Tài Liệu
Trong quá trình xem xét mã, một giá trị HEX thô như #708090 không có nghĩa gì khi nhìn thoáng qua.
Tìm Tên Màu xác định nó là SlateGray, giúp việc xem xét và tài liệu dễ đọc hơn.
Tài Liệu Tham Khảo Mô Hình Màu CSS
CSS hỗ trợ nhiều mô hình màu. Bảng dưới đây tóm tắt sáu định dạng phổ biến nhất, cú pháp và các trường hợp sử dụng điển hình. Tất cả đều được hỗ trợ bởi Bộ Chuyển Đổi Màu của ToolDeck.
| Mô hình | Cú pháp CSS | Kênh | Phạm vi giá trị | Sử dụng điển hình |
|---|
| HEX | #rrggbb | Đỏ, Xanh lá, Xanh dương | 00–ff mỗi kênh | Phổ biến nhất trong CSS, bàn giao thiết kế, hướng dẫn thương hiệu |
| RGB | rgb(r, g, b) | Đỏ, Xanh lá, Xanh dương | 0–255 mỗi kênh | JavaScript canvas API, computed styles, xử lý ảnh |
| HSL | hsl(h, s%, l%) | Màu sắc, Độ bão hòa, Độ sáng | 0–360 / 0–100% / 0–100% | Design token, tạo giao diện, các biến thể sắc độ lập trình |
| HSV | N/A (không có trong CSS) | Màu sắc, Độ bão hòa, Giá trị | 0–360 / 0–100% / 0–100% | Bộ chọn màu (Photoshop, Figma), hiệu chỉnh màu phần cứng |
| OKLCH | oklch(L C H) | Độ sáng, Độ bão hòa sắc, Màu sắc | 0–1 / 0–0,4 / 0–360 | Bảng màu đồng đều cảm nhận (đặc tả CSS Color Level 4) |
| Named | ví dụ: slategray | Ánh xạ nội bộ sang RGB | 148 tên được định nghĩa trước | Tạo mẫu, mã dễ đọc, trình diễn nhanh |
CSS Color Level 4 (W3C) cũng định nghĩa các hàm lab(), lch() và color(). HEX và RGB vẫn được hỗ trợ rộng rãi nhất trên các trình duyệt và công cụ thiết kế.
Cách Chọn Công Cụ Màu Sắc Phù Hợp
Mỗi công cụ màu sắc giải quyết một vấn đề khác nhau. Sử dụng hướng dẫn dưới đây để tìm công cụ phù hợp cho tác vụ của bạn.
- 1
Nếu bạn cần chuyển đổi màu giữa các định dạng HEX, RGB, HSL hoặc HSV → Bộ Chuyển Đổi Màu - 2
Nếu bạn cần xác minh rằng cặp màu văn bản/nền đáp ứng tiêu chuẩn khả năng tiếp cận WCAG → Kiểm Tra Độ Tương Phản Màu - 3
Nếu bạn cần tạo một bộ màu hài hòa từ một màu cơ sở duy nhất → Tạo Bảng Màu - 4
Nếu bạn cần xây dựng gradient CSS tuyến tính hoặc hướng tâm và lấy mã → Tạo Gradient CSS - 5
Nếu bạn cần tìm tên CSS dễ đọc gần nhất với một giá trị màu đã cho → Tìm Tên Màu - 6
Nếu bạn cần ánh xạ màu tùy ý sang lớp tiện ích Tailwind CSS gần nhất → Tìm Màu Tailwind
Tất cả sáu công cụ đều chấp nhận đầu vào ở nhiều định dạng. Nếu bạn không chắc màu của mình thuộc định dạng nào, hãy bắt đầu với Bộ Chuyển Đổi Màu, công cụ này tự động nhận diện ký hiệu HEX, RGB, HSL và HSV.
Câu Hỏi Thường Gặp
Sự khác biệt giữa định dạng màu HEX và RGB là gì?
HEX và RGB biểu diễn cùng một không gian màu. Mã HEX như #ff6600 là mã hóa thập lục phân của ba kênh RGB: ff = 255 (đỏ), 66 = 102 (xanh lá), 00 = 0 (xanh dương). Sự khác biệt duy nhất là cách ký hiệu. HEX gọn hơn trong các bảng định kiểu CSS, trong khi RGB dễ xử lý lập trình hơn vì mỗi kênh đã là số nguyên thập phân.
Khi nào tôi nên dùng HSL thay vì HEX hoặc RGB?
HSL tách màu sắc (bản thân màu) khỏi độ bão hòa và độ sáng. Điều này giúp tạo các biến thể sắc độ dễ dàng hơn: giữ nguyên màu sắc, giảm độ sáng cho sắc tối hơn, tăng lên cho sắc sáng hơn. Các hệ thống thiết kế tạo giao diện sáng/tối từ một màu cơ sở thường lưu token dưới dạng HSL vì lý do này. CSS custom properties cũng kết hợp tốt với HSL vì bạn có thể ghi đè từng kênh riêng lẻ.
WCAG 2.1 yêu cầu tỷ lệ tương phản bao nhiêu cho văn bản?
WCAG 2.1 Mức AA yêu cầu tỷ lệ tương phản tối thiểu 4,5:1 cho văn bản thường (dưới 18pt hoặc 14pt đậm) và 3:1 cho văn bản lớn (18pt+ hoặc 14pt+ đậm). Mức AAA nâng các ngưỡng đó lên 7:1 và 4,5:1 tương ứng. Các tỷ lệ này được tính từ độ sáng tương đối của màu nền trước và nền sau bằng công thức được định nghĩa trong Tiêu chí Thành công 1.4.3 của WCAG 2.1.
CSS hỗ trợ bao nhiêu màu được đặt tên?
CSS định nghĩa 148 màu được đặt tên, kế thừa từ các đặc tả màu SVG 1.1 và CSS3. Chúng bao gồm từ các tên phổ biến như red, blue và white đến các tên cụ thể như MediumSlateBlue, PapayaWhip và LavenderBlush. Màu được đặt tên ánh xạ sang các giá trị RGB cố định. Đặc tả CSS Color Level 4 giữ nguyên 148 tên và không thêm tên mới. Trình duyệt cũng nhận ra từ khóa transparent (tương đương rgba(0,0,0,0)).
Tôi có thể sử dụng màu OKLCH trong CSS hiện nay không?
Có. Hàm oklch() được hỗ trợ trong Chrome 111+, Firefox 113+ và Safari 15.4+. OKLCH là một phần của đặc tả CSS Color Level 4 được W3C công bố. Ưu điểm chính của nó so với HSL là tính đồng đều cảm nhận: hai màu có cùng giá trị độ sáng trong OKLCH thực sự trông sáng đều nhau với mắt người, điều này không đúng với HSL. Điều này làm cho OKLCH là lựa chọn tốt hơn để tạo bảng màu tiếp cận với độ sáng cảm nhận nhất quán.
Sự khác biệt giữa HSL và HSV là gì?
HSL và HSV đều sử dụng biểu diễn hình trụ với màu sắc là góc, nhưng chúng định nghĩa độ sáng khác nhau. Trong HSL, độ sáng 50% là màu thuần; 0% là đen, 100% là trắng. Trong HSV, giá trị 100% là màu thuần; 0% là đen. HSV không có cách tích hợp để đạt màu trắng mà không giảm độ bão hòa. Các nhà thiết kế và bộ chọn màu (Photoshop, Figma) thường sử dụng HSV, trong khi CSS sử dụng HSL một cách tự nhiên.
Làm thế nào để tìm lớp Tailwind cho một màu HEX tùy ý?
Tailwind CSS đi kèm với bảng màu cố định khoảng 220 lớp màu (22 màu sắc nhân 10 sắc độ mỗi màu, cộng với đen, trắng và transparent). Để tìm lớp gần nhất cho một giá trị HEX đã cho, bạn tính khoảng cách Euclidean trong không gian màu cảm nhận (như CIELAB hoặc OKLCH) giữa màu của bạn và mọi mẫu Tailwind. Công cụ Tìm Màu Tailwind trên ToolDeck thực hiện việc này tự động và hiển thị kết quả khớp gần nhất cùng với độ chênh lệch màu để bạn có thể đánh giá xem sự xấp xỉ có đủ tốt không.
Có an toàn khi dán màu thương hiệu bí mật vào công cụ trực tuyến không?
Điều đó phụ thuộc vào công cụ. Bất kỳ công cụ nào gửi đầu vào của bạn đến máy chủ đều để lộ các giá trị đó trong lưu lượng mạng và nhật ký máy chủ. Các công cụ màu sắc của ToolDeck chạy hoàn toàn trong trình duyệt của bạn bằng JavaScript phía client. Không có yêu cầu HTTP nào mang dữ liệu màu của bạn đến bất kỳ backend nào. Bạn có thể xác minh điều này bằng cách mở tab Mạng của trình duyệt trong khi sử dụng công cụ. Để đảm bảo an toàn tối đa, bạn cũng có thể sử dụng các công cụ ngoại tuyến sau khi tải trang lần đầu.