Bộ chọn màu miễn phí

Bộ chọn màu trực tuyến: hướng dẫn toàn diện

Bộ chọn màu Volade là công cụ web tất cả trong một kết hợp ống nhỏ giọt màn hình, trình chỉnh sửa màu nâng cao, trình tạo bảng màu, trình tạo gradient, trình kiểm tra khả năng tiếp cận WCAG, mô phỏng mù màu, trộn màu và xuất cho nhà phát triển — tất cả trong một giao diện duy nhất, 100% cục bộ, không cần đăng ký.

Không giống các trình chỉnh sửa truyền thống chỉ giới hạn ở HEX/RGB/HSL, Volade hỗ trợ 16 không gian màu bao gồm LAB, LCH, OKLCH, OKLAB, CMYK, Display P3, XYZ và HWB. Mỗi định dạng được hiển thị theo thời gian thực với nút sao chép tức thì, biến nó thành công cụ toàn diện nhất cho các nhà thiết kế, lập trình viên và nhà in ấn.

Ống nhỏ giọt màn hình: độ chính xác pixel hoàn hảo

Ống nhỏ giọt màn hình sử dụng API EyeDropper của các trình duyệt hiện đại để bắt bất kỳ màu nào hiển thị trên màn hình của bạn. Nhấp bất cứ đâu — trên hình ảnh, trang web, tài liệu — và màu được bắt ngay lập tức. Kính phóng đại độ phân giải cao cho phép bạn nhắm đúng pixel, và điều khiển bằng bàn phím (phím mũi tên) mang lại độ chính xác tuyệt đối. Lấy mẫu vùng (1×1, 3×3, 5×5, 11×11) làm mịn các dấu nén JPEG và lấy màu trung bình của một vùng.

Màu được chọn xuất hiện trong lịch sử màu gần đây, và chuyển sang màu trước đó là tức thì. Đối với người dùng nâng cao, chế độ chính xác hiển thị tọa độ pixel chính xác và giá trị từng kênh theo thời gian thực.

Trình chỉnh sửa màu không thỏa hiệp

Trình chỉnh sửa hiển thị đồng thời 16 định dạng màu: HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV/HSB, HWB, CMYK, LAB, LCH, OKLAB, OKLCH, Display P3, XYZ và Linear RGB. Mỗi giá trị có thể chỉnh sửa trực tiếp: thay đổi HSL, và tất cả định dạng khác cập nhật theo thời gian thực. Vòng màu cung cấp kiểm soát hình ảnh trực quan, trong khi thanh trượt số cho phép điều chỉnh chính xác.

Alpha/độ trong suốt được xử lý gốc: điều chỉnh độ trong suốt từ 0 đến 100% với thanh trượt chuyên dụng, và thấy ngay lập tức tác động lên tất cả định dạng. Lịch sử sửa đổi ghi lại mỗi thay đổi, với_undo/redo để quay lại bất cứ lúc nào.

Smart Color Intelligence: vượt xa sự lựa chọn đơn thuần

Từ một màu duy nhất, công cụ tự động tạo tất cả hòa phối cổ điển: bổ túc, tương tự, tam sắc, tứ sắc, bổ túc tách và đơn sắc. Nhưng nó đi xa hơn: shades (tối hơn), tints (sáng hơn), tones (mờ hơn), warm (ấm) và cool (lạnh) được tạo tự động.

Chế độ Tạo Bảng màu biến bất kỳ màu nào thành hệ thống thiết kế hoàn chỉnh: primary, secondary, accent, background, surface, text, muted, border, success, warning, error, info — mỗi màu với giá trị RGB, OKLCH và HEX.

Hình ảnh → Bảng màu: trích xuất màu từ ảnh

Thả bất kỳ hình ảnh nào (ảnh, minh họa, ảnh chụp màn hình) và công cụ phân tích pixel để trích xuất bảng màu. Năm chế độ trích xuất có sẵn: Chủ đạo (màu phổ biến nhất), Sống động (màu bão hòa nhất), Mờ (màu đã giảm bão hòa), Cân bằng (màu hài hòa về thị giác) và Thương hiệu (màu phù hợp với nhận diện thương hiệu).

Trích xuất trả về từ 5 đến 15 màu, mỗi màu được gắn nhãn với vai trò tiềm năng (chủ đạo, accent, tối, sáng). Đây là công cụ tăng tốc lớn cho các nhà thiết kế cần trích xuất hệ thống thiết kế từ ảnh có sẵn.

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

Phần khả năng tiếp cận so sánh hai màu (màu trước so với màu nền) và hiển thị tỷ lệ tương phản chính xác với các huy hiệu WCAG AA và AAA cho văn bản bình thường, văn bản lớn và thành phần UI. Nếu tỷ lệ không đủ, nút Tự động sửa đề xuất tự động màu gần nhất tuân thủ các tiêu chuẩn.

Đây là công cụ không thể thiếu cho các lập trình viên phải tuân thủ các tiêu chuẩn khả năng tiếp cận bắt buộc (RGAA, EN 301 549, ADA, Section 508).

Mô phỏng mù màu: thiết kế cho tất cả mọi người

Khoảng 350 triệu người trên thế giới bị mù màu. Mô phỏng hiển thị màu sắc của bạn như được nhận thức bởi tất cả tám loại mù màu: Protanopia, Deuteranopia, Tritanopia, Achromatopsia và các biến thể mức độ vừa phải của chúng. Đó là cách duy nhất để xác minh giao diện của bạn thực sự tiếp cận được.

Trình tạo gradient với nội suy nâng cao

Tạo gradient tuyến tính, tia và hình nón với tối đa 10 điểm màu. Nội suy RGB tạo ra gradient cổ điển; HSL cung cấp chuyển tiếp mượt hơn; LAB và OKLCH tạo gradient đồng nhất theo nhận thức không có dải hay vết nứt visible. Mã CSS được tạo tự động và có thể sao chép chỉ bằng một cú nhấp.

Trộn màu: trộn hai màu

Trộn hai màu với tỷ lệ có thể cấu hình (từ 0/100 đến 100/0) trong bốn chế độ: RGB (trộn cộng), HSL (xoay sắc thái), LAB (không gian nhận thức) và OKLCH (tự nhiên nhất). Đây là công cụ lý tưởng để tạo các màu trung gian, bóng đổ và sắc thái tùy chỉnh.

ΔE Chênh lệch màu: độ chính xác chuyên nghiệp

Đối với các nhà thiết kế và chuyên gia in ấn, tính toán chênh lệch màu (Delta E) là rất quan trọng. Công cụ hiển thị ΔE76, ΔE94 và ΔE2000 với diễn giải văn bản: không thể nhận biết (ΔE < 1), nhận biết với nỗ lực (1-2), khác biệt (2-10), rất khác biệt (10-50) và tương phản cao (50+).

Color Playground: kiểm tra trong điều kiện thực tế

Playground hiển thị màu của bạn trên các thành phần giao diện thực tế: nút, thẻ, badge, input, alert, liên kết và văn bản. Bạn thấy ngay lập tức liệu màu của bạn có hoạt động tốt làm màu nền, màu nút hay màu văn bản — với điểm khả năng tiếp cận theo thời gian thực.

Xuất cho nhà phát triển: 10 định dạng mã

Tạo mã trong ngôn ngữ của bạn: CSS Variables, SCSS, Tailwind config, JSON design tokens, TypeScript, Swift (UIColor), Kotlin (Color), Flutter/Dart, React Native (StyleSheet) và Vue. Mỗi lần xuất bao gồm biến thể (50-950) và vai trò (primary, secondary, accent, v.v.).

Ai có thể hưởng lợi?

Nhà thiết kế UI/UX tạo bảng màu và hệ thống thiết kế; lập trình viên front-end tích hợp màu vào CSS, Tailwind hoặc SCSS; nhà thiết kế đồ họa trích xuất bảng màu từ ảnh; nhóm khả năng tiếp cận kiểm tra tương phản WCAG; chuyên gia in ấn tính ΔE; và bất kỳ nhà sáng tạo nào muốn khám phá màu sắc một cách chuyên nghiệp.