Bộ chọn màu

Bộ chọn màu là công cụ miễn phí giúp bạn chọn màu ngay trong trình duyệt và lấy giá trị màu theo định dạng cần dùng.

Bộ chọn màu trả về kết quả gì?

Bộ chọn màu trả về giá trị số đại diện cho màu bạn chọn trên bánh xe màu. Cùng một màu hiển thị có thể được biểu diễn bằng nhiều định dạng, phổ biến nhất là hệ thập lục phân, RGB, RGBA, HSL hoặc HSLA.

Mỗi định dạng mô tả màu theo một cách khác nhau. Hệ thập lục phân và RGB xác định giá trị của các kênh đỏ, xanh lá và xanh dương. HSL sử dụng sắc độ, độ bão hòa và độ sáng, nhờ đó bạn có thể điều chỉnh màu theo quy luật dễ hơn. Các định dạng có kênh alpha còn mô tả độ trong suốt.

• Giá trị hệ thập lục phân gồm dấu thăng và các chữ số thập lục phân, chẳng hạn như #336699.
• Giá trị RGB thường biểu diễn từng kênh bằng một số từ 0 đến 255, chẳng hạn như rgb(51, 102, 153).
• Giá trị HSL mô tả góc sắc độ cùng các giá trị phần trăm cho độ bão hòa và độ sáng, chẳng hạn như hsl(210, 50%, 40%).
• RGBA và HSLA bổ sung độ trong suốt. Giá trị alpha bằng 0 là trong suốt hoàn toàn, còn 1 là đục hoàn toàn.

CSS cũng hỗ trợ tên màu, nhưng chỉ có một tập hợp tên cố định và cách này ít phù hợp hơn với các token màu cần độ chính xác cao. Giá trị số do công cụ tạo thường dễ chuyển giữa hệ thống thiết kế, biểu định kiểu và mã ứng dụng hơn.

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

Chọn trường Color, chọn điểm mong muốn trên bánh xe màu, sau đó dùng giá trị nhận được theo định dạng mà ứng dụng của bạn yêu cầu. Toàn bộ quá trình diễn ra trong trình duyệt và dữ liệu màu không bao giờ được tải lên máy chủ.

Nếu đang làm việc với một giao diện có sẵn, hãy bắt đầu bằng định dạng đang được dùng trong cơ sở mã. Cách này tránh các bước chuyển đổi màu không cần thiết và giúp việc xem xét pull request dễ dàng hơn. Khi kiểm tra dữ liệu của bên thứ ba, hãy xác định xem giá trị có chứa độ trong suốt hay không trước khi thay thế bằng một màu có vẻ tương đương.

Một quy trình thực tế trước khi triển khai là chọn hoặc tái tạo màu mong muốn, sao chép ký hiệu phù hợp rồi kiểm tra trong đúng trạng thái của thành phần. Hãy kiểm tra riêng các trạng thái bình thường, di chuột, lấy nét và vô hiệu hóa, vì độ trong suốt và kiểu kế thừa có thể làm thay đổi kết quả hiển thị cuối cùng.

Cách đọc kết quả

Hãy đọc kết quả theo mô hình màu tương ứng và kiểm tra thành phần alpha, nếu có, trước khi sao chép vào mã. Trong RGB, giá trị của từng kênh điều khiển cường độ của thành phần đỏ, xanh lá hoặc xanh dương tương ứng. Trong HSL, sắc độ chạy quanh bánh xe màu, độ bão hòa kiểm soát cường độ màu, còn độ sáng kiểm soát sự cân bằng giữa đen và trắng.

Cú pháp màu phải chính xác khi được dùng trong CSS hoặc dữ liệu có cấu trúc. Khi chỉnh sửa thủ công, các lỗi thường gặp gồm:

• bỏ dấu thăng ở đầu giá trị CSS hệ thập lục phân;
• dùng năm hoặc bảy chữ số thập lục phân, vốn không phải độ dài hex tiêu chuẩn hợp lệ;
• dùng giá trị phần trăm trong trường hợp cách triển khai RGB yêu cầu số cho từng kênh;
• quên dấu phẩy trong cú pháp RGB cũ hoặc trộn lẫn cú pháp cũ và hiện đại không tương thích;
• sao chép giá trị có alpha vào phần mềm chỉ chấp nhận mã hex sáu chữ số;
• dùng dấu phẩy thập phân, chẳng hạn như 0,5, trong khi CSS yêu cầu dấu chấm thập phân, chẳng hạn như 0.5.

Bộ chọn màu tạo ra các giá trị màu chứ không phải công cụ kiểm tra CSS tổng quát. Công cụ không thể xác nhận rằng khai báo bao quanh, tài liệu JSON hoặc tệp giao diện là hợp lệ. Vì vậy, các lỗi cú pháp nằm ngoài giá trị màu vẫn cần được kiểm tra bằng trình phân tích cú pháp hoặc công cụ phát triển phù hợp.

Ví dụ chuyển đổi màu

Trong một màu hệ thập lục phân sáu chữ số, mỗi cặp chữ số tương ứng với kênh đỏ, xanh lá và xanh dương. Ví dụ, các cách biểu diễn sau mô tả cùng một màu đục.

Giá trị hex #336699

Giá trị RGB tương đương rgb(51, 102, 153)

Giá trị HSL tương đương hsl(210, 50%, 40%)

Mã hex ba chữ số là dạng viết tắt. Mỗi chữ số được lặp lại để tạo thành giá trị sáu chữ số.

Giá trị hex rút gọn #fff

Mã hex đầy đủ #ffffff

Giá trị RGB tương đương rgb(255, 255, 255)

Mã hex tám chữ số chứa alpha sau các cặp biểu diễn màu đỏ, xanh lá và xanh dương. Hãy thận trọng với những hệ thống dùng thứ tự kênh khác hoặc không chấp nhận ký hiệu tám chữ số. Một màu đặc trông giống hệt nhau cũng có thể cho kết quả khác khi áp dụng độ trong suốt trên một nền khác.

Nên chọn định dạng màu nào?

Hãy chọn ký hiệu màu mà nơi nhận đang yêu cầu, trừ khi có lý do rõ ràng để thay đổi. Mã hex sáu chữ số ngắn gọn và thường được dùng trong biến CSS cũng như tệp token thiết kế. RGB thuận tiện khi phần mềm hiển thị trực tiếp giá trị từng kênh, còn HSL hữu ích khi tạo các màu liên quan bằng cách điều chỉnh độ sáng hoặc độ bão hòa.

• Dùng mã hex sáu chữ số cho màu web không trong suốt khi cần ký hiệu ngắn gọn và dễ đọc rộng rãi.
• Chỉ dùng mã hex tám chữ số khi môi trường đích hỗ trợ rõ ràng kênh alpha trong ký hiệu này.
• Dùng RGB hoặc RGBA khi làm việc với từng kênh đỏ, xanh lá và xanh dương.
• Dùng HSL hoặc HSLA để tạo các biến thể giao diện bằng chương trình dựa trên sắc độ, độ bão hòa hoặc độ sáng.
• Dùng Bộ chuyển đổi màu khi bạn đã có một giá trị và cần chuyển đổi giá trị đó, thay vì chọn màu mới bằng mắt.

Đừng coi giá trị RGB trên màn hình là thông số kỹ thuật dành cho in ấn. Hoạt động in thương mại có thể yêu cầu giá trị CMYK, cấu hình màu ICC, bản in thử và sự thống nhất với đơn vị in. Chỉ chuyển đổi bằng công thức toán học không thể bảo đảm rằng màu in sẽ khớp với màu trên màn hình có đèn nền.

Khi nào không cần chọn hoặc chuyển đổi màu?

Bạn không cần chọn hoặc chuyển đổi màu nếu giá trị hiện có đã đúng định dạng mà nơi nhận yêu cầu. Chuyển đổi nhiều lần có thể gây ra chênh lệch do làm tròn, cách viết hoa chữ cái không nhất quán hoặc những thay đổi không cần thiết trong tệp nguồn.

Trong một số trường hợp, nên giữ token thiết kế có tên, chẳng hạn như biến giao diện, thay vì thay thế bằng một giá trị cố định. Token duy trì mối quan hệ giữa các thành phần và cho phép thay đổi màu từ một nơi duy nhất. Tương tự, màu chỉ dành cho máy xử lý không cần cách biểu diễn dễ đọc hơn đối với con người, trừ khi có người phải kiểm tra hoặc bảo trì màu đó.

Không Bộ chọn màu nào có thể tự xác định liệu màu đã chọn có đủ độ tương phản, phù hợp với đặc tả thương hiệu hay vẫn dễ phân biệt với người bị suy giảm khả năng nhận biết màu hay không. Hãy kiểm tra tổ hợp màu tiền cảnh và nền bằng công cụ kiểm tra độ tương phản chuyên dụng, đồng thời xem xét giao diện trong bối cảnh thực tế.

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

Tôi có thể dùng kết quả trong biến CSS không?

Có, miễn là ký hiệu đã chọn là cú pháp CSS hợp lệ đối với các trình duyệt và công cụ xây dựng mà bạn hỗ trợ. Hãy lưu toàn bộ giá trị trong một thuộc tính tùy chỉnh, sau đó tham chiếu đến thuộc tính đó bằng hàm var(). Nếu dự án xử lý riêng từng kênh, bạn có thể lưu các kênh theo quy ước hiện có của dự án để thuận tiện hơn.

Tại sao cùng một màu lại trông khác trên màn hình khác?

Các màn hình khác nhau về hiệu chuẩn, độ sáng, công nghệ tấm nền và khả năng hỗ trợ dải màu. Cơ chế quản lý màu của trình duyệt và cấu hình hiển thị của hệ điều hành cũng có thể ảnh hưởng đến kết quả. Vì vậy, giá trị số giống nhau không bảo đảm màu sẽ có hình thức vật lý giống hệt trên mọi thiết bị.

Chữ hoa và chữ thường trong mã hex có làm đổi màu không?

Không. Các chữ số thập lục phân từ A đến F không phân biệt chữ hoa và chữ thường, nên #AABBCC và #aabbcc biểu diễn cùng một màu. Hãy tuân theo quy ước viết hoa hoặc viết thường của kho mã để tránh những thay đổi chỉ liên quan đến định dạng.

Giá trị màu có thể chứa ký tự có dấu hoặc ký tự ngoài bảng chữ cái Latin không?

Ký hiệu hệ thập lục phân, RGB và HSL tiêu chuẩn sử dụng chữ số, chữ cái và dấu câu ASCII. Ký tự có dấu hoặc ký tự ngoài bảng chữ cái Latin không thuộc các cú pháp màu dạng số này. Chúng có thể xuất hiện trong tên biến hoặc siêu dữ liệu xung quanh nếu ngôn ngữ và kiểu mã hóa tệp liên quan cho phép.

Màu trong suốt có giống như không có màu không?

Không. Một màu trong suốt hoàn toàn vẫn có các giá trị kênh, dù tự chúng không hiển thị. Những kênh ẩn này có thể ảnh hưởng đến hoạt ảnh, phép nội suy, quá trình tổng hợp hoặc các thay đổi độ trong suốt sau đó. Vì vậy, hãy giữ nguyên chúng nếu ứng dụng phụ thuộc vào những hành vi này.

Có nên làm tròn giá trị thập phân của các kênh màu không?

Chỉ làm tròn các kênh màu và giá trị alpha dạng thập phân đến độ chính xác mà nơi nhận chấp nhận và cần để đầu ra nhất quán. Độ chính xác quá cao khiến giá trị khó kiểm tra hơn, còn làm tròn quá mạnh có thể tạo ra chênh lệch màu nhỏ. Sau khi làm tròn, hãy kiểm tra thành phần được hiển thị trên nền dự kiến và trong các trạng thái tương tác tương ứng.