Color Picker & Converter

Color Picker & Converter

Chọn trực quan hoặc dán bất kỳ giá trị nào — HEX, RGB, HSL, OKLCH và OKLAB luôn đồng bộ. Bao gồm trình kiểm tra độ tương phản WCAG 2.2 và trình tạo bảng màu dựa trên OKLCH. Chạy hoàn toàn trong trình duyệt của bạn.

Color Picker & Converter — TL;DR

Chọn trực quan hoặc dán bất kỳ giá trị nào — HEX, RGB, HSL, OKLCH và OKLAB luôn đồng bộ. Bao gồm trình kiểm tra độ tương phản WCAG 2.2 và trình tạo bảng màu dựa trên OKLCH. Chạy hoàn toàn trong trình duyệt của bạn.

Dán giá trị hex của bạn (ví dụ #ff5722) vào ô HEX — hàng RGB sẽ cập nhật ngay. Tương tự, dán rgb(255 87 34) vào ô RGB và HEX, HSL, OKLCH cùng OKLAB sẽ đồng bộ. Việc chuyển đổi diễn ra hai chiều giữa mọi định dạng được hỗ trợ.

OKLCH là một không gian màu thuộc CSS Color Module Level 4 sử dụng độ sáng theo cảm nhận (L), độ bão hòa (C) và tông màu (h) — giống HSL, nhưng đồng nhất theo cảm nhận. Hai màu OKLCH có cùng giá trị L sẽ trông sáng tương đương nhau, ngay cả ở các tông khác nhau. Điều đó làm cho design token, bảng màu được tạo và dải màu dễ tiếp cận trở nên dễ đoán hơn nhiều so với HSL. Tất cả trình duyệt evergreen (Chrome 111+, Safari 15.4+, Firefox 113+) đều hỗ trợ.

Giá trị màu không bao giờ rời khỏi thiết bị của bạn. Mở DevTools → Network và bạn sẽ thấy không có request đi ra nào trong lúc chuyển đổi, chọn, tạo bảng màu hay kiểm tra tương phản.

HEX
RGB
HSL
OKLCH
OKLAB
Tên màu

Bảng màu

Độ tương phản WCAG 2.2

Văn bản
Nền
—
Xem trước
Mẫu tiêu đề lớn
Mẫu văn bản thân — con cáo nâu nhanh nhẹn nhảy qua con chó lười.

Thiết kế cho quy trình làm việc thực tế

Từ design system đến kiểm tra khả năng truy cập — mọi định dạng và kiểm tra bạn cần, gói gọn trong một nơi.

Sáu không gian màu

Chuyển đổi qua lại giữa HEX (3 / 4 / 6 / 8 chữ số), RGB(A), HSL(A), OKLCH, OKLAB và tên màu CSS. Chuỗi đầu ra khớp với cú pháp CSS Color Module Level 4 — dán thẳng vào stylesheet của bạn.

Trình kiểm tra độ tương phản WCAG 2.2

Xem tỷ lệ tương phản giữa hai màu bất kỳ kèm huy hiệu pass/fail một chạm cho AA (4.5 : 1) và AAA (7 : 1), ở cả cỡ chữ thường và lớn. Phép tính khớp với tham chiếu W3C: tuyến tính hóa sRGB, độ chói tương đối, sau đó (L1+0.05)/(L2+0.05).

EyeDropper — lấy mẫu bất kỳ pixel nào

Nhấn vào eyedropper để lấy mẫu bất kỳ màu nào trên màn hình — thiết kế, ảnh chụp màn hình, ảnh chụp, thậm chí các tab trình duyệt khác. Sử dụng EyeDropper API gốc trên các trình duyệt Chromium.

Bảng màu dựa trên OKLCH

Tạo 9 bước sắc nhạt và sắc đậm cùng phối màu bổ túc, bộ ba và tương đồng — được tính trong OKLCH để mỗi bước cách đều nhau về mặt thị giác (khác HSL, nơi độ sáng biến thiên thất thường).

Riêng tư theo thiết kế

Mọi phép chuyển đổi đều chạy bằng JavaScript trên thiết bị của bạn. Không có gì được tải lên, ghi log hay gửi đến bên thứ ba — mở DevTools → Network nếu bạn muốn tự xác minh.

Xây dựng để tốc độ

JavaScript thuần túy, không có runtime framework. Tải nguội dưới 50 KB sau khi gzip; phép chuyển đổi và tạo bảng màu hoàn tất trong dưới một mili giây trên một laptop năm năm tuổi.

Cách sử dụng bộ chọn màu

Bốn cách để bắt đầu, mọi định dạng đều đồng bộ.

  1. 1

    Chọn trực quan

    Kéo bên trong ô vuông độ bão hòa/độ sáng để chọn sắc thái, trượt thanh tông màu bên dưới để đổi màu nền, và dùng thanh alpha cho độ trong suốt. Mọi định dạng ở bên phải sẽ cập nhật tức thì.

  2. 2

    Dán bất kỳ giá trị nào

    Dán một giá trị HEX (#4f46e5), RGB (rgb(79 70 229)), HSL (hsl(244 76% 59%)), OKLCH (oklch(53% 0.22 277)) hoặc thậm chí một tên màu CSS (tomato) vào ô tương ứng — bộ chọn và các định dạng khác sẽ đồng bộ theo.

  3. 3

    Lấy mẫu với eyedropper

    Nhấn nút eyedropper để chụp bất kỳ pixel nào trên màn hình — một tab khác, một ảnh chụp màn hình, một bức ảnh, một biểu tượng. Sử dụng EyeDropper API gốc trên Chrome, Edge và Opera.

  4. 4

    Sao chép hoặc kiểm tra tương phản

    Nhấn biểu tượng sao chép cạnh bất kỳ định dạng nào để đưa vào bộ nhớ tạm. Hoặc cuộn xuống mục độ tương phản WCAG 2.2 để kiểm tra xem cặp màu chữ / nền của bạn có đạt AA hay AAA ở cỡ chữ thường và lớn không.

Dành cho nhà thiết kế, lập trình viên và người kiểm tra khả năng truy cập

Một công cụ màu phù hợp với bốn quy trình làm việc phổ biến.

Tạo token cho design system

Chuyển giá trị HEX của thương hiệu sang OKLCH để mỗi sắc thái trong dải token có cùng bước độ sáng theo cảm nhận. Dán đầu ra OKLCH thẳng vào CSS — không cần preprocessor.

Kiểm tra khả năng truy cập WCAG

Đưa vào các cặp màu chữ / nền và đọc tỷ lệ tương phản cùng huy hiệu AA / AAA. Phát hiện các kết hợp không đạt trước khi triển khai — đáp ứng ngưỡng do W3C quy định 4.5 : 1 thường / 7 : 1 nâng cao.

Chuyển đổi CSS front-end

Có HEX từ mockup của designer nhưng cần HSL cho cấu hình Tailwind hoặc OKLCH cho stylesheet hiện đại? Dán một lần, sao chép ở mọi định dạng. Chuỗi đầu ra là cú pháp CSS Color Module Level 4 hợp lệ.

Khám phá bảng màu

Chọn một màu nền và xem ngay chín sắc nhạt và sắc đậm cách đều theo cảm nhận cùng phối màu bổ túc, bộ ba và tương đồng — được tạo trong OKLCH nên mỗi bước trông sáng đều nhau.

100% riêng tư — chạy trong trình duyệt của bạn

Giá trị màu không bao giờ rời khỏi thiết bị của bạn. Mở DevTools → Network và bạn sẽ thấy không có request đi ra nào trong lúc chuyển đổi, chọn, tạo bảng màu hay kiểm tra tương phản.

  • Mọi phép chuyển đổi (HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB) đều chạy bằng JavaScript trên máy của bạn — các công thức đều hiển thị trong mã nguồn trang.
  • EyeDropper API chỉ trả về các màu mà bạn nhấp một cách rõ ràng; trình duyệt xử lý quyền truy cập và không bao giờ để trang xem các pixel tùy ý.
  • Không đăng nhập, không telemetry trên giá trị màu, không API màu của bên thứ ba. Trang web tuân thủ GDPR ngay từ đầu.

Hướng dẫn liên quan

Các hướng dẫn được tuyển chọn cho nhà thiết kế, lập trình viên và đội ngũ khả năng truy cập.

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

Làm thế nào để chuyển HEX sang RGB?

Dán giá trị hex của bạn (ví dụ #ff5722) vào ô HEX — hàng RGB sẽ cập nhật ngay. Tương tự, dán rgb(255 87 34) vào ô RGB và HEX, HSL, OKLCH cùng OKLAB sẽ đồng bộ. Việc chuyển đổi diễn ra hai chiều giữa mọi định dạng được hỗ trợ.

OKLCH là gì và vì sao nên sử dụng?

OKLCH là một không gian màu thuộc CSS Color Module Level 4 sử dụng độ sáng theo cảm nhận (L), độ bão hòa (C) và tông màu (h) — giống HSL, nhưng đồng nhất theo cảm nhận. Hai màu OKLCH có cùng giá trị L sẽ trông sáng tương đương nhau, ngay cả ở các tông khác nhau. Điều đó làm cho design token, bảng màu được tạo và dải màu dễ tiếp cận trở nên dễ đoán hơn nhiều so với HSL. Tất cả trình duyệt evergreen (Chrome 111+, Safari 15.4+, Firefox 113+) đều hỗ trợ.

Kết quả tương phản WCAG có đáng tin cậy không?

Có. Chúng tôi sử dụng thuật toán từ WCAG 2.2 §1.4.3: tuyến tính hóa từng kênh sRGB, tính độ chói tương đối (0.2126·R + 0.7152·G + 0.0722·B), sau đó (L_lighter + 0.05) / (L_darker + 0.05). AA đạt ở 4.5 : 1 cho văn bản thường và 3 : 1 cho văn bản lớn (18 pt+ hoặc 14 pt+ in đậm). AAA đạt ở 7 : 1 và 4.5 : 1 tương ứng.

Tôi có thể lấy mẫu màu từ ảnh hoặc ứng dụng khác không?

Có — nhấn nút Eyedropper để khởi chạy EyeDropper API tích hợp sẵn của trình duyệt. Bạn có thể lấy mẫu bất kỳ pixel nào trên màn hình: tab trình duyệt khác, một thiết kế Figma, một khung hình video, thậm chí một ảnh chụp màn hình. Hiện được hỗ trợ trên Chrome, Edge và Opera; Firefox và Safari sẽ chuyển trạng thái thân thiện (nút sẽ bị vô hiệu hóa).

Có gì được gửi đến máy chủ của bạn không?

Không. Bộ chọn, mọi phép chuyển đổi, trình tạo bảng màu và trình kiểm tra tương phản đều chạy trong trình duyệt của bạn. Không có giá trị màu, mẫu ảnh hay văn bản nào được truyền đi. Bạn có thể mở DevTools → Network và xác minh không có request đi ra trong khi sử dụng.