Màu sắc là một trong những yếu tố chính trong thiết kế giao diện người dùng của bạn. Nó có thể định hình được ấn tượng đầu tiên về sản phẩm của bạn, có thể là tinh tế, hoặc mát mẻ, sang điên rồ, thậm chí hoang dã. Đây không phải là một sự pha trộn những màu sắc đẹp mắt với nhau; mà đây là “pha trộn” có hệ thống. Được rồi, có thể các bạn đang bắt đầu từ con số 0, vậy cùng mình học những điều cơ bản nhất nhé:
Color Values. Đây là gì và khi nào dùng?
Màu sắc có thể được ghi chú theo nhiều cách khác nhau và những cách phổ biến nhất mà bạn có thể bắt gặp là Pantone, CMYK, HEX và RGB. Bình thường trong thiết kế kĩ thuật số (digital design) chỉ sử dụng HEX và RGB, nhưng bạn cần phải hiểu sự khác biệt giữa chúng vì rất có thể bạn sẽ làm việc nhiều với nó trong tương lai đấy.
1. Pantone → dùng trong in ấn
Pantone là sự pha trộn chính xác của mực, vì vậy nó có cùng màu trên toàn cầu. Bạn không thể in Pantone trên máy in tại nhà nhưng bạn có thể xem sách màu chính thức của Pantone để tham khảo. Các nhà in chuyên nghiệp sẽ lấy Pantone cụ thể cho bạn và thêm nó vào máy của họ để in. Do đó, in màu Pantone thường đắt hơn, đó là lý do tại sao nó chủ yếu được sử dụng cho logo hoặc các yếu tố thương hiệu cần phải phù hợp trên các phương tiện khác nhau, phần còn lại ở CMYK.
2. CMYK → dùng trong in ấn
CMYK là sự pha trộn của bốn màu, lục lam (Cyan), đỏ tươi (Magenta), vàng (Yellow) và đen (Key). Đây là cơ sở của tất cả các màu in khác. Đây cũng là bốn màu được tìm thấy trong máy in gia đình của bạn và các xưởng in chuyên nghiệp.
3. RGB → dùng trong UI Design
RGB là viết tắt của màu đỏ (Red), xanh lá cây (Green) và xanh dương (Blue). Màn hình của chúng ta phát ra những màu này, vì vậy chúng được làm bằng ánh sáng chứ không phải mực. Phổ màu của ánh sáng lớn hơn in. Do hệ thống màu khác nhau, màu in và màn hình sẽ không bao giờ khớp 100%. Đó không phải là vấn đề miễn là các bảng màu hài hòa với nhau.
Khi đưa ra các giá trị RGB trong thiết kế giao diện người dùng, nó nằm trong khoảng từ 0–255.
Ví dụ: R= 255, G =255, B=255 hoặc RBG=255,255,255 là màu trắng trong khi RGB= 0, 0, 0 là màu đen.
4. RBGA → dùng trong UI Design
Cũng giống như RGB, A là viết tắt của một kênh alpha bổ sung. Alpha điều chỉnh độ trong suốt từ 0,0 (hoàn toàn trong suốt) và 1,0 (hoàn toàn mờ đục).
Vì vậy, ví dụ RGBA = 255, 255, 255, 0,5 sẽ có màu trắng với độ trong suốt 50%.
5. HEX → dùng trong UI Design
Hãy sử dụng cái này nhé! RGB hoàn toàn ổn, nhưng hơi lâu khi ghi lại, vì vậy HEX là một dạng rút gọn của nó và nó sẽ luôn hiển thị chính xác màu giống như đối tác RBG. Do có định dạng là chuỗi (bắt đầu bằng #), nó sẽ xử lý, sao chép, dán và chia sẻ dễ dàng hơn.
Hex bao gồm 6 chữ số với một dấu thăng phía trước. Hai chữ số đầu tiên dành cho R, chữ số thứ hai dành cho G và chữ số thứ ba dành cho B. Đây là lý do tại sao RGB và Hex giống hệt nhau.
Lưu ý: Màu sắc trong thiết kế in ấn và màn hình sẽ không bao giờ được căn chỉnh hoàn hảo vì chúng được tạo ra theo nhiều cách khác nhau: in bằng cách trộn mực, màn hình bằng cách kết hợp ánh sáng. Điều quan trọng là làm cho mỗi bảng màu hài hòa trong chính nó.
💡 Bạn có thể dùng các công cụ online để chuyển đổi các định dạng màu với nhau, ở đây mình dùng: https://cmyktool.com/#
HSB Color System: Hue, Brightness, Saturation
Bên trong máy tính của bạn toàn là số 1 và số 0, điều đó có nghĩa là đối với máy tính của bạn, màu sắc chỉ là bit. Nếu bạn nghĩ rằng màu sắc là một cầu vồng woo-woo bí ẩn của ma thuật thanh tao, thì bạn sẽ không hài lòng khi phát hiện ra rằng mọi máy tính trên bề mặt hành tinh đều đại diện cho mọi màu sắc có thể mà nó có thể xuất ra chỉ với 3 con số.
Bây giờ, 3 con số đó khác nhau một chút.
Nếu bạn đã từng viết mã HTML và CSS, có lẽ bạn đã quen thuộc với RGB, trong đó một màu cụ thể được biểu thị bằng ba số: (1) màu đỏ của nó (R), (2) màu xanh của nó (G) , và (3) nó có màu xanh như thế nào (B).
Nhưng chỉ vì nó dễ dàng đối với máy tính không có nghĩa là nó dễ dàng đối với con người. Đây là khi HSB xuất hiện.
HSB là viết tắt của hue-saturation-brightness, và là một cách mô tả màu sắc thân thiện hơn với con người. Tại sao nó lại tuyệt vời như vậy? Bởi vì nó sử dụng những ý tưởng mà chúng ta đã nghĩ ra một cách tự nhiên khi mô tả màu sắc, chẳng hạn như…
Hue
Hue là một số nằm trong khoảng từ 0 đến 360. Nó được đo bằng độ, giống như độ của hình tròn (hình tròn cũng có 360°). Bạn có nhớ đến bánh xe màu không? Hue chính là nơi bạn đang ở trên bánh xe màu.
Hiện tại, bạn cần biết rằng để tìm màu sắc, hãy nghĩ đến bất kỳ màu nào gần với nó nhất trên bánh xe màu, chưa cần nghĩ đến mức độ tối hay sáng, đậm hay nhạt của màu sắc. Mình sẽ phân tích nó kĩ hơn sắp tới ngay trong bài viết.
💡 Lưu ý: trắng đen không phải màu sắc, nên sẽ không xuất hiện ở Hue.
Nếu bạn muốn phát triển sự hiểu biết trực quan về HSB, bạn nên ghi nhớ một vài điểm. Mình sẽ sử dụng màu đỏ, xanh lục và xanh lam vì chúng cách đều nhau quanh vòng tròn:
Màu đỏ là 0°
Màu xanh lá cây là 120°
Màu xanh là 240°
Màu đỏ cũng là 360°, chính xác giống như 0°
Vì vậy, khi mình đang nghĩ xem nên thêm màu gì vào, mình có thể nhanh chóng chỉ cần nhập một số sẽ đưa mình đến khá gần với màu phù hợp, chỉ bằng cách nghĩ về vị trí của ba điểm đó.
Saturation = “Độ đậm”
Saturation (Độ bão hòa) là một số nằm trong khoảng từ 0 đến 100. Vì vậy, bất kể bạn đã chọn màu gì, saturation 100% sẽ là phiên bản đậm nhất có thể của màu đó và saturation 0% sẽ là phiên bản màu xám của màu đó (tức là nếu màu sáng, nó sẽ có màu xám nhạt, nếu màu tối, nó sẽ có màu xám đậm).
Saturation được sử dụng khá đơn giản. 0% là màu xám phẳng, nhưng 100% là màu sặc sỡ nhất mà màn hình của bạn có thể tạo ra.
Brightness =”Độ sáng”
Brightness (Độ sáng) là một số từ 0 đến 100. Giống như Saturation, đôi khi nó được viết dưới dạng phần trăm. Bạn có thể hiểu như vầy:
Brightness 0% là màu đen, bất kể màu sắc, bất kể độ saturation.
Brightness 100% chỉ có màu trắng nếu saturation cũng bằng 0%. Nếu không, brightness 100% chỉ là một màu… rất sáng.
Hơi khó hiểu đúng không? Mình giải thích thêm nhé. Hãy tưởng tượng Brightness là một bóng đèn. 0% có nghĩa là bóng đèn tắt (trong phòng tối đen như mực). 100% có nghĩa là đèn sáng hết công suất. Vì vậy, có thể độ sáng 100% là màu sáng hoặc nếu ánh sáng đã có màu trắng thì độ sáng 100% là màu trắng tinh khiết.
Được rồi, tổng kết lại nhé, chúng ta có thể mô tả một màu bằng ba con số hợp lý:
Hue: màu tương đương trên bánh xe màu, từ 0° đến 360°
Saturation: màu sắc sặc sỡ, tươi như thế nào, từ 0% đến 100%
Brightness: mức độ “bóng đèn” được bật, tức mức độ sáng từ 0% đến 100%
Sử dụng HSB thế nào?
Color Variations - “Biến thể màu sắc” với Hue
Đầu tiên, Hue là một cách tuyệt vời để tạo ra các biến thể về màu sắc. Bởi vì bạn có rất nhiều lựa chọn từ 0° đến 360°, thay vì màu xanh lam chỉ đơn giản là "xanh lam", bạn có thể đẩy màu sắc xuống hoặc lên một chút và có được các biến thể đẹp mắt dễ dàng.
Mình bắt đầu với một dấu chấm nhỏ màu xanh lam, được căn giữa ở góc 240°.
Khi chuyển màu sắc xuống 30° đến 210° cũng mang lại cảm giác mát mẻ hơn, nhìn nhẹ nhàng hơn, giản dị hơn. Bạn có thấy nó giống màu của Twitter không?
Việc tăng sắc độ lên 260° mang lại một màu chàm. Chỉ cần dịch chuyển 20° và nó mang lại cảm giác hoàn toàn khác – một màu thú vị hơn, có thể hoạt động tốt với màu neon hoặc nền tối.
(Mình sẽ viết một bài sâu hơn về Color Variations - cùng đón đọc nhé)
Điều chỉnh khả năng hiển thị với Saturation
Nếu bạn có một màu thực sự áp đảo mọi thứ trong giao diện người dùng của mình, có một cách nhanh chóng để khắc phục nó là giảm saturation.
Bạn sẽ sử dụng saturation cho tất cả mọi thứ, bao gồm sửa các màu xung đột và làm phong phú thêm các sắc thái tối hơn của bạn.
Fun fact: Đen không phải là đối lập của trắng
Trong HSB, đây là cách tạo ảnh đen trắng:
Màu đen: đặt brightness thành 0%. Hue & Saturation tùy ý
Trắng: đặt brightness thành 100% và saturation thành 0%. Hue vẫn có thể tùy ý
💡 Điều này có nghĩa là, (trong hệ thống HSB) màu đen không đối lập với màu trắng.
Một cách khác để chứng minh điều này với chính bạn là suy nghĩ về ý nghĩa của việc thêm màu đen hoặc trắng vào một màu.
Để thêm màu trắng, bạn phải di chuyển màu của mình về phía màu trắng trên bộ chọn màu. Màu trắng nằm ở góc trên bên trái, và chắc chắn, việc thêm màu trắng liên quan đến việc giảm độ bão hòa (di chuyển sang trái) và tăng độ sáng (di chuyển lên trên).
Đây là dải màu khi thêm màu trắng:
Còn khi thêm màu đen, bạn phải di chuyển màu của mình về phía màu đen nằm góc bên dưới trái, dải màu của bạn thêm màu đen sẽ thay đổi, đồng nghĩa là bạn phải giảm độ sáng (di chuyển xuống), bạn có thể kéo độ bão hòa tùy ý.
Đây là dải màu khi thêm màu đen:
Bạn có thấy màu nó lạ lùng không? Mình thấy nó hơi tái tái khi bỏ thêm màu đen vào. Nếu vậy, làm sao để mình có thể tạo ra dải màu đậm hơn mà không cần thêm màu đen?
Hãy “rời xa ánh sáng” - rời xa màu trắng. Bằng cách:
Tăng độ bão hòa
Giảm độ sáng (vừa vừa thôi nhé)
Nhờ đó, bạn có thể có dải màu dày hơn:
Bạn có thể dùng công cụ này để tạo biến thể màu sắc
Material Design
Bạn có thể thay đổi màu sắc bằng tay hoặc sử dụng một công cụ như bảng màu thiết kế trong Material Design.
💡 Lưu ý: Chữ “P” trên vòng tròn cho biết màu văn bản có dễ đọc trước nền hay không. Màu trắng cho biết khi nào văn bản màu trắng có thể đọc được trên màu nền. Màu đen biểu thị khi văn bản màu đen có thể đọc được trên màu nền
Chỉ cần điền mã hex của bạn và nó sẽ tạo các biến thể cho bạn. Bạn có thể sử dụng nhiều hoặc ít biến thể tùy theo nhu cầu cho thiết kế của mình.
Plugin sắc thái màu cho Figma
🔗 Link Plugin tại đây
Credit & Reference:
The HSB Color System: A Practitioner's Primer - Erik D. Kennedy
Ultimate Guide to Color in UX/UI Design - Christine Vallaure
Dịch và tổng hợp bởi: Mirr Design
Mirr Design hiện đang tuyển sinh khóa học “Comprehensive User Interface Design” - CUID. Học tư duy thiết kế, thực hành thiết kế và tăng giá trị của thiết kế trong team.
Ai nên học? Khoá học được thiết kế giúp bạn nắm chắc quy trình và tư duy thiết kế, tạo tiền đề cho những bước tiến tiếp theo trong sự nghiệp UX Design. Nếu bạn đã có một vài năm kinh nghiệm hoặc đang có ý định chuyển ngành thì đây là khoá học dành cho bạn.