Trình khám phá bánh xe màu
Chọn màu gốc
Kéo một điểm ghim quanh bánh xe màu và quan sát các dấu hòa sắc xoay theo: bổ túc ở 180°, bộ ba ở các khoảng 120°, các màu lân cận tương đồng, bổ túc chia đôi và bộ bốn. Chuyển qua lại giữa HSL (bánh xe kỹ thuật) và RYB (bánh xe của họa sĩ), so sánh xem chúng khác nhau ở đâu, rồi sao chép tổ hợp bạn chọn thành một bảng màu.
Trình khám phá bánh xe màu hoạt động thế nào
-
1
Kéo điểm ghim quanh bánh xe
Điểm ghim xác định màu gốc của bạn. Độ bão hòa và độ sáng được điều chỉnh bằng các thanh trượt riêng.
-
2
Chọn một bộ phối màu
Bổ túc, tương đồng, bộ ba, bổ túc chia đôi, bộ bốn, đơn sắc. Các dấu hòa sắc xoay cùng màu gốc.
-
3
Chuyển mô hình (HSL hay RYB)
Bánh xe HSL đối xứng (đỏ đối diện lục lam, lục đối diện đỏ tươi). Bánh xe RYB không đối xứng (đỏ đối diện lục, lam đối diện cam) và gần với trực giác pha màu hơn.
-
4
Sao chép bảng màu
Giá trị HEX, RGB, HSL cho màu gốc và từng dấu hòa sắc. Sao chép dưới dạng biến CSS, map Sass hoặc CSV thường.
Bánh xe HSL và bánh xe RYB
Cả hai bánh xe đều xếp màu thành vòng tròn, nhưng lại khác nhau về việc màu nào là “đối lập”:
| Màu gốc | Bổ túc HSL | Bổ túc RYB |
|---|---|---|
| Đỏ | Lục lam | Lục |
| Cam | Xanh mòng két | Lam |
| Vàng | Lam | Tím |
| Lục | Đỏ tươi | Đỏ |
| Lam | Vàng | Cam |
| Tím | Vàng-lục | Vàng |
- HSL (sắc độ, độ bão hòa, độ sáng): cách biểu diễn sRGB dạng trụ được dùng trong CSS và thiết kế kỹ thuật số. Cộng 180° sẽ chọn sắc độ đối diện trên bánh xe kỹ thuật số này.
- RYB (đỏ, vàng, lam): bánh xe màu mang tính khái niệm truyền thống trong giáo dục mỹ thuật. Công cụ sắp xếp lại các góc sắc độ để mô phỏng gần đúng quy ước đó, chứ không dự đoán kết quả pha trộn sắc tố thật.
Cả hai đều hữu ích cho những mục đích khác nhau. Dùng HSL cho công việc trên màn hình; dùng RYB khi bạn quan tâm đến trực giác của chất liệu vẽ.
Định nghĩa các bộ phối màu trên bánh xe
- Bổ túc: màu gốc + 180°. Khoảng cách sắc độ lớn nhất trên vòng màu đã chọn.
- Tương đồng: màu gốc với hai màu kề ở -30° và +30°. Mềm mại và hài hòa.
- Bộ ba: màu gốc + 120° + 240°. Sống động một cách cân bằng.
- Bổ túc chia đôi: màu gốc + 150° + 210°. Phong phú mà không căng như bộ bổ túc đầy đủ.
- Bộ bốn / vuông: màu gốc + 90° + 180° + 270°. Bốn sắc màu cách đều nhau.
- Đơn sắc: cùng sắc độ, khác độ sáng/độ bão hòa.
Nhiệt độ trên bánh xe
- Nửa nóng: đỏ, cam, vàng. Theo truyền thống có cảm giác tiến lên (hút mắt về phía trước).
- Nửa lạnh: lục, lam, tím. Theo truyền thống có cảm giác lùi ra sau.
- Trung tính: các màu nhạt (giảm bão hòa); thuộc về nửa nào là tùy theo sắc thái pha vào.
Công dụng thực tế
- Khám phá bảng màu thương hiệu: kéo điểm ghim đến khi tìm được màu phù hợp, rồi xem các dấu bộ ba hoặc bộ bốn để tìm màu nhấn bổ trợ.
- Nghiên cứu hội họa: chọn một ảnh tham chiếu, tìm sắc độ chủ đạo, rồi xem các màu lân cận tương đồng để đổ bóng đơn sắc.
- Minh họa: chọn một cặp bổ túc cho vùng bóng, ví dụ với vật thể màu cam, hãy đổ bóng bằng màu lam thay vì chỉ dùng cam đậm hơn.
- Bản phác thảo thiết kế nội thất: bánh xe bộ ba ứng với các bảng màu nội thất cổ điển (lam/vàng/đỏ theo phong cách Mỹ truyền thống; lục/cam/tím theo phong cách bohemian).
Vì sao bánh xe không hoàn toàn trực quan
Cảm nhận màu sắc thực sự của con người phức tạp hơn những gì bất kỳ bánh xe nào gợi ý. Hệ Munsell, LAB và OKLCH đều cố gắng sắp xếp đồng đều về mặt thị giác và không tạo thành một vòng tròn đơn giản, độ tươi (chroma) thay đổi theo độ sáng ở mỗi sắc độ. Với công việc trên các hệ thống thiết kế quy mô lớn, các không gian màu theo cảm nhận cho kết quả sạch hơn so với bánh xe; còn để khám phá màu sắc ở mức ý niệm, bánh xe vẫn thắng về độ rõ ràng.
Câu hỏi thường gặp
Dùng HSL cho thiết kế kỹ thuật số (CSS, màn hình, giao diện người dùng). Dùng RYB khi bạn nghĩ về sơn/màu vẽ, in ấn hoặc mỹ thuật truyền thống và muốn theo trực giác phối màu quy ước của trường mỹ thuật.
Hai mô hình sắp xếp sắc độ khác nhau. HSL dùng góc sắc độ sRGB nên lục lam nằm đối diện đỏ. Theo quy ước RYB truyền thống, lục nằm đối diện đỏ. RYB ở đây là cách mô phỏng trực quan gần đúng, không dự đoán kết quả khi pha những loại sơn cụ thể.
Có, cho việc giảng dạy, phác thảo ý tưởng và trao đổi với khách hàng. Còn với công việc phối màu chính xác, giới chuyên môn ngày càng dùng các không gian màu theo cảm nhận (LAB, OKLCH), nơi độ sáng và độ tươi độc lập với sắc độ.
Sao chép bảng màu dưới dạng CSS, Sass hoặc CSV rồi lưu vào nơi bạn làm việc. Công cụ không có thư viện bảng màu hay bộ nhớ tài khoản. Trong quy trình bốn bước, các cài đặt bánh xe đang hiển thị được đưa vào URL và có thể còn trong lịch sử trình duyệt.
Công cụ liên quan
Bộ chuyển đổi Base64 sang Hex
Chuyển chuỗi Base64 thành các byte nền tảng được biểu diễn dưới dạng hệ thập lục phân (hex). Hữu ích để kiểm tra token, khóa, chứng chỉ và JWT.
Trình chuyển đổi Binary sang Hex
Chuyển input binary thành giá trị hexadecimal chữ hoa đơn giản. Ký tự không phải 0 hoặc 1 bị bỏ qua và số 0 ở đầu không được giữ lại.
Trình tạo bảng màu
Tạo bảng màu đơn sắc, tương đồng, bổ túc, bộ ba hoặc bộ bốn từ màu HEX gốc và xuất các biến CSS sẵn sàng sao chép.
Bộ chuyển đổi nhị phân sang bát phân
Chuyển nhị phân sang bát phân bằng cách gom ba bit một lần. Hữu ích cho quyền Unix, hệ thống cũ và hiển thị số gọn hơn.
Trình tạo bảng màu ngẫu nhiên
Tạo bảng màu ngẫu nhiên từ 2 đến 15 mẫu màu, chọn phong cách rực rỡ, pastel, dịu hoặc tối, rồi sao chép mã HEX hoặc biến CSS.
Trình tạo màu ngẫu nhiên
Tạo từ 1 đến 50 màu HEX ngẫu nhiên kèm mẫu màu để xem trước, sao chép và dùng trong CSS, kiểm thử hoặc khám phá bảng màu.