English 简体中文 Tiếng Việt 日本語 한국어 हिन्दी Español Français العربية বাংলা Português Русский اردو Bahasa Indonesia Deutsch Naijá मराठी తెలుగు Türkçe தமிழ்

🎨 ColorLab - Công cụ bảng màu và chuyển đổi màu thông minh

Chuyển đổi định dạng màu chuyên nghiệp · Tạo bảng màu thông minh · Phân tích độ tương phản trợ năng
#4A90E2
Nhấp vào khối màu hoặc sử dụng công cụ chọn màu để chọn màu
Hỗ trợ các giá trị màu thập lục phân 3 chữ số (#RGB) hoặc 6 chữ số (#RRGGBB)
Các giá trị Đỏ, Xanh lục, Xanh lam, phạm vi 0-255
Màu sắc (0-360°), Độ bão hòa (0-100%), Độ sáng (0-100%)
🎨 Bảng màu thông minh
Sự kết hợp màu sắc hài hòa được tạo tự động dựa trên lý thuyết màu sắc
⚡ Phân tích màu sắc
Phân tích tiêu chuẩn về khả năng tiếp cận và thuộc tính màu chuyên nghiệp

Kiểm tra độ tương phản

Tương phản với màu trắng: 4,5:1
Tương phản với màu đen: 12:1
✅ Đạt tiêu chuẩn về khả năng tiếp cận
Tiêu chuẩn WCAG 2.1: Nhu cầu về độ tương phản văn bản ≥4,5:1

Phân tích độ sáng

Độ chói tương đối: 0,28
Độ sáng được cảm nhận: Trung bình
Đề xuất sử dụng: Màu chính, Nút
Phạm vi độ sáng tương đối: 0 (đen thuần khiết) đến 1 (trắng thuần)

Thông tin về màu sắc

Huế: 212°
Độ bão hòa: 72%
Độ sáng: 59%
Huế: Đỏ=0°/360°, Xanh lục=120°, Xanh lam=240°
Đã sao chép vào bảng nhớ tạm!

Các tính năng của ColorLab

📖 Giới thiệu: Công cụ màu trực tuyến chuyên nghiệp cung cấp các tính năng xử lý màu và tạo bảng màu toàn diện. Sự tích hợp hoàn hảo của bộ chuyển đổi màu , trình tạo bảng màu , trình kiểm tra độ tương phản màu , công cụ phân tích màu , v.v.

Chuyển đổi màu theo thời gian thực

Hỗ trợ chuyển đổi hai chiều theo thời gian thực giữa các định dạng màu HEX, RGB và HSL. Nhập bất kỳ định dạng nào để tự động đồng bộ hóa các bản cập nhật giữa các định dạng khác, đảm bảo tính nhất quán của màu sắc.

Trao đổi định dạng: HEX ↔ RGB ↔ HSL, sửa đổi mọi định dạng sẽ tự động đồng bộ hóa các định dạng khác

Thế hệ bảng màu thông minh

Tự động tạo các bảng màu Đơn sắc, Bổ sung, Tương tự và Bộ ba dựa trên lý thuyết màu sắc, giúp tạo ra sự kết hợp màu sắc hài hòa.

Lý thuyết màu sắc: Sự kết hợp màu sắc hài hòa được tạo ra theo toán học dựa trên bánh xe màu

Phân tích khả năng tiếp cận

Kiểm tra xem độ tương phản màu có đáp ứng tiêu chuẩn trợ năng WCAG 2.1 hay không, đảm bảo màu sắc của trang web phù hợp với tất cả người dùng, kể cả người dùng khiếm thị.

Tiêu chuẩn WCAG: Độ tương phản văn bản ≥4,5:1, độ tương phản văn bản lớn ≥3:1

Phân tích màu chuyên sâu

Cung cấp phân tích đặc tính màu sắc chi tiết bao gồm độ chói tương đối, độ sáng cảm nhận được, màu sắc, độ bão hòa và độ sáng để giúp hiểu các đặc điểm màu sắc.

Độ chói tương đối: Tính toán độ sáng dựa trên nhận thức thị giác của con người (0-1)

Chức năng sao chép bằng một cú nhấp chuột

Hỗ trợ sao chép các giá trị màu bằng một cú nhấp chuột (HEX, RGB, HSL). Các màu trong bảng màu cũng có thể được sao chép riêng lẻ để dễ dàng sử dụng trong các công cụ thiết kế.

Sao chép định dạng: HEX với #, RGB với rgb(), HSL với hsl()

Thiết kế đáp ứng

Thích ứng hoàn hảo với các màn hình thiết bị khác nhau bao gồm máy tính để bàn, máy tính bảng và thiết bị di động. Phân tích màu sắc mọi lúc, mọi nơi mà không cần cài đặt bất kỳ phần mềm nào.

Được tối ưu hóa cho thiết bị di động: Trải nghiệm người dùng tốt trên điện thoại và máy tính bảng

Thông số kỹ thuật màu sắc

Tiêu chuẩn màu sắc và phương pháp tính toán được công cụ này sử dụng:

  • Chuyển đổi màu: Dựa trên thuật toán màu tiêu chuẩn W3C
  • Tính toán độ tương phản: Thuật toán tương phản WCAG 2.1 (công thức độ chói tương đối)
  • Tạo bảng màu: Dựa trên lý thuyết màu sắc (mô hình toán học bánh xe màu)
  • Phạm vi Huế: 0° đến 360° (Đỏ=0°/360°, Xanh lục=120°, Xanh lam=240°)
  • Phạm vi độ bão hòa/độ sáng: 0% đến 100%
  • Định dạng HEX: Hỗ trợ các định dạng #RGB và #RRGGBB

Lưu ý kỹ thuật: Công cụ này sử dụng thuật toán màu JavaScript để chuyển đổi theo thời gian thực. Tính toán độ tương phản dựa trên công thức độ chói tương đối WCAG 2.1: L = 0,2126×R + 0,7152×G + 0,0722×B. Việc tạo bảng màu dựa trên các phép tính toán học của bánh xe màu: Bổ sung (chênh lệch màu sắc 180°), Tương tự (chênh lệch màu sắc 30°), Bộ ba (chênh lệch màu sắc 120°).

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

Tiêu chuẩn tương phản màu WCAG là gì? Tại sao chúng quan trọng?

WCAG (Nguyên tắc truy cập nội dung web) là các nguyên tắc về khả năng truy cập nội dung web. Tiêu chuẩn về độ tương phản màu sắc đảm bảo đủ độ tương phản giữa văn bản và nền để người dùng khiếm thị có thể đọc rõ ràng. Theo WCAG 2.1, văn bản thông thường yêu cầu độ tương phản ít nhất 4,5:1, văn bản lớn (in đậm ít nhất 18pt hoặc 14pt) yêu cầu ít nhất 3:1. Việc không đáp ứng các tiêu chuẩn này có thể khiến một số người dùng không thể sử dụng được trang web và có thể vi phạm luật truy cập ở một số khu vực.

Sự khác biệt giữa các định dạng màu HEX, RGB và HSL là gì?

Mỗi định dạng đều có đặc điểm riêng:
1) HEX (Thập lục phân): ví dụ: #4A90E2, được sử dụng phổ biến nhất trong phát triển web, ngắn gọn nhưng ít trực quan hơn để hiểu các thuộc tính màu
2) RGB (Đỏ Xanh Xanh): ví dụ: rgb(74, 144, 226), dựa trên các màu cơ bản của ánh sáng, trực quan nhưng kém thuận tiện hơn cho việc điều chỉnh các đặc tính màu
3) HSL (Độ sáng bão hòa Huế): ví dụ: hsl(212, 72%, 59%), dựa trên cảm nhận màu sắc của con người, dễ dàng điều chỉnh các đặc tính màu sắc (như tăng sáng, làm tối, điều chỉnh độ bão hòa)
ColorLab hỗ trợ chuyển đổi thời gian thực giữa ba định dạng này. Bạn có thể sử dụng bất kỳ định dạng nào thuận tiện nhất cho nhu cầu của bạn.

Bảng màu thông minh hoạt động như thế nào?

ColorLab tạo ra bốn loại bảng màu dựa trên lý thuyết màu sắc:
1) Bảng màu đơn sắc: Giữ màu sắc không đổi, điều chỉnh độ bão hòa và độ sáng để tạo ra các biến thể sáng/tối hơn
2) Bảng màu bổ sung: Sử dụng các màu đối lập trên bánh xe màu (chênh lệch màu sắc 180°), tạo ra sự kết hợp có độ tương phản cao
3) Bảng màu tương tự: Sử dụng các màu liền kề trên bánh xe màu (chênh lệch màu 30°), tạo ra sự kết hợp hài hòa, tinh tế
4) Bảng màu ba màu: Sử dụng ba màu cách đều nhau trên bánh xe màu (chênh lệch màu sắc 120°), tạo ra sự kết hợp rực rỡ, đầy màu sắc
Những bảng màu này được tính toán về mặt toán học để đảm bảo sự kết hợp màu sắc hài hòa.

Độ chói tương đối và độ sáng cảm nhận được là gì?

Độ chói tương đối là giá trị độ sáng dựa trên nhận thức thị giác của con người, nằm trong khoảng từ 0 (đen thuần khiết) đến 1 (trắng thuần). Công thức tính toán xem xét độ nhạy của mắt người với các màu khác nhau (nhạy nhất với màu xanh lá cây, ít nhất với màu xanh lam). Độ sáng cảm nhận được là một mô tả trực quan dựa trên phân loại độ chói tương đối, chẳng hạn như "rất tối", "tối", "trung bình", "sáng", "rất sáng". Độ chói tương đối được sử dụng để tính toán độ tương phản màu, trong khi độ sáng cảm nhận được giúp hiểu được trọng lượng hình ảnh của màu sắc và các ứng dụng phù hợp.

Làm cách nào để chọn màu sắc dễ tiếp cận cho trang web?

Đề xuất chọn màu có thể truy cập:
1) Sử dụng ColorLab để kiểm tra độ tương phản, đảm bảo độ tương phản của văn bản và nền ≥4,5:1
2) Tránh chỉ dựa vào màu sắc để truyền tải thông tin (ví dụ: màu đỏ khi có lỗi), đồng thời sử dụng văn bản hoặc biểu tượng
3) Kiểm tra từ góc độ của người dùng mù màu, đảm bảo sự khác biệt về màu sắc không chỉ phụ thuộc vào sự khác biệt về màu sắc
4) Cung cấp đủ độ tương phản màu sắc để đảm bảo nhận dạng rõ ràng ngay cả trong môi trường sáng
5) Xem xét hiệu suất màu sắc ở chế độ tối, đảm bảo độ tương phản tốt giữa các chủ đề khác nhau

Công cụ này có miễn phí không?

Có, công cụ màu ColorLab là công cụ trực tuyến hoàn toàn miễn phí. Không cần đăng ký hoặc đăng nhập. Chúng tôi cam kết cung cấp các công cụ màu chất lượng cao cho các nhà thiết kế và nhà phát triển, giúp bạn tạo ra các phối màu đẹp và dễ tiếp cận. Tất cả quá trình xử lý diễn ra cục bộ trong trình duyệt của bạn - dữ liệu màu của bạn không được tải lên bất kỳ máy chủ nào.