Hướng dẫn

Kiểm tra màu và tương phản

Hướng dẫn dùng HEX, RGB, HSL và tỷ lệ tương phản để giữ màu giao diện dễ đọc.

Kiểm tra trên nền thật

Sau khi chuyển đổi màu, hãy kiểm tra tương phản trên nền, cỡ chữ và trạng thái giao diện thật. Chỉ nhìn HEX hoặc RGB chưa đủ để kết luận dễ đọc.

Loại bỏ dữ liệu nhạy cảm

Công cụ trình duyệt nhanh, nhưng bí mật sản xuất, dữ liệu khách hàng và tên host nội bộ cần được ẩn hoặc xóa.

Kiểm tra trước khi sao chép

Xem đầu ra tạo ra như bản nháp cho đến khi môi trường chạy, biến thể cú pháp hoặc hành vi nền tảng được xác nhận.

Kiểm tra lại bằng công cụ liên quan

Đừng kết thúc Kiểm tra màu và tương phản như một bước riêng lẻ. Trước khi sao chép, hãy kiểm tra định dạng, múi giờ, mã hóa và trạng thái URL công khai bằng công cụ liên quan.

Chỉ giữ kết quả có thể chia sẻ

Xóa bí mật sản xuất, dữ liệu khách hàng, host nội bộ và token dùng một lần. Ghi ngắn giả định chính để kết quả dùng được trong tài liệu, issue hoặc review mã.

Đặt tiêu chí kiểm tra trước

Trước khi dùng Kiểm tra màu và tương phản, hãy xác định kết quả nào đủ an toàn để sao chép. Kiểm tra dạng đầu vào, môi trường đích, ranh giới bảo mật và phạm vi chia sẻ giúp biết kết quả có hợp với việc thật không.

Xác nhận mẫu đầu vào đại diện cho vấn đề thật.
Ghi lại trình duyệt, bộ lập lịch, parser hoặc môi trường triển khai.
Nếu có cảnh báo, kiểm tra lại bằng công cụ liên quan trước khi sao chép.

Nối sang bước tiếp theo

Một luồng hữu ích không dừng ở một lần chuyển đổi. Định dạng rồi trích xuất, tạo rồi xác thực, kiểm tra URL công khai rồi xem thêm header, DNS, robots hoặc sitemap.

Đưa kết quả đã định dạng sang diff hoặc schema khi cần đối chiếu.
Kết hợp kết quả URL và mạng với redirect, robots và sitemap.
Trước khi chia sẻ, xóa bí mật, host nội bộ và dữ liệu khách hàng.

Trước khi sao chép

Vòng kiểm tra ngắn để tái sử dụng an toàn hơn

1. Color converterChuyển đổi màu HEX, RGB và HSL, đồng thời kiểm tra tương phản WCAG giữa màu chữ và nền.Màu sắcBước tiếp theo: Chuyển đổi màu HEX, RGB và HSL, đồng thời kiểm tra tương phản WCAG giữa màu chữ và nền.Đối chiếu lại đầu vào gốc với dạng kết quả.2. Đổi đơn vị CSSChuyển đổi px, rem, em và phần trăm cho tính toán bố cục và typography CSS.MãBước tiếp theo: Chuyển đổi px, rem, em và phần trăm cho tính toán bố cục và typography CSS.Đối chiếu lại đầu vào gốc với dạng kết quả.3. Tạo CSS clampTạo giá trị CSS clamp() từ min/max cho font-size và khoảng cách responsive.MãBước tiếp theo: Tạo giá trị CSS clamp() từ min/max cho font-size và khoảng cách responsive.Đối chiếu lại đầu vào gốc với dạng kết quả.

Color converter

Chuyển đổi màu HEX, RGB và HSL, đồng thời kiểm tra tương phản WCAG giữa màu chữ và nền.

Màu sắc

Trường hợp dùng

Chuyển đổi màu HEX, RGB và HSL, đồng thời kiểm tra tương phản WCAG giữa màu chữ và nền.
Xử lý đầu vào với chế độ Cục bộ trên trình duyệt và kiểm tra trước khi sao chép.
Kết hợp Color converter với công cụ liên quan để rút ngắn quy trình.

Công cụ liên quan

Tạo CSS clampTạo giá trị CSS clamp() từ min/max cho font-size và khoảng cách responsive.Bước tiếp theo: Tạo giá trị CSS clamp() từ min/max cho font-size và khoảng cách responsive.Đổi đơn vị CSSChuyển đổi px, rem, em và phần trăm cho tính toán bố cục và typography CSS.Bước tiếp theo: Chuyển đổi px, rem, em và phần trăm cho tính toán bố cục và typography CSS.

Lỗi thường gặp

Chuyển đổi màu HEX, RGB và HSL, đồng thời kiểm tra tương phản WCAG giữa màu chữ và nền.
Nếu chế độ Cục bộ trên trình duyệt không khớp với dạng đầu vào thật, đừng tin kết quả khi chưa kiểm tra.
Xóa bí mật sản xuất, dữ liệu khách hàng và URL nội bộ trước khi chia sẻ giá trị đã sao chép.

Trước khi sao chép

Đối chiếu lại đầu vào gốc với dạng kết quả.
Kiểm tra khác biệt về runtime, mã hóa, múi giờ và chính sách bảo mật.
Dùng công cụ liên quan để xác nhận kết quả Color converter phù hợp với bước tiếp theo.

Ví dụ

Đầu vào thường gặp

Chuyển đổi định dạng màu và kiểm tra tương phản chữ/nền, trạng thái AA/AAA và lưu ý alpha.

#2563eb on #ffffff

Đầu ra thường gặp

Ví dụ nhanh để kiểm tra hình dạng đầu ra trước khi sao chép.

Giá trị HEX/RGB/HSL / tương phản 5.17 / AA đạt / AAA cần xem

Ví dụ thêm

Ví dụ nhanh để kiểm tra hình dạng đầu ra trước khi sao chép.

#2563eb on #ffffff

FAQ

Đầu vào của Color converter được xử lý ở đâu?

Khi có thể, dữ liệu được xử lý trong trình duyệt. Không dán bí mật sản xuất hay dữ liệu khách hàng.

Có thể dùng kết quả trực tiếp trên môi trường sản xuất không?

Trước khi sao chép, hãy kiểm tra môi trường chạy, mã hóa, múi giờ và chính sách bảo mật.

Đổi đơn vị CSS

Chuyển đổi px, rem, em và phần trăm cho tính toán bố cục và typography CSS.

Mã

Trường hợp dùng

Chuyển đổi px, rem, em và phần trăm cho tính toán bố cục và typography CSS.
Xử lý đầu vào với chế độ Cục bộ trên trình duyệt và kiểm tra trước khi sao chép.
Kết hợp Đổi đơn vị CSS với công cụ liên quan để rút ngắn quy trình.

Công cụ liên quan

Tạo CSS clampTạo giá trị CSS clamp() từ min/max cho font-size và khoảng cách responsive.Bước tiếp theo: Tạo giá trị CSS clamp() từ min/max cho font-size và khoảng cách responsive.Color converterChuyển đổi màu HEX, RGB và HSL, đồng thời kiểm tra tương phản WCAG giữa màu chữ và nền.Bước tiếp theo: Chuyển đổi màu HEX, RGB và HSL, đồng thời kiểm tra tương phản WCAG giữa màu chữ và nền.

Lỗi thường gặp

Chuyển đổi px, rem, em và phần trăm cho tính toán bố cục và typography CSS.
Nếu chế độ Cục bộ trên trình duyệt không khớp với dạng đầu vào thật, đừng tin kết quả khi chưa kiểm tra.
Xóa bí mật sản xuất, dữ liệu khách hàng và URL nội bộ trước khi chia sẻ giá trị đã sao chép.

Trước khi sao chép

Đối chiếu lại đầu vào gốc với dạng kết quả.
Kiểm tra khác biệt về runtime, mã hóa, múi giờ và chính sách bảo mật.
Dùng công cụ liên quan để xác nhận kết quả Đổi đơn vị CSS phù hợp với bước tiếp theo.

Ví dụ

Đầu vào thường gặp

Dùng ví dụ này để kiểm tra luồng đầu vào của Đổi đơn vị CSS.

16px at 16px root

Đầu ra thường gặp

Ví dụ nhanh để kiểm tra hình dạng đầu ra trước khi sao chép.

1rem / 1em / 100%

FAQ

Đầu vào của Đổi đơn vị CSS được xử lý ở đâu?

Khi có thể, dữ liệu được xử lý trong trình duyệt. Không dán bí mật sản xuất hay dữ liệu khách hàng.

Có thể dùng kết quả trực tiếp trên môi trường sản xuất không?

Trước khi sao chép, hãy kiểm tra môi trường chạy, mã hóa, múi giờ và chính sách bảo mật.

Tạo CSS clamp

Tạo giá trị CSS clamp() từ min/max cho font-size và khoảng cách responsive.

Mã

Trường hợp dùng

Tạo giá trị CSS clamp() từ min/max cho font-size và khoảng cách responsive.
Xử lý đầu vào với chế độ Cục bộ trên trình duyệt và kiểm tra trước khi sao chép.
Kết hợp Tạo CSS clamp với công cụ liên quan để rút ngắn quy trình.

Công cụ liên quan

Đổi đơn vị CSSChuyển đổi px, rem, em và phần trăm cho tính toán bố cục và typography CSS.Bước tiếp theo: Chuyển đổi px, rem, em và phần trăm cho tính toán bố cục và typography CSS.Color converterChuyển đổi màu HEX, RGB và HSL, đồng thời kiểm tra tương phản WCAG giữa màu chữ và nền.Bước tiếp theo: Chuyển đổi màu HEX, RGB và HSL, đồng thời kiểm tra tương phản WCAG giữa màu chữ và nền.

Lỗi thường gặp

Tạo giá trị CSS clamp() từ min/max cho font-size và khoảng cách responsive.
Nếu chế độ Cục bộ trên trình duyệt không khớp với dạng đầu vào thật, đừng tin kết quả khi chưa kiểm tra.
Xóa bí mật sản xuất, dữ liệu khách hàng và URL nội bộ trước khi chia sẻ giá trị đã sao chép.

Trước khi sao chép

Đối chiếu lại đầu vào gốc với dạng kết quả.
Kiểm tra khác biệt về runtime, mã hóa, múi giờ và chính sách bảo mật.
Dùng công cụ liên quan để xác nhận kết quả Tạo CSS clamp phù hợp với bước tiếp theo.

Ví dụ

Đầu vào thường gặp

Dùng ví dụ này để kiểm tra luồng đầu vào của Tạo CSS clamp.

16px at 360px, 32px at 1200px

Đầu ra thường gặp

Ví dụ nhanh để kiểm tra hình dạng đầu ra trước khi sao chép.

clamp(1rem, 0.5714rem + 1.9048vw, 2rem)

FAQ

Đầu vào của Tạo CSS clamp được xử lý ở đâu?

Khi có thể, dữ liệu được xử lý trong trình duyệt. Không dán bí mật sản xuất hay dữ liệu khách hàng.

Có thể dùng kết quả trực tiếp trên môi trường sản xuất không?

Trước khi sao chép, hãy kiểm tra môi trường chạy, mã hóa, múi giờ và chính sách bảo mật.

Công cụ liên quan

Mở tiện ích liên kết với hướng dẫn này.

Color converterChuyển đổi màu HEX, RGB và HSL, đồng thời kiểm tra tương phản WCAG giữa màu chữ và nền.Chuyển đổi màu HEX, RGB và HSL, đồng thời kiểm tra tương phản WCAG giữa màu chữ và nền. · Xử lý đầu vào với chế độ Cục bộ trên trình duyệt và kiểm tra trước khi sao chép.Chuyển đổi định dạng màu và kiểm tra tương phản chữ/nền, trạng thái AA/AAA và lưu ý alpha.Khi có thể, dữ liệu được xử lý trong trình duyệt. Không dán bí mật sản xuất hay dữ liệu khách hàng.Đổi đơn vị CSSChuyển đổi px, rem, em và phần trăm cho tính toán bố cục và typography CSS.Chuyển đổi px, rem, em và phần trăm cho tính toán bố cục và typography CSS. · Xử lý đầu vào với chế độ Cục bộ trên trình duyệt và kiểm tra trước khi sao chép.Dùng ví dụ này để kiểm tra luồng đầu vào của Đổi đơn vị CSS.Khi có thể, dữ liệu được xử lý trong trình duyệt. Không dán bí mật sản xuất hay dữ liệu khách hàng.Tạo CSS clampTạo giá trị CSS clamp() từ min/max cho font-size và khoảng cách responsive.Tạo giá trị CSS clamp() từ min/max cho font-size và khoảng cách responsive. · Xử lý đầu vào với chế độ Cục bộ trên trình duyệt và kiểm tra trước khi sao chép.Dùng ví dụ này để kiểm tra luồng đầu vào của Tạo CSS clamp.Khi có thể, dữ liệu được xử lý trong trình duyệt. Không dán bí mật sản xuất hay dữ liệu khách hàng.