Tạo bảng màu hài hòa theo lý thuyết màu sắc
#D92626
#26D9D9
CSS Variables:
--color-1: #D92626; --color-2: #26D9D9;
Công cụ Color Wheel của Tấn Phát Digital giúp bạn tạo bảng màu hài hòa theo lý thuyết màu sắc một cách trực quan và chuyên nghiệp. Hỗ trợ đầy đủ 6 loại color harmony: Complementary (bổ sung), Analogous (tương tự), Triadic (tam giác), Split-Complementary (bổ sung tách), Tetradic (tứ giác), và Monochromatic (đơn sắc). Điều chỉnh HSL (Hue, Saturation, Lightness) với slider trực quan. Bánh xe màu interactive cho phép chọn màu base bằng cách click hoặc kéo. Tự động generate bảng màu hài hòa với hex code sẵn sàng copy. Export CSS variables để sử dụng ngay trong project. Công cụ hoàn toàn miễn phí, không cần đăng ký.
Color harmony (sự hài hòa màu sắc) là nền tảng của thiết kế đẹp và chuyên nghiệp. Màu sắc ảnh hưởng trực tiếp đến cảm xúc, nhận thức và hành vi của người xem. Theo nghiên cứu, 90% quyết định mua hàng bị ảnh hưởng bởi màu sắc. Một bảng màu hài hòa tạo cảm giác dễ chịu, chuyên nghiệp và đáng tin cậy. Ngược lại, màu sắc xung đột gây khó chịu, mệt mắt và làm giảm uy tín thương hiệu. Lý thuyết màu sắc (color theory) được phát triển từ thế kỷ 17 bởi Isaac Newton và được hoàn thiện bởi các nghệ sĩ, nhà thiết kế qua nhiều thế kỷ. Công cụ này giúp bạn áp dụng lý thuyết màu sắc một cách dễ dàng mà không cần kiến thức chuyên sâu.
Complementary (Bổ sung): 2 màu đối diện trên bánh xe (cách 180°), tạo contrast mạnh, thu hút sự chú ý. Dùng cho CTA buttons, highlights. Analogous (Tương tự): 3 màu liền kề trên bánh xe (cách 30°), tạo cảm giác hài hòa, êm dịu. Dùng cho backgrounds, nature themes. Triadic (Tam giác): 3 màu cách đều 120°, cân bằng và sống động. Dùng cho designs cần năng lượng. Split-Complementary: 1 màu base + 2 màu cạnh màu bổ sung, ít contrast hơn complementary nhưng vẫn nổi bật. Tetradic (Tứ giác): 4 màu tạo hình chữ nhật trên bánh xe, đa dạng nhưng cần cân nhắc kỹ. Monochromatic (Đơn sắc): Các shade của cùng một hue, elegant và dễ phối.
Trong web design, color harmony được áp dụng như sau: Primary color cho brand identity, navigation, CTA buttons. Secondary color cho accents, hover states, secondary buttons. Neutral colors (từ monochromatic) cho text, backgrounds, borders. Complementary color cho warnings, notifications, highlights. Quy tắc 60-30-10: 60% dominant color (thường neutral), 30% secondary color, 10% accent color. Đảm bảo contrast ratio đủ cho accessibility (WCAG 2.1 yêu cầu 4.5:1 cho text thường, 3:1 cho text lớn).
HSL (Hue, Saturation, Lightness) trực quan nhất cho việc chọn và điều chỉnh màu. Hue là vị trí trên bánh xe (0-360°), Saturation là độ đậm (0-100%), Lightness là độ sáng (0-100%). RGB (Red, Green, Blue) phù hợp cho màn hình, mỗi kênh 0-255. HEX là cách viết gọn của RGB dưới dạng hexadecimal (#RRGGBB). Trong CSS, cả 3 đều được hỗ trợ. HSL dễ tạo variations (chỉ cần đổi lightness), RGB/HEX phổ biến hơn trong code. Công cụ này sử dụng HSL để chọn màu và convert sang HEX để export.
Complementary và Analogous phổ biến nhất. Complementary tạo contrast mạnh, phù hợp cho CTA và highlights. Analogous tạo cảm giác hài hòa, phù hợp cho backgrounds và overall theme. Monochromatic cũng rất phổ biến cho minimalist designs.
Màu base thường dựa trên: (1) Brand guidelines nếu đã có. (2) Tâm lý màu sắc - xanh dương cho trust, đỏ cho urgency, xanh lá cho nature/health. (3) Target audience - màu trẻ trung vs màu sang trọng. (4) Industry standards - fintech thường dùng xanh dương, food thường dùng đỏ/cam.
Có, nhưng cần cẩn thận. Thường dùng một harmony chính cho overall palette, có thể thêm màu từ harmony khác cho specific purposes (như warning colors). Quá nhiều màu sẽ gây rối mắt. Quy tắc chung: không quá 5-6 màu trong một design.
Copy CSS variables và paste vào :root trong stylesheet. Ví dụ: :root { --color-1: #3B82F6; --color-2: #F59E0B; }. Sau đó dùng var(--color-1) ở bất kỳ đâu trong CSS. Cách này giúp maintain palette dễ dàng - chỉ cần đổi ở một chỗ.
Saturation cao = màu đậm, sống động. Saturation thấp = màu nhạt, pastel, gần grayscale. Lightness cao = màu sáng, gần trắng. Lightness thấp = màu tối, gần đen. Để tạo variations của cùng một màu, giữ Hue cố định và điều chỉnh Saturation/Lightness.
Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.
