Chuyển HEX sang HSL Hexadecimal ↔ Hue Saturation Lightness Miễn phí Trực tuyến An toàn

Vì sao bạn chuyển HEX sang HSL

Một mã hex như #5A4632 là cách tốt để lưu một màu và là cách kém để nghĩ về nó. Không gì trong các chữ số cho bạn biết màu đó là màu nâu, nó sáng đến đâu hay một phiên bản nhạt hơn chút sẽ trông thế nào. HSL được phát minh để sửa điều đó. Nó mô tả một màu theo cách con người hay nói về nó: sắc độ nào, rực đến đâu và sáng đến đâu. Chuyển HEX sang HSL là dịch một màu từ dạng công cụ thiết kế đưa cho bạn sang dạng bạn có thể lập luận: hsl(30, 29%, 28%) là màu nâu cam tối, dịu, và bạn thấy ngay rằng tăng con số cuối sẽ làm nó nhạt hơn.

Đó là lý do thực sự các nhà thiết kế và lập trình viên front-end dùng phép chuyển đổi này. Họ có một màu thương hiệu ở hex và cần một họ các màu liên quan: một màu sáng hơn cho trạng thái di chuột, một màu tối hơn cho nút đang nhấn, một màu rất nhạt cho nền, một màu giảm bão hòa cho điều khiển bị vô hiệu. Ở hex, mỗi cái là một cuộc săn mới cho ba cặp chữ số. Ở HSL, mỗi cái là thay đổi một con số. Màu vẫn là màu đó, nhìn qua một thấu kính hữu ích hơn.

Trang này chuyển đổi 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ố của HSL được tính từ các chữ số hex thế nào, phép chuyển đổi giữ gì và làm tròn ở đâu, sắc độ, độ bão hòa và độ sáng có nghĩa gì trong thực tế, cách nhà thiết kế dùng HSL để dựng bảng màu và trạng thái, và những cái bẫy bắt người lần đầu chuyển HEX sang HSL.

HSL mô tả gì

Sắc độ: vị trí trên bánh xe màu

Sắc độ là một góc từ 0 đến 360 độ quanh bánh xe màu. Đỏ ở 0, vàng ở 60, lục ở 120, lục lam ở 180, lam ở 240 và đỏ tươi ở 300; ở 360 bạn quay lại đỏ. Sắc độ 30 nằm giữa đỏ và vàng, là cam. Con số cho biết bạn ở họ màu nào, và không nói gì về độ sáng hay độ nhạt.

Độ bão hòa: rực đến đâu

Độ bão hòa là một tỷ lệ phần trăm. Ở 100% màu thuần như sắc độ cho phép; ở 0% nó mất hết màu và là màu xám. Độ bão hòa 29%, như trong màu nâu ví dụ của chúng ta, là một màu dịu, đất. Hạ độ bão hòa là cách nhanh nhất làm một màu ồn ào dịu lại mà không đổi tính cách của nó.

Độ sáng: nhạt hay tối

Độ sáng cũng là một tỷ lệ phần trăm. Ở 0% màu là đen bất kể sắc độ và độ bão hòa; ở 100% là trắng; ở 50% là màu đầy đủ, bình thường. Màu nâu của chúng ta ở 28% nghiêng về phía tối. Tăng con số cho một phiên bản nhạt hơn của cùng màu, và giảm nó cho phiên bản tối hơn, đúng là thay đổi mà nhà thiết kế muốn nhất.

Vì sao nó dễ hơn hex

Ở hex, làm một màu nhạt hơn nghĩa là tăng cả ba cặp theo lượng khác nhau để sắc độ không trôi, gần như không thể làm bằng mắt. Ở HSL nó nghĩa là đổi một con số và để hai con số kia yên.

Phép chuyển đổi hoạt động thế nào

Từ ba byte sang một góc và hai tỷ lệ phần trăm

Bộ chuyển đổi trước hết đọc các chữ số hex như các giá trị đỏ, lục và lam, mỗi giá trị từ 0 đến 255, và co chúng về giữa 0 và 1. Nó tìm số lớn nhất và nhỏ nhất trong ba. Độ sáng là trung bình của hai số đó. Độ bão hòa phụ thuộc vào chúng cách nhau bao xa, so với độ sáng. Sắc độ phụ thuộc vào kênh nào lớn nhất và hai kênh kia so sánh thế nào. Nếu cả ba bằng nhau, màu là xám, độ bão hòa bằng không và sắc độ không có nghĩa; khi đó bộ chuyển đổi hiển thị 0 cho nó.

Ví dụ

Với #5A4632 các byte là 90, 70 và 50. Đỏ lớn nhất ở 0,353, lam nhỏ nhất ở 0,196. Độ sáng là một nửa tổng của chúng, 0,275, khoảng 28%. Độ trải là 0,157, nên độ bão hòa là 0,157 chia tổng 0,549, khoảng 29%. Đỏ là kênh lớn nhất và lục nằm giữa, đặt sắc độ ở 30 độ. Kết quả là hsl(30, 29%, 28%).

Số nguyên

Ba con số được làm tròn đến độ nguyên và phần trăm nguyên khi ghi ra. Đó là dạng người ta dùng và dạng CSS mong đợi trong công việc thường ngày, nhưng nghĩa là một số thông tin bị bỏ ở chữ số cuối, như phần tiếp theo giải thích.

Phép chuyển đổi giữ gì và không thể giữ gì

Nó giữ màu như mắt phân loại

Kết quả là màu như mắt phân loại: một sắc độ trên bánh xe, độ bão hòa, độ sáng. Đó là lý do HSL đáng có. Bạn có thể làm một màu nhạt hơn hay một sắc thái tối hơn bằng cách đổi một con số, gần như không thể ở hex.

Nó không thể hứa trả lại cùng các byte

Hai dạng mô tả cùng các màu, nhưng HSL đế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 ra. Vì vậy một màu đưa sang HSL rồi quay lại có thể rơi cách điểm xuất phát một hoặc hai bậc: nhìn giống nhau, không giống từng byte. Nếu bạn cần đúng các byte trở lại, hãy giữ hex. Hãy chuyển HEX sang HSL để làm việc với một màu, và giữ hex làm bản gốc.

Màu xám không có sắc độ

Khi ba byte bằng nhau, không có gì để nói về sắc độ. Bộ chuyển đổi cho sắc độ 0 và độ bão hòa 0%, và chỉ độ sáng mô tả màu xám. Đừng đọc gì từ số 0.

Dùng HSL trong thực tế

Dựng một họ các sắc thái

Lấy màu gốc hsl(30, 29%, 28%). Một sắc thái sáng hơn cho di chuột là hsl(30, 29%, 34%). Một sắc nhạt rất nhẹ cho nền là hsl(30, 29%, 94%). Một sắc thái tối hơn cho trạng thái nhấn là hsl(30, 29%, 22%). Sắc độ và độ bão hòa giữ nguyên, nên các màu rõ ràng thuộc về nhau. Làm điều tương tự ở hex cần nhiều lần thử và vẫn trông hơi lệch.

Chủ đề và chế độ tối

Một chủ đề thường cần cùng bảng màu ở phiên bản sáng và tối. Với HSL, bạn giữ sắc độ và điều chỉnh độ sáng và độ bão hòa: làm sáng nền và làm tối chữ cho chủ đề sáng, và ngược lại cho chủ đề tối. Định nghĩa sắc độ như một thuộc tính tùy chỉnh và chỉ thay đổi độ sáng là cách phổ biến và gọn gàng để làm vậy.

Tạo bảng màu

Để tìm các màu hợp với một màu gốc, hãy xoay sắc độ. Ba mươi độ về mỗi phía cho các màu tương tự, 180 cho màu bù, và 120 hoặc 240 cho bộ ba. Cố định độ bão hòa và độ sáng, đổi sắc độ, và các màu có cảm giác đồng đều. Đó là cách nhanh để bắt đầu một bảng màu không trông ngẫu nhiên.

Độ tương phản dễ tiếp cận

Độ sáng là điều khiển chính của độ tương phản. Nếu chữ khó đọc trên nền màu, cách sửa thường là tăng chênh lệch độ sáng giữa chúng, và HSL biến việc đó thành điều chỉnh một con số ở mỗi bên.

Cách chuyển HEX sang HSL ở đây

Gõ hoặc dán mã hex

Nhập màu vào trường đầu tiên, có hoặc không có dấu thăng. Dạng ba và sáu chữ số được chấp nhận, và dạng tám chữ số có độ trong suốt cũng được đọc.

Đọc giá trị hsl

Đáp án hiện ngay, như trong #5A4632 = hsl(30, 29%, 28%). Ba con số là sắc độ tính bằng độ, và độ bão hòa và độ sáng tính bằng phần trăm.

Sao chép nó vào bảng định kiểu của bạn

Hãy dùng kết quả nguyên trạng, trong một quy tắc như color: hsl(30, 29%, 28%). Để điều chỉnh màu, hãy đổi con số cuối. Công cụ cho chiều ngược lại là HSL sang HEX.

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 bánh xe 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 HEX sang HSL

Mong đợi một vòng đi về hoàn hảo

Do làm tròn, chuyển ngược lại có thể cho một mã cách bản gốc một hoặc hai bậc. Với một màu đơn lẻ thì không thấy. Với một hệ thống thiết kế nơi nhiều màu được chuyển qua lại, nó có thể tích lũy. Hãy giữ hex làm nguồn.

Cho rằng độ sáng bằng nhau nghĩa là độ rực bằng nhau

Hai màu cùng độ sáng HSL có thể trông khá khác nhau về độ rực: màu vàng ở 50% trông rực hơn nhiều so với màu lam ở 50%. Độ sáng HSL là một con số tiện lợi, không phải thước đo độ rực cảm nhận. Để kiểm tra tương phản, hãy dùng một công cụ tương phản đúng nghĩa.

Quên dấu phần trăm

Trong CSS, độ bão hòa và độ sáng trong hsl() mang dấu phần trăm, và sắc độ là số trơn hoặc số kèm deg. Bỏ dấu là sai lầm kinh điển.

Đọc quá nhiều từ màu xám

Màu xám không có sắc độ. Nếu bộ chuyển đổi hiển thị 0 cho nó, điều đó không có nghĩa nó ngả đỏ.

Những câu hỏi mọi người hay hỏi trước khi chuyển

#FF0000 trong HSL là gì?

hsl(0, 100%, 50%), đỏ thuần.

#FFFFFF trong HSL là gì?

hsl(0, 0%, 100%), trắng. Sắc độ vô nghĩa với màu trắng, và bộ chuyển đổi hiển thị 0.

HSL có được hỗ trợ ở mọi nơi không?

Mọi trình duyệt hiện nay hiểu hsl() và hsla(). Nó đã có trong CSS nhiều năm.

Phép chuyển đổi có chính xác không?

Nó chính xác theo nghĩa mô tả cùng một màu, nhưng các con số được làm tròn đến độ và phần trăm nguyên, nên đi ngược lại có thể rơi lệch một bậc.

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 HSL sang HEX.

Chọn khôn ngoan khi bạn chuyển HEX sang HSL

Dùng HSL để làm việc, hex để lưu

Hãy giữ bảng màu chủ ở hex, nơi nó rõ ràng, và dùng HSL khi bạn muốn tạo biến thể. Các vòng đi về mất một ít; bản chủ thì không.

Cân nhắc các không gian màu mới hơn

CSS nay cung cấp oklch() và các ký hiệu tương tự nơi độ sáng bằng nhau thực sự trông bằng nhau. Chúng đáng học cho các hệ thống thiết kế mới. HSL vẫn là ký hiệu hầu như ai cũng hiểu và mọi công cụ đều hỗ trợ.

Dùng thuộc tính tùy chỉnh

Định nghĩa --hue, --sat và --light, và dựng màu từ chúng: hsl(var(--hue) var(--sat) var(--light)). Một chủ đề khi đó đổi bằng cách sửa vài con số.

Đọc và viết HSL tự tin

Vài mốc cần nhớ

Một vài con số làm HSL dễ đọc hơn. Các sắc độ ở bội số của 60 là các màu thuần: 0 đỏ, 60 vàng, 120 lục, 180 lục lam, 240 lam, 300 đỏ tươi. Độ sáng 50 với độ bão hòa 100 cho phiên bản thuần nhất của bất kỳ sắc độ nào, và độ sáng 95 trở lên là một sắc nhạt đến mức dùng được làm nền. Khi bạn chuyển HEX sang HSL và thấy sắc độ gần một trong những mốc này, bạn gọi tên được họ màu chỉ bằng một cái nhìn.

Di chuyển giữa các họ

Cộng 180 vào một sắc độ cho màu đối diện trên bánh xe, là màu bù và thường là tương phản mạnh nhất. Cộng hoặc trừ 30 cho một láng giềng nằm thoải mái cạnh bản gốc. Nhà thiết kế dùng những bước này để chọn màu nhấn hợp với màu thương hiệu mà không phải đoán.

Ghi lại các giá trị đã chuyển

Khi bạn chuyển HEX sang HSL cho một bảng màu, hãy viết kết quả trong một bảng với hex gốc bên cạnh. Bảng cho thấy các màu liên hệ thế nào, và nếu một sắc độ hay độ sáng lệch với những cái khác, sự kỳ quặc thấy ngay. Nó cũng cho nhóm của bạn một tham chiếu chung.

Thử trên màn hình thật

Những màu trông cân bằng trên màn hình đã hiệu chuẩn có thể trông khác trên điện thoại dưới nắng hay laptop rẻ. Hãy kiểm tra bảng màu hoàn chỉnh trên ít nhất hai thiết bị, và điều chỉnh độ sáng một chút nếu các sắc nhạt biến mất trên một trong hai.

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 HSL sang HEX. 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 và px sang em 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ử màu thương hiệu của bạn là #1E7A5C. Bạn chuyển HEX sang HSL và đọc hsl(160, 61%, 30%). Cho trạng thái di chuột bạn viết hsl(160, 61%, 36%), sáng hơn chút. Cho trạng thái nhấn, hsl(160, 61%, 24%). Cho nền rất nhạt sau một thông báo, hsl(160, 40%, 95%). Cho một nút bị vô hiệu, hsl(160, 12%, 60%), cùng sắc độ nhưng bỏ đi phần lớn màu. Năm màu, một sắc độ, viết trong một phút, và tất cả đều trông như thuộc về nhau. Khi màu thương hiệu đổi, bạn đổi con số sắc độ một lần.

Một danh sách kiểm tra ngắn

Trước khi chuyển

Quyết định bạn muốn làm gì với màu: biến thể, chủ đề hay chỉ đọc nó.

Trong khi chuyển

Dán hex, đọc hsl và ghi lại ba con số.

Sau khi chuyển

Tạo các biến thể bằng cách đổi một con số mỗi lần, và xem chúng trên nền thật.

Những sai lầm thường gặp

Coi các số đã làm tròn là chính xác

Chúng là số nguyên. Hãy giữ hex làm bản chủ.

Đánh đồng độ sáng với độ rực

Hai màu cùng độ sáng có thể khác nhiều về độ rực trông thế nào.

Bỏ dấu phần trăm

Độ bão hòa và độ sáng cần chúng trong CSS.

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 HEX sang HSL.

Tóm tắt

Để chuyển HEX sang HSL ở đây, hãy gõ hoặc dán mã hex và đọc ngay giá trị hsl. Phép chuyển đổi giữ màu như mắt phân loại: một sắc độ trên bánh xe, độ bão hòa, độ sáng. Đó là lý do HSL đáng có, vì bạn có thể làm một màu nhạt hơn hay một sắc thái tối hơn bằng cách đổi một con số, gần như không thể ở hex. Hai dạng mô tả cùng các màu, nhưng HSL đế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 điểm xuất phát một hoặc hai bậc. Nếu bạn cần đúng các byte trở lại, hãy giữ hex. Không có gì được tải lên.