Màu vàng - Ý nghĩa, bảng màu, màu bổ sung và sự hài hòa
Hướng dẫn thực tế về màu sắc màu vàng: biểu tượng và tâm lý học, bánh xe màu các mối quan hệ (bổ sung, tương tự, bộ ba), có thể truy cập kết hợp màu sắcvà các bảng màu có thể tải xuống. Chuyển đổi giữa HEX, RGB, Và HSL, sao chép các biến CSS và xem trước các màu phù hợp đi cùng nhau.
Mẹo: Nhấn Đi vào bên trong bất kỳ trường nào để cập nhật tất cả các giá trị.
Sơ lược về màu vàng
Màu vàng báo hiệu ánh nắng, sự ấm áp, sự tò mò và lạc quan. Nó nổi trội như một màu nhấn để làm nổi bật lời kêu gọi hành động, thẻ giá và cảnh báo. Để đọc dạng dài, hãy ưu tiên các tông màu nhẹ nhàng hơn để thoải mái.
Màu vàng thuần khiết có độ tương phản thấp trên nền trắng. Để có giao diện người dùng có thể truy cập, hãy đặt màu vàng trên màu xanh nước biển, màu than hoặc màu tím đậm. Sử dụng văn bản màu đen hoặc xám đậm trên nền màu vàng nhạt.
Bảng màu vàng
Được tạo tự động sắc thái (trắng hơn), sắc thái (đen hơn) và tông màu (xám hơn) từ màu vàng hiện tại. Nhấp vào bất kỳ mẫu màu nào để sao chép HEX. Bạn cũng có thể tải xuống bảng màu PNG.
Sắc thái
sắc thái
Âm
Sự hài hòa của bánh xe màu
Khám phá bổ sung cặp màu, tương tự hàng xóm và tam giác bộ từ màu vàng này. Những sự kết hợp sẵn có này giúp bạn tìm thấy những màu sắc phù hợp với nhau.
Các màu đối lập trên bánh xe màu tạo độ tương phản cao cho CTA và huy hiệu.
Những người hàng xóm trên bánh xe cảm thấy hài hòa — tuyệt vời cho hình nền và độ chuyển màu.
Ba màu cách đều nhau mang lại độ tương phản cân bằng cho bảng thông tin và biểu đồ.
Ứng dụng & Thực tiễn Tốt nhất
Xây dựng thương hiệu
Màu vàng mang lại sự thân thiện và năng lượng cho các thương hiệu bán lẻ, thực phẩm, sản phẩm dành cho trẻ em và du lịch. Kết hợp với màu than hoặc màu xanh nước biển đậm để có sự cân bằng chuyên nghiệp và kiểu chữ dễ đọc.
Giao diện người dùng và khả năng truy cập
Sử dụng màu vàng làm điểm nhấn cho các nút bấm và điểm nhấn. Đối với nội dung dài, hãy chọn tông màu nhạt làm nền với văn bản tối để đáp ứng độ tương phản WCAG.
Tiếp thị & Bao bì
Màu vàng thu hút sự chú ý trên kệ và nguồn cấp dữ liệu xã hội. Màu xanh lam hoặc tím bổ sung tạo ra các phần anh hùng và thẻ sản phẩm nổi bật.
Đặc trưng
- Lập tức HEX ↔ RGB ↔ HSL chuyển đổi và đồng bộ hóa.
- Bảng màu tự động: sắc thái, sắc thái, tông màu, cộng với bảng màu PNG có thể tải xuống.
- Sự hòa hợp của bánh xe màu sắc: gợi ý bổ sung, tương tự, bộ ba.
- Nhanh Biến CSS xuất khẩu cho các hệ thống thiết kế.
Cách sử dụng
- Nhập HEX (ví dụ:
#FFD600) hoặc giá trị RGB/HSL và nhấn Đi vào. - Nhấp vào bất kỳ mẫu màu nào để sao chép HEX của nó. Sử dụng các bộ bổ sung hoặc bộ ba để có độ tương phản mạnh.
- Tải xuống bảng màu PNG hoặc sao chép các biến CSS và dán vào dự án của bạn.
- Kiểm tra các mẹo về độ tương phản để giữ cho văn bản có thể đọc được trên giao diện người dùng màu vàng nhạt.
Câu hỏi thường gặp
Màu sắc nào phù hợp với màu vàng?
Màu xanh hải quân, màu than, màu tím đậm và màu xanh đậm của rừng kết hợp một cách độc đáo. Để có điểm nhấn tươi sáng, hãy sử dụng màu xanh lam hoặc tím bổ sung.
Màu đối lập của màu vàng là gì?
Trên bánh xe RGB/HSL, màu sắc đối diện gần như xanh lục lam (khoảng 180° so với màu vàng).
Tôi có thể sử dụng màu vàng cho nội dung văn bản không?
Nói chung là không dùng trên nền sáng. Giữ màu vàng cho phần nổi bật hoặc biểu tượng; thay vào đó hãy sử dụng văn bản tối trên thẻ màu vàng nhạt.