Tạo bảng màu từ một màu
Chọn các màu sắc phối hợp ăn ý với nhau là một trong những công đoạn khó nhất khi thiết kế website, ứng dụng, bài thuyết trình, logo hay poster. Lý thuyết màu sắc cung cấp các quy tắc phối màu chuẩn trên vòng tròn màu, và công cụ tạo bảng màu này sẽ tự động áp dụng chúng giúp bạn. Hãy bắt đầu bằng một màu bạn thích — hoặc màu thương hiệu của bạn — chọn một quy tắc phối màu, và nhận ngay năm màu sắc hài hòa sẵn sàng để sao chép vào dự án của bạn.
Tính năng
- Bảy quy tắc phối màu: bổ túc, tương đồng, tam giác, bổ túc xen kẽ, chữ nhật, đơn sắc và các sắc độ.
- Màu bắt đầu bất kỳ dưới dạng HEX, RGB, HSL hoặc tên màu CSS, hoặc chọn một màu ngẫu nhiên.
- Nhấp để sao chép bất kỳ mẫu màu nào.
- Xuất dưới dạng CSS custom properties hoặc mảng JSON.
- Nhãn dễ đọc tự động chuyển đổi giữa màu đen và trắng để tạo độ tương phản.
Nên dùng quy tắc phối màu nào?
| Quy tắc phối màu | Cảm giác | Phù hợp cho |
|---|---|---|
| Bổ túc | Nổi bật, độ tương phản cao | Nút kêu gọi hành động, thể thao, khuyến mãi |
| Tương đồng | Nhẹ nhàng, hài hòa | Thiên nhiên, sức khỏe, hình nền |
| Tam giác | Sống động, cân bằng | Sản phẩm trẻ em, hình minh họa |
| Bổ túc xen kẽ | Rực rỡ nhưng bớt gắt hơn | Website cần một điểm nhấn mạnh mẽ |
| Chữ nhật | Phong phú, nhiều màu sắc | Infographic và biểu đồ |
| Đơn sắc | Thanh lịch, tối giản | Website doanh nghiệp, portfolio |
| Sắc độ | Có tính hệ thống | Design system, trạng thái UI |
Từ bảng màu đến thiết kế
Khi đã có bảng màu, hãy kiểm tra xem văn bản có dễ đọc trên mọi phông nền hay không bằng công cụ Kiểm tra độ tương phản màu, chuyển đổi màu sang RGB, HSL hoặc CMYK để in ấn bằng công cụ Chuyển đổi màu, và tạo phông nền chuyển màu mượt mà từ hai màu bất kỳ bằng công cụ Tạo CSS Gradient.