Chọn Màu & Chuyển Đổi Mã Màu

Công cụ chọn màu là gì?

Công cụ chọn màu (Color Picker) là ứng dụng trực quan cho phép bạn chọn bất kỳ màu sắc nào từ một giao diện đồ họa, sau đó tự động cung cấp mã màu tương ứng trong nhiều định dạng khác nhau. Thay vì phải nhớ các giá trị số phức tạp, bạn chỉ cần kéo con trỏ trên bảng màu hoặc thanh Hue, công cụ sẽ tính toán mã HEX, RGB, HSL, CMYK và HSB cho bạn ngay lập tức.

Đây là công cụ không thể thiếu cho các nhà phát triển web, nhà thiết kế đồ họa, nhà thiết kế UI/UX và bất kỳ ai làm việc với màu sắc kỹ thuật số. Công cụ của ZestLab chạy hoàn toàn trên trình duyệt — không cần cài đặt phần mềm, không gửi dữ liệu lên server, và hoàn toàn miễn phí.

Ngoài việc chọn màu đơn lẻ, công cụ còn tự động tạo bảng màu hài hòa (complementary, analogous, triadic, split-complementary) và kiểm tra tương phản WCAG — giúp bạn đảm bảo thiết kế vừa đẹp mắt vừa đáp ứng tiêu chuẩn trợ năng.

Hiểu về các mô hình màu (RGB, HSL, CMYK)

Mỗi mô hình màu biểu diễn màu sắc theo một cách khác nhau, phục vụ các mục đích sử dụng riêng biệt:

RGB (Red, Green, Blue)

RGB là mô hình màu cộng (additive) — kết hợp ánh sáng đỏ, xanh lá và xanh dương để tạo màu. Mỗi kênh có giá trị từ 0 đến 255. rgb(255, 0, 0) là đỏ thuần túy, rgb(0, 0, 0) là đen, rgb(255, 255, 255) là trắng. Đây là mô hình cơ bản nhất trong hiển thị kỹ thuật số — mọi màn hình, từ điện thoại đến TV, đều sử dụng pixel RGB. CSS hỗ trợ trực tiếp qua hàm rgb().

HSL (Hue, Saturation, Lightness)

HSL biểu diễn màu theo cách trực quan hơn cho con người: Hue (sắc thái, 0-360 độ trên vòng tròn màu), Saturation (độ bão hòa, 0-100%), và Lightness (độ sáng, 0-100%). hsl(0, 100%, 50%) là đỏ, hsl(120, 100%, 50%) là xanh lá. HSL rất hữu ích khi bạn cần tạo các biến thể của cùng một màu — chỉ cần thay đổi Saturation hoặc Lightness mà không ảnh hưởng đến sắc thái. CSS cũng hỗ trợ trực tiếp qua hsl().

CMYK (Cyan, Magenta, Yellow, Key/Black)

CMYK là mô hình màu trừ (subtractive) — dùng trong in ấn. Mực cyan, magenta, yellow và black được trộn trên giấy trắng. Giá trị mỗi kênh từ 0% đến 100%. Khi thiết kế cho in ấn (danh thiếp, brochure, poster), bạn PHẢI chuyển đổi màu sang CMYK vì gamut màu in ấn nhỏ hơn đáng kể so với RGB trên màn hình — một số màu RGB rực rỡ không thể tái tạo được trên giấy.

HSB/HSV (Hue, Saturation, Brightness/Value)

HSB tương tự HSL nhưng thay Lightness bằng Brightness — cách biểu diễn gần với nhận thức thị giác của con người hơn. Adobe Photoshop và nhiều phần mềm thiết kế sử dụng HSB làm mô hình chính. Trong HSB, Brightness 100% luôn là màu sáng nhất có thể ở sắc thái đó, còn trong HSL, Lightness 100% luôn là trắng bất kể sắc thái.

Hài hòa màu sắc và lý thuyết màu

Lý thuyết màu là nền tảng của thiết kế thị giác hiệu quả. Vòng tròn màu (color wheel) do Isaac Newton phát minh là công cụ cơ bản giúp hiểu mối quan hệ giữa các màu:

• Màu bổ sung (Complementary): Hai màu đối diện trên vòng tròn (ví dụ đỏ-xanh lá). Tạo tương phản mạnh, thu hút sự chú ý. Dùng cho CTA button, highlight, badge.
• Màu tương đồng (Analogous): 3-5 màu liền kề trên vòng tròn. Tạo cảm giác hài hòa, dễ chịu. Dùng cho gradient, background, brand palette nhất quán.
• Bộ ba (Triadic): Ba màu cách đều 120 độ. Cân bằng giữa tương phản và hài hòa. Phổ biến trong infographic và data visualization.
• Bổ sung tách (Split-Complementary): Một màu cộng hai màu liền kề với màu bổ sung. Dễ dùng hơn bổ sung thuần túy, vẫn giữ sự sống động.

Khi thiết kế, hãy chọn một màu chủ đạo (primary) rồi dùng lý thuyết hài hòa để tìm màu phụ (secondary) và màu nhấn (accent). Quy tắc 60-30-10 là kim chỉ nam: 60% màu chủ đạo, 30% màu phụ, 10% màu nhấn.

Màu sắc trong phát triển web

Trong CSS hiện đại, bạn có nhiều cách khai báo màu: HEX (#e879f9), RGB (rgb(232, 121, 249)), HSL (hsl(292, 91%, 73%)), và mới nhất là oklch() — không gian màu tri giác đồng đều, cho phép tạo gradient mượt mà hơn. CSS Custom Properties (biến CSS) giúp quản lý hệ thống màu dễ dàng:

• CSS Variables: Khai báo --color-primary: #e879f9 trong :root, dùng var(--color-primary) ở mọi nơi. Thay đổi một chỗ, cập nhật toàn bộ trang.
• Tailwind CSS: Sử dụng bảng màu có sẵn (slate, gray, zinc, neutral, stone, red, orange...) với 11 cấp độ sáng tối (50-950). Hoặc tùy chỉnh trong tailwind.config.
• Dark mode: Dùng prefers-color-scheme: dark hoặc class .dark để đổi biến CSS. Màu sáng chuyển thành tối, nhưng không nên chỉ đảo ngược — cần thiết kế bảng màu dark mode riêng.
• Opacity/Alpha: CSS 4 hỗ trợ rgb(232 121 249 / 0.5) — thêm transparency trực tiếp, không cần rgba() riêng.

Để tối ưu hiệu suất, hạn chế dùng nhiều gradient phức tạp trên mobile — chúng tốn GPU. Thay vào đó, dùng solid color hoặc gradient đơn giản với 2-3 stop.

Trợ năng và tương phản màu

WCAG (Web Content Accessibility Guidelines) yêu cầu tỷ lệ tương phản tối thiểu giữa văn bản và nền để đảm bảo mọi người đều đọc được, bao gồm người khiếm thị hoặc daltonism:

• WCAG AA: Tỷ lệ tương phản ít nhất 4.5:1 cho văn bản thường, 3:1 cho văn bản lớn (14pt bold hoặc 18pt regular trở lên).
• WCAG AAA: Tỷ lệ tương phản ít nhất 7:1 cho văn bản thường, 4.5:1 cho văn bản lớn. Tiêu chuẩn cao nhất, khuyến khích cho nội dung quan trọng.
• Daltonism: Khoảng 8% nam giới và 0.5% nữ giới bị mù màu. Không bao giờ dùng màu là cách duy nhất để truyền tải thông tin — luôn kết hợp với text, icon, hoặc pattern.
• Kiểm tra: Công cụ của ZestLab kiểm tra tương phản ngay trên giao diện. Ngoài ra, dùng Chrome DevTools → Rendering → Emulate vision deficiencies để mô phỏng các loại mù màu.

Một thiết kế đẹp phải là thiết kế mọi người đều truy cập được. Tương phản tốt không chỉ giúp người khuyết tật — nó cải thiện trải nghiệm cho mọi người, đặc biệt khi đọc trên điện thoại ngoài trời nắng hoặc trên màn hình cũ hiệu chuẩn kém. Xem thêm Kiểm tra tương phản màu.