Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'Kinh nghiệm / Kiến thức dành cho designer' được đăng bởi Thiên Ma, 5/5/14.

Lượt xem: 33,757

  1. Thiên Ma Lãng du VietDesigner

    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.

    jMIpVVT.png

    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

    9qNKiny.png

    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.
    uHBQlYD.png

    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.

    92STZwb.png

    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 đó.

    xdpbCFM.png

    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; }

    WxZUexw.png

    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.

    X5a6y3w.png

    h1, p { color: #797979; }

    97Obesw.png

    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.

    mUed5y5.png

    • #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:

    4QiEfse.png

    • #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.

    o7tOTeA.png

    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

    ...
    Chỉnh sửa lần cuối: 5/5/14
    muadong2312, Xoắn Zebrakorn, tomatoleez38 người khác thích bài viết này.
  2. blackbirds

    blackbirds Thành viên cấp 1

    quá tuyệt :D thanks a đã chia sẽ!
    Thiên Ma thích bài viết này
  3. Hồng Sơn

    Hồng Sơn Helper

    - Có 2 hình bị die kìa a :D Bổ ích quá :x
    Thiên Ma thích bài viết này
  4. Xoắn Quắn

    Xoắn Quắn Mới đăng kí

    Quá đã, toàn những kiến thức hay :D
    Tks thớt đã chia sẻ :)
  5. Ncn

    Ncn Thành viên cấp 1

    Hồi tối mò thiết kế lại mấy skin Rainmeter mà k thấy bài này, mã màu toàn chỉnh trong PTS rồi copy qua thử từng cái rõ khổ.
  6. Đức Biks

    Đức Biks Thành viên cấp 1

    Tuyệt vời :D
  7. HOÀNG HƯƠNG THỦY

    HOÀNG HƯƠNG THỦY Thành viên cấp 1

    thanks, jo đã hiểu
  8. ducbito

    ducbito Thành viên cấp 1

    Đang bận em đặt gạch hóng bác cái tối về check in
    thank bác nhé !
  9. tn_nguyễn

    tn_nguyễn Thành viên cấp 1

    đúng cái đang cần..thank bác!
  10. kirimaru89

    kirimaru89 Thành viên cấp 1

    rất bổ ích. Thanks :D
  11. mypolice

    mypolice Mới đăng kí

    bookman
  12. dookie

    dookie Thành viên cấp 2

    Cái này là chuyên ngành của mình.giờ 2 năm ko đụng đến quên hết rồi @@
  13. Rainy Day

    Rainy Day Thành viên cấp 2

    Rất thú vị :-bd
    Nhưng từ đây trở về sau là cho lập trình web phải ko bác :D
  14. Thế Hùng

    Thế Hùng Thành viên cấp 2

    lấy mấy cái mã này về sửa code trong điện thoại quá ngon luôn :))
  15. Thiên Ma

    Thiên Ma Lãng du VietDesigner

  16. Montgomery1833

    Montgomery1833 Thành viên cấp 2

    Chuẩn quá đê...:)
  17. K4G4

    K4G4 Thành viên cấp 1

    hệ thập lục phân là 16 bit thì phải sao lại 24-bit màu được nhỉ @@.
  18. Chim gõ kiến

    Chim gõ kiến Thành viên cấp 1

  19. Rainy Day

    Rainy Day Thành viên cấp 2

    K4G4 Theo kiến thức mình đã học hồi lớp 10 thì là như thế này, cứ giả sử mỗi màu là 1 số tự nhiên thì, 24-bit sẽ biểu diễn được 2^24 màu (bit là nhị nhân 0 1 đó bác ^^)
    Còn hệ thập lục phân ở trên muốn nói tới cách đánh số 0-9 và a-f, 1 màu gồm 6 chữ số => 16^6 = (2^4)^6=2^24 (giống nhau :D)
    Tóm lại thì có thể viết thế này 24-"nhị phân" = 6-"thập lục phân" :D
    YuRainy thích bài viết này
  20. tran_thom

    tran_thom Thành viên cấp 1

    Tuy chưa hiểu lắm (Vì em đang buồn ngủ :D) nhưng em đặt gạch xí chỗ, tối về tu luyện.... :D

Ủng hộ diễn đàn