Nó cho tôi những mã màu nào?

HEX, RGB, HSL, HSV, CMYK và OKLCH cho cùng một màu, sẵn sàng để sao chép.

Tôi có thể chọn màu từ màn hình không?

Có, với Chọn từ màn hình trên các trình duyệt nền Chromium như Chrome và Edge. Nút này bị ẩn khi trình duyệt của bạn không hỗ trợ.

Nó có kiểm tra chữ có dễ đọc trên màu đó không?

Có. Nó hiển thị tỉ lệ tương phản WCAG so với màu trắng và đen và đánh dấu là AA lớn, AA, AAA hoặc Không đạt. Nó cũng gợi ý các màu bổ sung, tam giác, tương đồng và đơn sắc.

Có thật sự miễn phí không?

Có. Mọi công cụ đều miễn phí sử dụng, không cần tài khoản hay thẻ tín dụng. Công việc được thực hiện trên thiết bị của bạn thay vì máy chủ của chúng tôi, đó là điều giúp công cụ luôn miễn phí.

Có hoạt động trên di động không?

Có. Công cụ chạy trên các trình duyệt di động hiện nay của iOS và Android, không cần cài đặt gì.

🎨

Chọn màu và tạo bảng màu miễn phí

Chọn màu, chuyển đổi HEX/RGB/HSL và tạo bảng màu hài hòa.

Chạy trên trình duyệtKhông đăng ký, không pop-upKhông cần đăng nhậpMiễn phí mãi mãi

Hoạt động ngoại tuyến sau khi tải

Bộ chọn màu

HEX

HSV

h217°

s76%

v96%

chỉ hiển thị

RGB

HSL

Nhiều định dạng hơn

Alpha100%

HEX8#3b82f6ff

RGBrgb(59 130 246)

HWBhwb(217 23% 4%)

CMYKcmyk(76%, 47%, 0%, 4%)

OKLCHoklch(62.3% 0.188 259.8)

SwiftUIColor(red: 0.231, green: 0.510, blue: 0.965, alpha: 1)

Android0xFF3B82F6

FlutterColor(0xFF3B82F6)

Độ tương phản WCAG

Tên màu gần nhất: dodgerblue · Chữ đen dễ đọc hơn ở đây (5,71:1)

Văn bản trên trắng3,68:1AA lớn

Văn bản trên đen5,71:1AA

Chữ trên #ffffff3,68:1AA lớn

So sánh với màu khác

Sắc độ & tông màu (50–950)

Tên

Bảng màu

Bổ sung

#3b82f6

#f6af3c

Ba sắc

#3b82f6

#f63c83

#83f63c

Tương tự

#3ce0f6

#3b82f6

#523cf6

Đơn sắc

#073c92

#0a5adb

#3b82f6

#85b2f9

#cee0fd

Công dụng phổ biến

Bộ Chọn Màu cho Thiết Kế WebChọn và tạo màu cho trang web của bạn — nhận các giá trị HEX, RGB và HSL cũng như các bảng màu hài hòa.
Bộ Chọn Màu cho Thương HiệuXây dựng bảng màu thương hiệu của bạn — chọn các màu chính, phụ và nhấn mạnh hoạt động cùng nhau.
Bộ Chọn Màu cho Mạng Xã HộiTạo bảng màu quyến rũ cho bài viết mạng xã hội, câu chuyện và thiết kế hồ sơ.
Bộ Chọn Màu cho Thiết Kế In ẤnChọn màu cho tài liệu in — tờ rơi, danh thiếp, brochure — với bản xem trước màu chính xác.
Bộ Chọn Màu cho Bài Thuyết TrìnhThiết kế lược đồ màu slide — chọn màu văn bản dễ đọc, bảng màu biểu đồ và sắc thái nhấn mạnh nhất quán.

Cách hoạt động

Mọi thứ chạy trực tiếp trong trình duyệt bằng phép tính chuyển đổi tự viết — không thư viện màu, không gọi máy chủ. Bạn chọn màu qua ô nhập màu gốc của trình duyệt hoặc EyeDropper API, và công cụ chuyển ngay sang sáu định dạng đồng thời tính tỷ lệ tương phản WCAG và tạo bảng màu phối hợp.

1
Nhập màu qua API gốc
Bạn chọn màu qua tiện ích <input type="color"> tích hợp của trình duyệt, hoặc — trên trình duyệt nền Chromium — EyeDropper API cho phép lấy mẫu bất kỳ điểm ảnh nào trên màn hình. Cả hai cách đều trả về chuỗi hex làm nguồn dữ liệu duy nhất.
2
Chuyển đổi định dạng tự viết
Công cụ chuyển giá trị hex sang RGB, HSL, HSV, CMYK và OKLCH bằng các hàm toán học riêng (không thư viện bên ngoài). Chuyển đổi OKLCH tuyến tính hóa các kênh sRGB, áp dụng ma trận căn bậc ba OKLab, rồi suy ra chroma và góc sắc độ — khớp với đầu ra CSS Color Level 4 hiện đại.
3
Tính tỷ lệ tương phản WCAG
Độ chói tương đối được tính từ các kênh RGB tuyến tính hóa theo công thức WCAG 2.x. Công cụ sau đó tính tỷ lệ tương phản so với trắng tuyệt đối và đen tuyệt đối và gắn nhãn AA-lớn, AA, AAA hoặc Không đạt theo các ngưỡng WCAG (3:1, 4.5:1, 7:1).
4
Tạo bảng màu phối hợp và lưu cục bộ
Các ô màu bổ sung, bộ ba, tương đồng và đơn sắc được suy ra bằng cách xoay hoặc bước giá trị sắc độ và độ sáng HSL theo toán học. Bảng màu đã lưu được ghi vào localStorage trong trình duyệt — không có gì rời khỏi thiết bị.

Công cụ liên quan

🎨

Trình tạo màu ngẫu nhiên

Tạo màu ngẫu nhiên từng màu một hoặc thành bảng năm màu, khóa những màu bạn thích, sao chép giá trị HEX, RGB hoặc HSL và xuất bảng màu dưới dạng PNG hoặc CSS.

Thử ngay

🎨