Chuyển HSL sang HEX Hue Saturation Lightness ↔ Hexadecimal Miễn phí Trực tuyến An toàn
Gõ một giá trị theo HSL và đọc ngay theo HEX. Phép tính chạy trong trình duyệt của bạn, không gửi gì đi đâu cả, và kết quả phụ thuộc vào cái gì thì viết rõ bên dưới chứ không mặc định.
Không tải gì lên
Những ký hiệu này đến từ đâu
Hex và RGB là cùng một thứ viết hai lần. Một màu trên màn hình là ba con số — phát ra bao nhiêu ánh sáng đỏ, lục, lam — mỗi số từ 0 đến 255, tức là một byte; hex chỉ đơn giản viết những byte ấy theo cơ số mười sáu, nên #FF8800 và rgb(255, 136, 0) là cùng một mệnh lệnh gửi tới cùng một điểm ảnh. HSL được nghĩ ra vì cả hai đều không đọc nổi bằng mắt người: nó cho sắc màu dưới dạng một góc trên vòng tròn màu, cùng độ bão hòa và độ sáng theo phần trăm, nhờ vậy người thiết kế có thể làm cho một màu sáng hơn mà không phải tính lại ba con số. CMYK thuộc về một thế giới hoàn toàn khác — mực chứ không phải ánh sáng. Nó là phép trừ, dựng từ bốn bản in, và không với tới được mọi màu mà màn hình làm được, bởi màn hình phát ra ánh sáng còn giấy thì chỉ hắt lại.
Bạn gặp chúng ở đâu
Hex là thứ bạn gõ vào bảng kiểu và thứ công cụ thiết kế đưa cho bạn. RGB xuất hiện ở bất cứ đâu một màu cần đến phép tính: chuyển sắc, độ trong, đoạn mã tính ra một sắc độ. HSL là thứ người ta với tới khi chỉnh một bảng màu bằng tay, bởi những thay đổi mong muốn thường là thay đổi một trong ba con số của nó. CMYK là thứ nhà in đòi hỏi, và đổi sang nó chính là khoảnh khắc một thiết kế thôi là ánh sáng và trở thành mực.
Những câu hỏi thường gặp
Vì sao kết quả CMYK của tôi khác với của nhà in?
Vì không có một phép đổi đúng duy nhất. Phép tính trên trang này là phép đơn giản, không phụ thuộc thiết bị, và đó là câu trả lời phù hợp khi bạn cần một điểm khởi đầu hay một mức tương đương áng chừng. Nhà in đổi qua một hồ sơ màu có tính đến loại mực, loại giấy và máy in cụ thể; cùng một màu RGB sẽ cho giá trị CMYK khác nhau trên giấy tráng bóng và trên giấy không tráng. Với bất cứ thứ gì phải khớp, hãy xin hồ sơ màu của nhà in thay vì tin vào một công thức.
Vì sao một số màu trên màn hình không in được?
Vì hai bên không với tới cùng những màu. Màn hình tạo màu bằng cách cộng ánh sáng, và nó làm được màu lục lam hay màu lục rực rỡ, bão hòa mà mực không tài nào theo kịp; giấy tạo màu bằng cách hút ánh sáng, và sáng nhất mà nó có thể là màu trắng của trang giấy. Tập hợp màu mà mỗi bên với tới được gọi là gam màu, và ở chỗ chúng không chồng lên nhau, phép đổi buộc phải chọn màu gần nhất sẵn có. Vì vậy một màu rực trên màn hình in ra thường trông hơi xỉn.
Kết quả có chính xác không?
Ở những chỗ hai đơn vị được định nghĩa qua nhau bằng số nguyên thì có — trang nói rõ điều đó ngay trên con số, và chỗ duy nhất làm tròn là số chữ số hiển thị. Ở những chỗ tỷ số không có thập phân hữu hạn, trang hiển thị mười hai chữ số có nghĩa và nói rằng quan hệ là xấp xỉ, thay vì làm như không phải vậy.
Những gì tôi gõ có rời khỏi máy của tôi không?
Không. Phép tính chạy trong trình duyệt của bạn; không có gì được gửi đi, và cũng chẳng có máy chủ nào để nhận. Tải trang một lần rồi là nó vẫn chạy khi đã tắt mạng.
Vì sao bạn chuyển HSL sang HEX
Bạn đã nghĩ ra một màu trong HSL, vì đó là ký hiệu mà bạn có thể suy nghĩ bằng nó: sắc độ 30, độ bão hòa 29%, độ sáng 28%, một màu nâu trầm, và một phiên bản nhạt hơn ở 34% cho trạng thái di chuột. Giờ màu đó phải đến một nơi đòi mã hex: một tệp token thiết kế, một tờ hướng dẫn thương hiệu, một công cụ không hiểu hsl(), một mẫu email, một tin nhắn gửi đồng nghiệp. Chuyển HSL sang HEX là lấy màu bạn đã suy tính và ghi nó xuống ở dạng ngắn, không mơ hồ và được mọi thứ hiểu.
Phép chuyển đổi này đi theo chiều ngược với chiều mà các nhà thiết kế gặp trước tiên. Nó bắt đầu từ ba con số thân thiện với con người và đến ba byte. Mỗi bước là số học đơn giản, nhưng có vài trường hợp giống lượng giác và có làm tròn, nên người ta thích để máy làm hộ. Trang làm việc đó ngay trong trình duyệt của bạn, và không có gì được tải lên. Bên dưới bạn sẽ thấy ba con số trở thành sáu chữ số hex ra sao, phép chuyển đổi giữ gì, vì sao một màu đã qua HSL có thể rơi cách chỗ ban đầu một hai bước, những cách nhà thiết kế dùng phép chuyển đổi, và những cái bẫy cần tránh.
Phép chuyển đổi hoạt động thế nào
Từ sắc độ, độ bão hòa và độ sáng sang đỏ, lục và lam
Bộ chuyển đổi trước hết tính độ đậm màu (chroma), tức màu cách xám bao xa: nó tăng theo độ bão hòa và giảm khi độ sáng rời xa 50%. Sau đó nó đặt sắc độ vào một trong sáu cung của vòng màu, mỗi cung rộng 60 độ, và từ cung đó quyết định kênh nào trong ba kênh ở mức cao nhất, kênh nào ở mức thấp nhất và kênh nào nằm giữa. Cuối cùng nó cộng một hằng số để độ sáng ra đúng, nhân ba giá trị từ khoảng 0 đến 1 lên 0 đến 255, và làm tròn từng giá trị thành số nguyên. Ba byte đó được ghi ở hệ mười sáu, mỗi byte hai chữ số.
Một ví dụ bằng số
Lấy hsl(30, 29%, 28%). Độ đậm màu là (1 − |2 × 0,28 − 1|) × 0,29 = 0,56 × 0,29 = 0,1624. Sắc độ 30 độ nằm giữa cung đầu, nên kênh giữa bằng một nửa độ đậm màu, 0,0812. Hằng số cần cộng là 0,28 − 0,0812 = 0,1988. Vậy đỏ là 0,1624 + 0,1988 = 0,3612, lục là 0,0812 + 0,1988 = 0,28 và lam là 0,1988. Nhân với 255 rồi làm tròn, đó là 92, 71 và 51. Trong hex, đó là #5C4733.
Các màu xám
Khi độ bão hòa là 0%, màu là một màu xám bất kể sắc độ, và ba byte bằng nhau. hsl(0, 0%, 50%) là #808080. Sắc độ bị bỏ qua, nên con số sắc độ nào cũng cho cùng một màu xám.
Phép chuyển đổi giữ gì và không thể giữ gì
Nó giữ màu đúng như bạn mô tả
Kết quả là màu có sắc độ, độ bão hòa và độ sáng như bạn đã cho, được ghi thành các byte. Ba con số bạn gõ là màu như mắt phân loại nó: một sắc độ trên vòng màu, nó bão hòa bao nhiêu, nó sáng bao nhiêu. Đó là lý do HSL đáng có, và phép chuyển đổi mang lựa chọn của bạn sang hex một cách trung thành.
Nó không thể hứa cùng những con số khi quay lại
Hai cách mô tả cùng những màu, nhưng HSL đi đến chúng qua một hình học khác và ba con số của nó được làm tròn đến độ nguyên và phần trăm nguyên khi ghi xuống. Vì vậy một màu đưa sang HSL rồi quay lại có thể rơi cách chỗ ban đầu một hai bước: nhìn thì giống nhau, nhưng không giống từng byte. Trong ví dụ của chúng ta, #5A4632 là một màu có HSL khoảng hsl(30, 29%, 28%); chuyển các số đã làm tròn đó ngược lại cho #5C4733, lệch hai bước ở kênh đỏ. Nếu bạn cần đúng các byte, hãy giữ mã hex.
Dấu phần trăm và dấu độ
Trang đọc sắc độ theo độ, còn độ bão hòa và độ sáng theo phần trăm. Bạn có thể viết chúng có hoặc không có các dấu. Một sắc độ trên 360 hoặc dưới 0 được cuộn quanh vòng màu, nên 390 giống như 30.
Cách dùng thực tế
Viết một tệp token thiết kế
Một hệ thống thiết kế lưu màu dưới dạng token. Nhiều nhóm tạo màu trong HSL, vì họ có thể suy luận về chúng, và công bố chúng ở hex, vì công cụ nào cũng đọc được. Hãy chuyển HSL sang HEX một lần cho mỗi token, và tệp được công bố là thứ ai cũng dùng được.
Tạo màu cho các công cụ không đọc hsl()
Trình email, một số trình soạn tài liệu, chương trình đồ họa cũ hơn và nhiều thư viện biểu đồ chỉ nhận hex. Bất cứ gì bạn đã tính trong HSL đều phải được chuyển đổi trước khi chúng dùng được.
Kiểm tra một bảng màu được tạo ra
Một đoạn mã tạo bảng màu bằng cách xoay sắc độ cho ra một danh sách giá trị hsl(). Để thấy chúng dưới dạng các mã bạn sẽ đưa vào bảng định kiểu hoặc giao cho nhà thiết kế, hãy chuyển từng giá trị sang hex. Nó cũng cho phép bạn phát hiện những giá trị làm tròn thành cùng một mã và do đó không thật sự khác nhau.
Chia sẻ một màu trong tin nhắn
Mã hex ngắn, sao chép được và gần như ai làm việc với màu cũng hiểu. Giá trị hsl() dài hơn và ít quen thuộc hơn bên ngoài giới thiết kế. Khi bạn gửi một màu cho ai đó, hex là dạng lịch sự.
Cách chuyển HSL sang HEX ở đây
Gõ hoặc dán giá trị hsl
Nhập màu vào trường đầu tiên dưới dạng hsl(30, 29%, 28%), hoặc chỉ ba con số. Sắc độ tính bằng độ, độ bão hòa và độ sáng tính bằng phần trăm.
Đọc mã hex
Đáp án hiện ngay, như trong hsl(30, 29%, 28%) = #5C4733. Nó được viết bằng chữ hoa và có dấu thăng.
Sao chép nó vào công việc của bạn
Dùng mã trong bảng định kiểu, tệp token hoặc tin nhắn của bạn. Với chiều ngược lại, HEX sang HSL chỉ cách một cú nhấp.
Các ký hiệu này đến từ đâu
Hex và RGB là cùng một thứ viết hai lần
Một màu trên màn hình là ba con số, phát bao nhiêu ánh sáng đỏ, lục và lam, mỗi số từ 0 đến 255, là một byte. Hex đơn giản viết các byte đó ở hệ mười sáu. Để thấy các con số, hãy chuyển HEX sang RGB.
HSL và CMYK
HSL được phát minh vì không cái nào kia con người đọc được: nó cho sắc độ như một góc quanh vòng màu, với độ bão hòa và độ sáng bằng phần trăm, để một nhà thiết kế có thể làm thứ gì đó sáng hơn mà không phải tính lại ba con số. CMYK thuộc về một thế giới khác hẳn, mực chứ không phải ánh sáng. Nó là phép trừ, dựng từ bốn bản in, và không thể chạm mọi màu mà màn hình có thể, vì màn hình phát ánh sáng còn giấy chỉ phản xạ nó.
Những cái bẫy khi bạn chuyển HSL sang HEX
Mong nhận lại mã ban đầu
Nếu bạn bắt đầu từ một mã hex, chuyển nó sang HSL, không chỉnh gì rồi chuyển lại, bạn có thể nhận một mã khác cách một hai bước. Với một màu đơn lẻ thì không nhìn thấy được. Với một hệ thống thiết kế, hãy quyết định dạng nào là bản chủ, và coi dạng kia là suy ra.
Lẫn độ bão hòa với độ sáng
Hai giá trị này dễ bị đổi chỗ do nhầm: hsl(30, 28%, 29%) không phải hsl(30, 29%, 28%). Thứ tự là sắc độ, độ bão hòa, độ sáng. Nếu màu trên màn hình không giống như bạn mong đợi, hãy kiểm tra xem bạn có đảo chúng không.
Quên rằng độ sáng không phải độ chói
Hai màu có cùng độ sáng có thể trông khác nhau về độ chói. Màu vàng ở độ sáng 50% trông chói hơn nhiều so với màu lam ở 50%. Nếu bạn chọn màu cho chữ và nền, hãy kiểm tra độ tương phản của chúng bằng một công cụ đúng nghĩa, không phải bằng cách so các con số độ sáng.
Dùng giá trị ngoài phạm vi
Độ bão hòa và độ sáng bị giới hạn từ 0 đến 100 phần trăm. Giá trị ngoài khoảng đó bị cắt về biên. Độ sáng 120% không sáng hơn trắng; nó là trắng.
Những câu hỏi mọi người hay hỏi trước khi chuyển
hsl(0, 100%, 50%) trong hex là gì?
#FF0000, đỏ thuần.
hsl(0, 0%, 100%) trong hex là gì?
#FFFFFF, trắng.
Tôi có thể dùng số thập phân không?
Có. hsl(30.5, 28.6%, 27.8%) được chấp nhận. Kết quả được làm tròn thành các byte nguyên.
Phép chuyển đổi có chính xác không?
Nó cho đúng các byte của những con số bạn gõ, làm tròn thành giá trị nguyên. Quay lại có thể lệch một bước, vì các con số HSL đã bị làm tròn.
Màu của tôi có bị tải lên không?
Không. Phép số học chạy trong trình duyệt của bạn và không có gì được gửi đi đâu.
Làm sao để quay lại?
Với HEX sang HSL.
Chọn khôn ngoan khi bạn chuyển HSL sang HEX
Quyết định dạng nào là bản chủ
Nếu bạn thiết kế trong HSL, hãy giữ các giá trị HSL làm nguồn và công bố hex làm đầu ra. Nếu thương hiệu cho bạn hex, hãy giữ nó và chỉ dùng HSL cho các biến thể. Trộn hai dạng như hai nguồn ngang hàng là thứ gây ra sự trôi lệch.
Dùng HSL để biến đổi, hex để cố định
Khi bạn cần một họ các sắc thái, hãy làm việc trong HSL. Khi bạn cần cố định một màu để nó giống hệt trong mọi công cụ, hãy viết nó dưới dạng hex.
Giữ những con số bạn đã gõ
Ghi các giá trị HSL cạnh hex trong ghi chú bảng màu của bạn. Nếu sau này ai đó muốn một phiên bản nhạt hơn, họ có thể bắt đầu từ các con số của bạn chứ không từ một mã đã bị làm tròn.
Sáu cung của vòng màu
Kênh nào cao, kênh nào thấp
Phép chuyển đổi chia vòng màu thành sáu cung 60 độ, và trong mỗi cung có một kênh ở mức cao nhất, một kênh ở mức thấp nhất và kênh thứ ba thay đổi mượt mà. Từ 0 đến 60, đỏ ở mức cao nhất, lam ở mức thấp nhất và lục tăng: đỏ chuyển sang vàng. Từ 60 đến 120, lục ở mức cao nhất và đỏ giảm: vàng chuyển sang lục. Từ 120 đến 180, lục vẫn cao và lam tăng: lục chuyển sang lơ. Từ 180 đến 240, lam tiếp quản và lục giảm. Từ 240 đến 300, lam vẫn cao và đỏ tăng: lam chuyển sang đỏ tươi. Từ 300 đến 360, đỏ lại tiếp quản và lam giảm. Khi bạn chuyển HSL sang HEX, biết sắc độ của bạn nằm ở cung nào sẽ có ích, vì nó cho bạn biết cặp nào trong ba cặp của đáp án sẽ lớn nhất.
Vì sao đáp án có nét họ hàng
Các màu cùng sắc độ và độ bão hòa nhưng khác độ sáng cho những mã hex trông như họ hàng: cùng kiểu cặp nào cao và cặp nào thấp, chỉ được nâng lên hay hạ xuống. #5C4733, #7A5F44 và #A38461 đều cùng họ, với đỏ lớn nhất, rồi lục, rồi lam. Bạn có thể học cách đọc điều này chỉ bằng một cái nhìn, và nó giúp bắt lỗi dễ hơn.
Xây một dải độ sáng
Một sắc độ, chín bước
Một cách dùng rất thực tế của phép chuyển đổi là dựng một dải của một màu duy nhất từ rất nhạt đến rất đậm, loại thang mà các hệ thống thiết kế đánh nhãn 50, 100, 200 và cứ thế đến 900. Hãy chọn một sắc độ và một độ bão hòa, rồi bước độ sáng qua các giá trị như 96, 90, 80, 70, 60, 50, 40, 30 và 20 phần trăm. Chuyển HSL sang HEX cho từng bước, và bạn có chín mã thuộc về nhau. Giảm nhẹ độ bão hòa ở hai đầu, vài điểm ở các bước nhạt nhất và đậm nhất, thường trông tự nhiên hơn so với giữ nó không đổi.
Đặt tên cho các bước
Hãy đặt cho mỗi bước một cái tên ghi lại vai trò của nó, không phải giá trị: surface cho bước nhạt nhất, border cho bước kế tiếp, text cho bước đậm nhất. Trong mã, tên cho người đọc sau biết màu dùng để làm gì, và bạn có thể đổi con số phía sau mà không đụng đến các quy tắc dùng nó.
Giao diện sáng và tối
Lật ngược dải màu
Một giao diện tối thường là giao diện sáng với dải màu được lật lại: bước nhạt nhất, vốn là nền trang trong giao diện sáng, thì bước đậm nhất trở thành nền trong giao diện tối. Nếu bạn dựng dải màu trong HSL, giao diện tối chẳng tốn gì ngoài một bộ chuyển đổi thứ hai. Hãy giữ nguyên sắc độ, điều bảo toàn tính cách thương hiệu, và điều chỉnh nhẹ độ bão hòa, vì các màu bão hòa thường trông gắt trên nền tối.
Kiểm tra cả hai giao diện
Hãy thử từng cặp chữ và nền của cả hai giao diện về độ tương phản. Một màu hợp trên nền trắng có thể hỏng trên nền gần đen, và việc kiểm tra mất một phút với công cụ tương phản và các mã hex bạn vừa tạo.
Khi bạn chỉ có ý niệm mơ hồ về màu
Bắt đầu từ vòng màu, rồi tinh chỉnh
Đôi khi bạn hoàn toàn không có mã hex, chỉ có một ý tưởng: một màu lam êm dịu, một màu cam ấm, một màu lục tươi. HSL là nơi tốt để bắt đầu, vì bạn có thể chọn sắc độ từ các cột mốc của vòng màu, đặt độ bão hòa vừa phải và độ sáng ở giữa, rồi chuyển HSL sang HEX để xem mình có gì. Nếu trông quá chói, hãy hạ độ bão hòa; nếu trông phẳng, hãy dời độ sáng. Mỗi lần thử tốn vài giây, và bạn kết thúc với một mã hex có thể đưa thẳng vào bảng định kiểu.
Các bộ chuyển đổi liên quan
Cùng họ công cụ bao quát các phép chuyển đổi lân cận. Để quay lại, hãy dùng HEX sang HSL. Cho các con số đằng sau mã, có HEX sang RGB và RGB sang HEX, và cho in ấn, HEX sang CMYK và CMYK sang HEX. Với kích thước trong cùng bảng định kiểu, px sang rem làm cho chiều dài điều mà trang này làm cho màu sắc.
Một ví dụ có lời giải
Giả sử bạn đã chọn một màu lục cho trạng thái thành công của một ứng dụng: hsl(145, 55%, 38%). Bạn gõ nó và đọc #2C9658. Bạn dùng mã đó trong tệp token làm --success. Cho nền của một thông báo thành công, bạn lấy cùng sắc độ, hsl(145, 45%, 94%), và đọc #E9F7EF. Cho đường viền, hsl(145, 45%, 78%), đọc là #AEE0C3. Ba mã, một sắc độ, tất cả suy ra trong một phút, và mỗi cái là một mã hex thường mà công cụ nào trong nhóm cũng mở được.
Một danh sách kiểm tra ngắn
Trước khi chuyển
Kiểm tra thứ tự của ba con số: sắc độ, độ bão hòa, độ sáng. Quyết định dạng nào là bản chủ của bạn.
Trong khi chuyển
Gõ các giá trị, đọc mã hex và sao chép nó kèm dấu thăng.
Sau khi chuyển
Nhìn màu trên màn hình trong ngữ cảnh, và ghi các giá trị HSL cạnh mã để dùng sau.
Những sai lầm thường gặp
Đổi chỗ độ bão hòa và độ sáng
Thứ tự là sắc độ, độ bão hòa, độ sáng.
Mong khôi phục được mã hex cũ
Nó có thể lệch một bước. Hãy giữ bản gốc nếu điều đó quan trọng.
So độ sáng thay vì độ tương phản
Hãy dùng công cụ tương phản cho chữ và nền.
Màu của bạn ở lại trên thiết bị của bạn
Phép tính diễn ra cục bộ. Các giá trị của bạn được dùng bởi chính trình duyệt và không có gì được gửi đi đâu. Không có gì để xóa sau đó và không có tài khoản để tạo. Đó là cách đơn giản để chuyển HSL sang HEX.
Tóm tắt
Để chuyển HSL sang HEX ở đây, hãy gõ sắc độ theo độ, độ bão hòa và độ sáng theo phần trăm, và đọc ngay mã hex. Phép chuyển đổi giữ màu như mắt phân loại nó: một sắc độ trên vòng màu, nó bão hòa bao nhiêu, nó sáng bao nhiêu. Hai ký hiệu mô tả cùng những màu, nhưng HSL đi đến chúng qua một hình học khác và ba con số của nó được làm tròn đến độ nguyên và phần trăm nguyên, nên một màu đưa sang HSL rồi quay lại có thể rơi cách chỗ ban đầu một hai bước. Nếu bạn cần đúng các byte, hãy giữ mã hex. Không có gì được tải lên.