Chọn màu và lấy mã HEX, RGB, HSL: quy đổi, dựng thang màu và khai báo biến CSS
Công cụ có bảng chọn màu của hệ điều hành, mười ô màu dựng sẵn và ô nhập mã HEX, ba giá trị RGB gõ tay được, còn giá trị HSL thì tự tính theo. Mỗi định dạng có nút chép riêng, và khối bên dưới hiện sẵn hai dòng khai báo biến CSS để dán vào tệp định kiểu.
Tính năng nổi bật
- Bảng chọn màu gọi từ hệ điều hành, kéo là màu đổi ngay
- Khung xem trước lớn tô nguyên màu đang chọn để nhìn cho rõ
- Mười ô màu dựng sẵn phủ các sắc hay dùng, bấm một cái là nạp vào
- Ô nhập mã HEX gõ tay được, ba ô RGB nhận số và tự kẹp trong khoảng 0 tới 255
- Giá trị HSL tự tính lại mỗi khi màu đổi, hiện theo cú pháp dùng được ngay trong CSS
- Ba nút chép riêng cho HEX, cho chuỗi rgb và cho chuỗi hsl
- Khối biến CSS hiện sẵn một biến mã HEX và một biến ba số RGB
- Chạy hoàn toàn trên trình duyệt, không cần đăng ký và không lưu gì lại
Cùng một màu nhưng mỗi nơi đòi một cách viết
Trong một buổi làm việc bình thường, bạn có thể phải viết cùng một màu theo ba kiểu khác nhau. Tệp định kiểu của dự án dùng biến theo mã HEX. Đoạn mã tạo lớp phủ mờ lại cần ba số RGB tách rời để ghép với độ trong suốt. Còn khi cần dựng một thang màu từ nhạt tới đậm thì HSL là cách duy nhất làm nhanh được, vì bạn chỉ việc đổi con số độ sáng. Chuyển qua lại giữa ba kiểu này bằng tay thì được nhưng chậm và dễ gõ nhầm một ký tự, mà một ký tự sai trong mã màu thì không báo lỗi, chỉ là màu ra khác đi một chút và không ai để ý cho tới lúc khách hàng hỏi. Công cụ này giữ ba cách viết luôn đồng bộ với nhau và cho chép từng cái bằng một cú bấm, cộng thêm khối biến CSS soạn sẵn để bạn khỏi phải gõ lại.
Lợi ích khi sử dụng
- Ba định dạng luôn khớp nhau nên không lo gõ nhầm khi chuyển đổi
- Chép được đúng cú pháp CSS chứ không phải chỉ chép con số
- Có sẵn khối biến CSS để dán thẳng vào tệp định kiểu
- Bảng chọn màu của hệ điều hành cho phép rê tìm sắc nhanh hơn gõ số
- Không cần cài phần mềm đồ họa chỉ để lấy một mã màu
Cách lấy mã màu ở đủ ba định dạng
- 1Bấm vào dải chọn màu để mở bảng màu của hệ điều hành, hoặc bấm một trong mười ô màu dựng sẵn.
- 2Nếu đã có mã màu sẵn, dán thẳng vào ô HEX theo dạng dấu thăng kèm sáu ký tự.
- 3Cần tinh chỉnh thì sửa từng con số trong ba ô RGB, mã HEX và giá trị HSL sẽ tự đổi theo.
- 4Bấm nút chép bên cạnh định dạng bạn cần để lấy chuỗi đúng cú pháp dùng trong CSS.
- 5Bôi đen khối biến CSS ở dưới cùng và chép nếu bạn muốn khai báo màu này thành biến trong dự án.
Ba cách viết cùng một màu và phép quy đổi phía sau
Mã HEX là ba cặp ký tự hệ mười sáu, mỗi cặp là một kênh màu và nhận giá trị từ 00 tới FF, tức từ 0 tới 255 trong hệ mười. Lấy màu mặc định của công cụ làm ví dụ, mã EAB308 tách thành EA, B3 và 08; quy đổi từng cặp cho ra đỏ 234, lục 179 và lam 8, đúng bằng ba số trong ô RGB. Từ RGB sang HSL thì phức tạp hơn. Trước hết chia cả ba giá trị cho 255 để đưa về khoảng từ 0 tới 1, rồi lấy giá trị lớn nhất và nhỏ nhất trong ba số đó. Độ sáng là trung bình cộng của hai giá trị này, ở ví dụ trên cho ra khoảng 0,47 tức 47 phần trăm. Độ bão hòa tính từ hiệu của chúng, ra 93 phần trăm. Sắc màu tính theo kênh nào đang lớn nhất rồi quy về vòng tròn 360 độ, ở đây kênh đỏ lớn nhất và kết quả là 45 độ, tức vùng vàng cam. Vì cả ba con số HSL đều được làm tròn về số nguyên nên khi bạn quy ngược lại có thể lệch một đơn vị, đó là chuyện bình thường.
Dựng cả một thang màu từ một mã màu duy nhất
Đây là lý do thực dụng nhất để nhìn màu dưới dạng HSL. Giữ nguyên con số sắc màu và con số độ bão hòa, chỉ đổi con số độ sáng, bạn có ngay một dãy màu cùng họ dùng cho toàn bộ giao diện. Một cách chia hay dùng là bảy bậc với độ sáng lần lượt khoảng 95, 85, 72, 60, 47, 35 và 22 phần trăm: bậc nhạt nhất làm nền cho khối thông báo, bậc thứ hai làm nền khi rê chuột lên hàng trong bảng, bậc giữa là màu chính, hai bậc cuối dành cho chữ trên nền nhạt và cho viền đậm. Với trạng thái rê chuột của nút bấm, quy tắc đơn giản là giảm độ sáng đi khoảng sáu tới tám phần trăm so với trạng thái thường, còn trạng thái bị vô hiệu hóa thì giảm mạnh độ bão hòa thay vì làm nhạt màu, vì giảm bão hòa mới cho cảm giác xám đi đúng nghĩa. Một lưu ý khi làm thang màu: các sắc vàng và lục vốn đã sáng sẵn, nên ở cùng một mức độ sáng chúng vẫn trông chói hơn sắc lam, cần chỉnh tay thêm vài đơn vị.
Ô nhập nhận gì và không nhận gì
Ô HEX chỉ chấp nhận đúng dạng sáu ký tự, có hoặc không có dấu thăng ở đầu đều được. Ba trường hợp không được nhận diện, và khi đó khung xem trước sẽ đứng yên ở màu cũ mà không báo lỗi. Thứ nhất là cách viết rút gọn ba ký tự, kiểu ba chữ F liền nhau, dù cách viết này hợp lệ trong CSS; hãy tự nhân đôi từng ký tự trước khi dán. Thứ hai là dạng tám ký tự có thêm hai ký tự cuối để chỉ độ trong suốt; công cụ không làm việc với kênh trong suốt nên bạn phải bỏ hai ký tự cuối đi. Thứ ba là dán nguyên chuỗi có tên hàm màu hoặc tên màu tiếng Anh, những thứ này nằm ngoài phạm vi nhận diện. Ba ô RGB nhận số và tự kẹp lại trong khoảng 0 tới 255, gõ số lớn hơn sẽ bị kéo về 255 còn số âm bị kéo về 0. Riêng dòng HSL chỉ để đọc và để chép, không sửa trực tiếp được; muốn đi từ một giá trị HSL có sẵn, bạn phải quy nó về HEX hoặc RGB bằng công cụ khác rồi mới nhập vào đây.
Vì sao khối biến CSS lại có cả biến HEX lẫn biến ba số
Dòng thứ nhất khai báo màu dưới dạng mã HEX, đây là biến bạn dùng cho hầu hết trường hợp: màu chữ, màu nền, màu viền. Dòng thứ hai chỉ chứa ba con số ngăn cách bằng dấu phẩy, không có tên hàm bao ngoài, và nó tồn tại vì một lý do rất cụ thể: để bạn ghép thêm độ trong suốt mà không phải khai báo lại màu. Khi cần một lớp phủ mờ hay một bóng đổ cùng tông với màu chính, bạn viết hàm rgba rồi đặt biến ba số vào trong, theo sau là mức trong suốt mong muốn. Nhờ vậy chỉ cần đổi một chỗ khi thương hiệu đổi màu, mọi biến thể trong suốt tự đổi theo. Đây là kỹ thuật đã dùng nhiều năm và vẫn chạy tốt trên mọi trình duyệt. Các trình duyệt đời mới còn có cách gọn hơn là ghi mức trong suốt ngay sau mã màu trong cùng một hàm, hoặc trộn hai màu bằng hàm trộn màu, nhưng nếu dự án của bạn cần hỗ trợ trình duyệt cũ thì cặp biến ở đây vẫn là phương án an toàn nhất.
Một mã màu chủ đạo phải xuất hiện đúng ở những chỗ nào
Chọn được màu rồi, việc tiếp theo là bảo đảm nó giống nhau ở mọi nơi, vì lệch một chút giữa các điểm chạm là điều người xem cảm nhận được dù không gọi tên ra. Danh sách những chỗ cần cùng một mã: biến màu chính trong tệp định kiểu của website; thẻ khai báo màu chủ đề trong phần đầu trang, thứ quyết định màu thanh trạng thái trên trình duyệt di động; trường màu nền trong tệp mô tả ứng dụng web; nền của biểu tượng website; ảnh xem trước khi chia sẻ liên kết; mẫu chữ ký thư điện tử; và bộ mẫu bài đăng mạng xã hội. Với ấn phẩm in, mã màu này còn phải được chuyển sang hệ màu in và thường phải chỉnh tay vì nhiều màu rực trên màn hình không in ra được đúng như vậy. Cách làm gọn nhất là ghi mã HEX của bộ màu vào một tài liệu hướng dẫn nhận diện ngắn, kèm luôn dãy thang màu bảy bậc bạn đã dựng, rồi gửi cho mọi người cùng dùng thay vì để ai nấy tự bắt màu bằng mắt.
Câu hỏi thường gặp (FAQ)
Dán mã màu rút gọn ba ký tự mà không thấy đổi màu?
Ô nhập chỉ nhận dạng đầy đủ sáu ký tự, dù cách viết rút gọn ba ký tự vẫn hợp lệ trong CSS. Hãy nhân đôi từng ký tự trước khi dán, ví dụ ba chữ F thành sáu chữ F. Khi mã không được nhận diện, công cụ giữ nguyên màu cũ chứ không hiện thông báo lỗi.
Có nhập được mã màu tám ký tự có kênh trong suốt không?
Không. Công cụ chỉ làm việc với ba kênh màu, không có kênh trong suốt, nên bạn phải bỏ hai ký tự cuối trước khi dán. Nếu cần màu trong suốt, hãy lấy chuỗi ba số RGB rồi tự ghép với mức trong suốt bằng hàm rgba trong CSS.
Vì sao không sửa được giá trị HSL?
Dòng HSL chỉ để hiển thị và để chép, nó luôn được tính lại từ giá trị RGB hiện tại. Muốn đi từ một màu HSL có sẵn, bạn phải quy nó về HEX hoặc RGB trước rồi nhập vào một trong hai ô kia, sau đó dòng HSL sẽ hiện đúng con số bạn cần.
Quy đổi qua lại nhiều lần thì con số bị lệch một đơn vị, có sao không?
Không sao. Ba giá trị HSL đều được làm tròn về số nguyên, còn RGB thì luôn là số nguyên, nên khi đi vòng qua lại có thể lệch một đơn vị. Mức lệch này mắt thường không phân biệt được. Nếu cần chính xác tuyệt đối, hãy lấy mã HEX làm nguồn gốc duy nhất trong dự án.
Công cụ có kiểm tra độ tương phản giúp không?
Không. Đây là điểm cần lưu ý vì màu đẹp chưa chắc đọc được. Chuẩn về khả năng tiếp cận yêu cầu tỷ lệ tương phản ít nhất 4,5 trên 1 cho chữ thường và 3 trên 1 cho chữ lớn. Màu vàng mặc định trong công cụ đặt trên nền trắng chỉ đạt chưa tới 2 trên 1, tức không dùng làm màu chữ được.
Lấy màu từ một điểm bất kỳ trên màn hình bằng cách nào?
Công cụ không có ống hút màu quét toàn màn hình. Trên máy tính, bạn có thể dùng ống hút màu sẵn có trong bảng chọn màu của hệ điều hành khi mở dải chọn màu, tùy hệ điều hành mà chức năng này có hoặc không. Cách chắc ăn hơn là chụp màn hình rồi dùng công cụ trích màu từ ảnh.
Mười ô màu dựng sẵn lấy từ đâu?
Đó là mười sắc phổ biến gồm vàng, lục, lam, đỏ, tím, hồng, xanh ngọc, cam, chàm và đen, dùng làm điểm khởi đầu để bạn tinh chỉnh chứ không phải một bộ màu thương hiệu. Bấm vào một ô là nạp mã màu đó vào cả ba định dạng, sau đó bạn sửa tiếp bằng ô RGB.
Chuỗi chép ra dùng thẳng trong CSS được luôn chứ?
Được. Nút chép của HEX trả về mã kèm dấu thăng, nút chép của RGB trả về nguyên hàm rgb với ba số, nút chép của HSL trả về nguyên hàm hsl kèm hai dấu phần trăm. Cả ba đều đúng cú pháp CSS nên dán vào là chạy, không phải sửa gì thêm.
Biến ba số RGB trong khối CSS dùng làm gì?
Để ghép thêm độ trong suốt mà không phải khai báo lại màu. Bạn đặt biến đó vào trong hàm rgba rồi thêm mức trong suốt phía sau, nhờ vậy khi đổi màu thương hiệu chỉ cần sửa một chỗ là mọi lớp phủ mờ và bóng đổ cùng tông tự đổi theo.
Vì sao cùng một mã màu mà nhìn khác nhau trên hai màn hình?
Vì mỗi màn hình có tấm nền, độ sáng và hồ sơ màu khác nhau, chưa kể chế độ lọc ánh sáng xanh ban đêm làm ngả vàng toàn bộ. Mã màu là con số cố định, còn cách hiển thị thì không. Với việc cần độ chính xác cao, hãy hiệu chỉnh màn hình và luôn duyệt màu trên ít nhất hai thiết bị.
Làm sao tạo được các sắc độ nhạt và đậm của cùng một màu?
Giữ nguyên hai con số đầu của HSL là sắc màu và độ bão hòa, chỉ đổi con số độ sáng. Một dãy hay dùng là bảy bậc với độ sáng khoảng 95, 85, 72, 60, 47, 35 và 22 phần trăm. Riêng sắc vàng và lục cần chỉnh tay thêm vì ở cùng độ sáng chúng vẫn trông chói hơn sắc lam.
Công cụ có lưu lại các màu tôi đã chọn không?
Không. Không có lịch sử màu, không có bộ sưu tập lưu sẵn và không có tài khoản. Tải lại trang là quay về màu mặc định. Nếu cần giữ bộ màu, hãy chép các mã HEX vào một tài liệu hướng dẫn nhận diện để cả nhóm cùng dùng.
Từ khóa liên quan
- chọn màu online
- bảng mã màu hex
- chuyển hex sang rgb
- chuyển rgb sang hsl
- mã màu css
- color picker online
- lấy mã màu website
- biến màu trong css
- tạo thang màu từ một màu
- màu hover cho nút bấm
- rgba độ trong suốt
- mã màu 6 ký tự và 3 ký tự
- hệ màu hsl là gì
- độ bão hòa và độ sáng của màu
- thẻ theme-color trên trình duyệt
- mã màu thương hiệu
- kiểm tra độ tương phản màu
- chọn màu chủ đạo cho website
- bảng màu tailwind
- công cụ chọn màu miễn phí
