Giải thích về mã màu

Giải thích về mã màu

Tên của một màu sắc luôn là một vấn đề, cách nhìn nhận về cùng một màu sắc của hai người luôn không giống nhau - đặc biệt là khi nhìn vào sắc độ màu sắc của một website. Cảm giác về màu sắc của bạn có thể sai lệch khác với tên gọi của màu đó. Chăng hạn như một màu gì đó giống màu xanh nhưng không chắc chắn, chính xác hơn nó có thể là xanh da trời, xanh nước biển, xanh lá cây...

Với những sở thích cá nhân khác nhau ta sẽ có cách nhìn nhận và mô tả màu sắc khác nhau. Chúng ta gọi một màu là chàm, ngọc bích, ô liu, màu quít, đỏ hay màu rượu... có rất nhiều sắc thái khác nhau mà chúng ta không thể phân biệt được - trừ khi chúng ta là Máy tính.

Mã màu đòi hỏi sự chính xác

Khi máy tính định dạng tên một màu sắc, nó dụng một mã số gọi là hệ thập lục phân và hầu hết mọi người gọi là: 24-bit màu. Đó là 16.777.216 cách kết hợp khác nhau của sáu ký tự được làm từ mười chữ số và sáu chữ cái - phía trước là dấu "thăng" - "#". Giống như bất kỳ một ngôn ngữ máy tính nào, với những hệ thống rất logic. Là một nhà thiết kế bạn phải biết cách làm việc với hệ thống hệ màu và có thể xử lý chúng.

Giải mã hệ thập lục phân trong mã mầu

Các điểm ảnh (Pixel) trên màn hình back-lit tối đen cho đến khi được thắp sáng bởi sự kết với của các màu đỏ (red), xanh lá cây (green), và màu xanh trời (blue). Mã màu đại diện cho các kết hợp với một mã ngắn gọn. Mã mà chúng ta có thể dễ dàng giải thích. Giả dụ đối với màu #970515, chúng ta hãy nhìn vào cấu trúc của nó:

Ký tự đầu tiên # tuyên bố rằng đây là một hệ số màu. Cùng với 6 ký tự khác (0-9 và a-f) chia thành 3 cặp. Mỗi cặp điều khiển một màu phụ chính.



Số càng cao, độ sáng của mỗi màu sắc càng tăng. Ở ví dụ trên 97 là độ sáng của red, 05 của green và 15 của blue

Mỗi cặp chứa 2 ký tự, nhưng #999999 lại là màu xám, để đạt được màu sắc sáng hơn 99, mỗi hệ số màu sử dụng chữ cái để đảm nhiệm 10–16 . A , B , C , D , E , và F sau 0–9 để tạo sự cân bằng với 16



Trở thành mã số toán học, thân thiện với máy tính. Hệ số màu hex là chuỗi đầy đủ các mô hình. Ví dụ, vì 00 cấp thấp nhất và ff là cấp cao nhất, thì #000000 là màu đen (no primaries) và #ffffff là màu trắng (all primaries). Ta có thể xêm vào hoặc giảm bớt, bắt đầu với màu đen, thay đổi mỗi cặp ff :

• #000000 là màu đen, điểm khởi đầu.
• #ff0000 là viết tắt của màu đỏ sáng.
• #00ff00 là viết tắt của màu xanh lá cây sáng.
• #0000ff là viết tắt của màu xanh sáng.

Màu sắc trừ bắt đầu với màu trắng, tức là với sự giúp đỡ của #ffffff . Để giảm cấp độ, thay đổi mỗi cặp 00 :

• #ffffff là màu trắng, điểm khởi đầu.
• #00ffff là viết tắt của màu lục lam sáng.
• #ff00ff là viết tắt của màu đỏ tươi sáng.
• #ffff00 là viết tắt của màu vàng sáng.

Rút gọn Hệ màu

Có hệ màu chỉ có 3 ký tự, chẳng hạn như #fae , có nghĩa là mỗi một vị trí phù hợp với 16 vị trí. Vì vậy #fae mở rộng là#ffaaee và #09b thực sự là #0099bb . Các mã viết tắt được cung cấp ngắn gọn.

Trong hầu hết các trường hợp, người ta có thể đọc một hệ màu bằng cách bỏ qua tất cả các ký tự khác, bởi vì sự khác biệt 16 vị trí cho chúng ta biết nhiều hơn những ký tự. Nghĩa là, nó khó để thấy sự khác biệt giữa 41 và 42, dễ dàng hơn để đánh giá sự khác biệt giữa 41 và 51.



Ví dụ trên có sự khác biệt giữa 16 vị trí để màu sắc dễ đoán hơn - rất nhiều màu đỏ, một số màu xanh, không có màu xanh lá cây. Giống với một màu tím trầm. Hàng chục trong ví dụ thứ hai (9, 9 và 8) là rất giống nhau. Để đánh giá màu này, chúng ta cần phải kiểm tra những ký tự khác (7, 0, và 5). Gần với 16 vị trí hơn, thì màu càng rõ rệt hơn (ít bão hòa).

Làm việc với hệ số hex

Hiểu biết về hệ màu hex, các nhà thiết kế có thể gây nhiều ấn tượng đối với đồng nghiệp, khách hàng bằng cách nói rằng: “Ah, good shade of burgundy there.” Hệ màu hex cho phép nhà thiết kế chỉnh sửa màu ngay lập tức để dễ đọc hơn, nhận biết các phần tử của màu sắc trong stylesheets, và phát triển màu sắc theo cách riêng.

Giữ sắc thái của đặc tính

Để làm sáng hoặc tối một màu sắc, thường thì làm sáng. Điều này làm cho gam màu âm u hoặc rực rỡ, làm mất cân bằng sắc thái. Ví dụ dưới đây với một màu xanh ở giữa sẽ gần trở thành màu đen nếu giảm độ sáng còn 20%. Nâng lên 100%, màu xanh trở nên sáng và sống động hơn.

Một điều hài hước diễn ra khi chúng tôi xử lý hệ màu là thêm ký tự vào bên trái của mỗi cặp thì độ sáng của màu được nâng lên trong khi độ bão hoà giảm. Điều này giúp cho chúng ta có thể làm sáng màu lên nhưng vẫn giữ được bản chất của màu đó.



Trong ví dụ trên, điều chỉnh phía trên sắc độ chuyển gần sang màu vàng hoặc gần ngả sang màu đen. Nhưng bằng cách thay đổi các cặp hệ số hex, bảng thứ 2 với những màu có sắc độ tự nhiên hơn.

Làm mờ Underlines

Theo mặc định, trình duyệt sẽ gạch chân văn bản để biểu thị các liên kết. Nhưng gạch chân đậm làm thụt chữ của văn bản. Nhà thiết kế có thể làm underlines mờ đi bằng cách sử dụng hệ màu hex. Ý tưởng là để làm các thẻ gần gũi hơn với màu nền, trong khi các phần văn bản chính luôn phải tương phản với màu nền.

• Đối với chữ màu tối trên nền sáng, làm sáng liên kết.
• Đối với văn bản sáng trên nền tối, làm cho tối hơn liên kết.

Để làm công việc này, mỗi liên kết nhúng cần a < span > bên trong của mỗi thẻ :


a { text-decoration:underline;color:#aaaaff; }

a span { text-decoration:none;color:#0000ff; }



Như bạn có thể thấy ở đây, underlines cùng một màu sắc giảm sắc thái gần với màu nên hơn sẽ có cảm giác dễ đọc hơn.

Thêm khoảng cho mỗi thẻ anchor có thể khó giải quyết. Dưới đây là một lựa chọn phổ biến để xoá gạch chân và thêm vào đó là border-bottom:

a { text-decoration: none; border-bottom: 1px solid #aaaaff; }

Body Sao chép tốt hơn

Một vấn đề trong thiết kế luôn sảy ra là một màu sắc cụ thể có thể chính xác nhưng luôn có tác dụng ngoài ý muốn. Ví dụ, một số mẫu thiết kế gọi tiêu đề và body giống màu nhau. Chúng ta phải ghi nhớ văn bản lớn càng đậm, văn bản nhỏ sẽ càng sẫm.



h1, p { color: #797979; }



h1 { color: #797979; }

p { color: #393939; }

Trong khi kỹ thuật giống hệt nhau, body của bản sao là hẹp hơn, và tinh tế hơn letterforms làm cho nó trực quan sáng hơn. Giảm sắc độ ở 16 vị trí sẽ làm cho văn bản dễ dàng hơn để đọc.

Làm thế nào để làm Ấm hoặc Lạnh màu nền

Nền trung lập có thể dễ dàng đọc, nhưng "trung lập" không có nghĩa là "nhạt nhẽo". Điều chỉnh byte đầu và cuối có thể làm cho màu nền tinh tế ấm hoặc mát hơn.

• #404040 - trung lập
• #504030 - ấm
• #304050 - lạnh

Bị thay đổi sắc thái quá nhiều? Hãy thay đổi một các tinh tế hơn:

• #404040 - trung lập
• #594039 - ấm
• #394059 - lạnh

Phối hợp Colors Với Copy-Paste

Nhận thức được cấu trúc của một hệ số màu chữ số / chữ cái thiết kế một công cụ duy nhất để khám phá sự kết hợp của màu sắc. Không giống như bánh xe màu sắc và biểu đồ, cặp sắp xếp lại trong một số hex là một quá trình đơn giản để thay đổi màu sắc trong khi vẫn giữ giá trị tương tự. Hơn nữa, kết quả có thể không dự đoán được. Kỹ thuật đơn giản nhất là để di chuyển một cặp của các ký tự đến một nơi khác nhau, làm thay đổi màu cơ bản.

Một kỹ thuật thiết kế thông thường để làm cho văn bản hoặc các yếu tố thị giác khác phối hợp với một bức ảnh là sử dụng màu sắc từ bên trong bức ảnh đó. Hiểu biết về màu sắc hex có thể phải bước thêm một bước, bằng cách bắt nguồn màu sắc mới phối hợp với bức ảnh mà không cần dùng trực tiếp từ bức ảnh.



Tiến về phía trước

Đừng để mã mầu đe dọa bạn. Với một chút sáng tạo, màu sắc hex là một công cụ có thể tuỳ biến theo ý của bạn.

TN biên dịch từ Smashing Magazine | LP Magazine​