Dán một màu theo bất kỳ cú pháp CSS nào — hex, rgb(), hsl() hay tên màu như tomato — rồi đọc lại ở mọi định dạng khác, kèm bảng màu tạo từ đó.
File không bao giờ rời khỏi thiết bị của bạn
hex#ff6347
rgbrgb(255, 99, 71)
hslhsl(9, 100%, 64%)
hsvhsv(9, 72%, 100%)
cmykcmyk(0%, 61%, 72%, 0%)
Bảng màu
Sắc nhạt
Sắc đậm
Bổ túc
Tương đồng
Tam giác
Một màu, năm định dạng
Chọn một màu một lần, trang này hiển thị mọi cách mà stylesheet, công cụ thiết kế hay việc in ấn
có thể cần đến nó. tomato — tên màu CSS — chính là #ff6347, tức rgb(255, 99, 71),
hsl(9, 100%, 64%), hsv(9, 72%, 100%) và cmyk(0%, 61%, 72%, 0%):
Định dạng
Giá trị
Hex
#ff6347
RGB
rgb(255, 99, 71)
HSL
hsl(9, 100%, 64%)
HSV
hsv(9, 72%, 100%)
CMYK
cmyk(0%, 61%, 72%, 0%)
Cả năm đều mô tả đúng một màu; không có gì bị mất hay tính gần đúng khi đổi qua lại giữa chúng,
trừ phần làm tròn của CMYK dành cho in ấn. Công cụ cập nhật cả năm định dạng cùng lúc ngay khi bạn
đổi một trong ba ô nhập đầu tiên.
Gõ tên thay vì gõ mã
CSS có sẵn hơn một trăm tên màu, và công cụ này đọc chúng y hệt như đọc hex hay rgb(). Gõ
dodgerblue sẽ ra #1e90ff — rgb(30, 144, 255), hsl(210, 100%, 56%) — mà không cần biết
trước mã hex là gì. Tên màu cũng là cách nhiều người dựng mockup nhanh: gõ steelblue trong bản
nháp nhanh hơn tra #4682b4, rồi đổi tên đó sang mọi định dạng khác chỉ tốn một lần dán.
Tạo bảng màu từ một màu duy nhất
Bên dưới công cụ chuyển đổi, phần bảng màu lấy màu của bạn rồi tạo ra hai dải và ba tông liên quan.
Sắc nhạt dịch tomato về phía trắng — #ff7d66, #ff9784, #ffb1a3, #ffcbc2, #ffe5e0 — và sắc
đậm dịch nó về phía đen — #d5533b, #aa422f, #803224, #552118, #2b110c. Cả hai dải đều giữ
nguyên tông màu xuyên suốt; chỉ lượng trắng hay đen pha vào là đổi, chính đặc điểm đó khiến chúng
dùng được như một bộ trạng thái hover, active, disabled nhất quán cho một màu giao diện.
Mẹo:Cần cả bộ trạng thái nút bấm từ một màu thương hiệu? Lấy màu gốc cộng hai sắc nhạt và hai sắc đậm — vậy là đủ năm màu đảm bảo nhất quán về mặt thị giác, vì tất cả đều xuất phát từ cùng một tông màu.
Tông liên quan: không phải sáng hơn hay tối hơn
Ba ô tông liên quan xoay tông màu thay vì đổi độ sáng. Bổ túc xoay 180 độ — màu bổ túc của tomato
là một xanh lục lam ở hsl(189, 100%, 64%), tức khoảng #47e3ff. Tương đồng xoay ±30 độ, ra một
hồng đỏ ở hsl(339, 100%, 64%) và một cam ở hsl(39, 100%, 64%) — hai màu láng giềng trên bánh xe,
đọc như cùng một họ màu. Tam giác xoay ±120 độ, ra một xanh lá ở hsl(129, 100%, 64%) và một
xanh tím ở hsl(249, 100%, 64%) — ba màu cách đều nhau quanh bánh xe, một điểm khởi đầu kinh điển
cho bảng màu biểu đồ nhiều màu hay minh họa.
Mẹo:Cặp màu bổ túc hợp làm điểm nhấn chính vì chúng hơi "chọi" nhau — dùng màu gốc cho phần lớn giao diện và màu bổ túc của nó thật tiết chế, cho một nút hành động chính hay một huy hiệu trạng thái, thay vì cho hai vùng lớn nằm cạnh nhau.
Chọn định dạng theo việc cần làm
Việc cần làm
Định dạng phù hợp nhất
Viết CSS
Hex, hoặc tên màu nếu có sẵn
Trộn hay tạo hiệu ứng màu bằng code
RGB hoặc HSL, đều là số thuần
Tạo phiên bản sáng hơn hay tối hơn
HSL, chỉ đổi độ sáng
Gửi màu cho designer làm in ấn
CMYK
Khớp "độ sáng" với công cụ ánh sáng hay pha sơn
HSV
Không có định dạng nào đúng tuyệt đối — mỗi cái làm cho một câu hỏi khác nhau dễ trả lời hơn, và
trang này tồn tại để bạn đọc ra đúng định dạng mà việc trước mắt đang cần.
Câu hỏi thường gặp
Công cụ này đổi được giữa những định dạng màu nào?
Hex, RGB, HSL, HSV và CMYK, cùng lúc — gõ hoặc dán một màu theo một trong ba cú pháp đầu (hex, rgb() hoặc hsl()), hay một tên màu CSS như tomato, mọi định dạng còn lại tự cập nhật theo, không cần đổi từng cặp một.
Có gõ tên màu thay vì mã được không?
Được. tomato, dodgerblue, steelblue và các tên màu CSS khác đều được nhận diện — tomato chính là #ff6347, đó cũng là lý do nó xuất hiện làm ví dụ xuyên suốt trang này và các trang chuyển đổi khác. Gõ tên thường nhanh hơn nhớ hay tra lại mã số.
CMYK là gì, và vì sao một công cụ web lại có luôn cả nó?
CMYK — cyan, magenta, yellow, key (đen) — là hệ màu ngành in dùng, nơi màu được trừ dần từ giấy trắng thay vì cộng thêm trên nền tối như màn hình. Dân web ít khi cần nó, nhưng đó là định dạng một designer làm in ấn sẽ hỏi, nên có sẵn CMYK cạnh RGB và hex giúp khỏi phải mở thêm công cụ khác.
Bảng màu phía dưới công cụ chuyển đổi được tạo ra thế nào?
Sắc nhạt dịch dần màu của bạn về phía trắng, sắc đậm dịch dần về phía đen, theo các bước đều nhau, tạo thành một dải dùng được cho trạng thái hover, disabled và pressed. Ba ô màu bổ túc, tương đồng và tam giác xoay tông màu đi một số độ cố định, giữ nguyên độ bão hòa và độ sáng.
Sắc nhạt, sắc đậm và một tông liên quan khác nhau ở đâu?
Sắc nhạt hay sắc đậm là cùng một tông màu ở độ sáng khác — pha về phía trắng hoặc phía đen. Một tông liên quan là một tông màu hoàn toàn khác, chọn theo vị trí trên bánh xe màu so với màu gốc, nên nó đọc như một màu có chủ đích liên quan nhưng tách biệt, chứ không phải bản sáng hơn hay tối hơn của cùng một màu.
Vì sao vừa có HSV vừa có HSL nếu chúng đo những thứ gần giống nhau?
Hai hệ trả lời hai câu hỏi hơi khác nhau. Độ sáng trong HSL đạt 100% ở trắng tinh, nên một tông màu thuần và sáng hết cỡ lại nằm ở 50% độ sáng. Value trong HSV đạt 100% ngay tại chính tông màu sáng hết cỡ đó, gần với cách một người pha sơn hay chỉnh đèn sân khấu nghĩ về độ sáng hơn — ít pha về trắng, nhiều pha về đen hơn.
Công cụ này có lưu hay gửi đi những màu tôi thử không?
Không. Mọi phép chuyển đổi, kể cả tính bảng màu và các tông liên quan, chạy bằng JavaScript ngay trong tab trình duyệt của bạn. Không có gì về màu bạn đang làm việc rời khỏi thiết bị.