Chào.
Trong bài giảng hôm nay, chúng ta sẽ nói về màu sắc.
Trước khi tôi thực sự nhảy vào, tôi chỉ muốn nhắc nhở các bạn rằng tôi là
một nhà khoa học máy tính, và nghệ thuật và thiết kế không nhất thiết phải là nền tảng cốt lõi của tôi.
Thực ra, tôi khá tệ trong việc đó.
Vì vậy, những gì tôi sẽ nói với các bạn hôm nay khi tôi nói về màu sắc
là cách tốt nhất để mã hóa màu sắc.
Thay vào đó, khi bạn đang thực sự tìm kiếm
lời khuyên về những gì các phối màu tốt nhất sẽ được.
Tôi sẽ hướng dẫn các bạn đến những nơi khác nhau trên mạng và
để các bạn sử dụng chuyên môn của riêng mình để tìm ra điều gì tốt nhất với nhau.
Nhưng hãy bắt đầu với cách chúng tôi sử dụng màu sắc trên trang web của bạn.
Chúng ta nói về ba quy ước màu cơ bản khác nhau,
những quy ước chính mà mọi người sử dụng.
Công ước chỉ là một từ khác để chỉ đề xuất.
Đó không phải là một quy luật.
Anh không cần phải tuân theo luật lệ mà tôi sẽ cho anh.
Đó chỉ là cách mà hầu hết các lập trình viên lập trình để
họ có thể hiểu những gì bạn đang cố gắng làm, khi họ nhìn vào mã của bạn.
Một cách mà bạn cn thêm màu sắc là chỉ đơn giản là sử dụng từ tiếng Anh.
Màu xanh, đỏ, vàng, vv
Những công việc này, và chúng sẽ hiển thị tốt trên trang của bạn.
Vấn đề là, nó không nhất quán trên các trang.
Những gì là màu vàng đối với một trình duyệt không phải là chính xác cùng một
màu vàng với một trình duyệt khác.
Vì vậy, nói chung, chúng tôi tránh tên màu khi dự án cuối cùng của bạn đang đến.
Khi bạn chỉ cần mã hóa và hack đi,
bạn chỉ muốn bật một cái gì đó lên màn hình.
Không có vấn đề gì.
Sử dụng màu xanh hoặc đỏ hoặc vàng nhưng sau đó sau đó những gì bạn sẽ muốn làm.
Nó đã thay đổi khi hai quy ước khác tôi sẽ nói về.
Cái đầu tiên được gọi là hệ thập lục phân. Hệ
thập lục phân bạn có thể nhận ra phần thập phân,
đó là cách chúng ta đếm từ 0 đến 9. Hệ
thập lục phân chỉ có nghĩa là chúng có mười sáu chữ số thay vì mười.
Vì vậy, bạn có thể sử dụng từ 0 đến 9, nhưng sau đó cũng
là A, B, C, D, E, và F. Và F giống như số mạnh nhất, mạnh nhất bạn có thể sử dụng.
Khi bạn thực hiện hệ thập lục phân, nó luôn luôn được thiết lập như nhau,
nơi bạn có một dấu pound theo sau là ba hoặc sáu chữ số.
Ví dụ tôi có ở đây cho bạn là sáu chữ số.
Và cách nó hoạt động là bạn có một giá trị màu đỏ, xanh lá cây và xanh dương, và
con số càng lớn, bạn sẽ thấy nhiều màu đỏ, xanh lá cây, hoặc xanh dương.
Đây là ví dụ của tôi.
Tôi có một ví dụ về màu xanh, đỏ, nhưng
cũng có màu vàng bởi vì tùy thuộc vào bao nhiêu các giá trị khác nhau
mà bạn đưa vào, nó có thể thay đổi màu sắc sẽ hiển thị trên màn hình của bạn.
Bây giờ hệ thập lục phân có lẽ là cách phổ biến nhất để làm màu sắc khi bạn
nhìn vào rất nhiều trang của mọi người, nhưng một cách khác đang xuất hiện rất nhiều là RGB.
Một lần nữa, đó là cùng một ý tưởng rằng chúng ta có màu đỏ, xanh lá cây, và xanh dương,
nhưng thay vì sử dụng các loại số thập lục phân kỳ lạ này, từ 0 đến F,
thay vào đó bạn đang sử dụng các số giữa 0 và 1.
Vì vậy, ở đây tôi đã làm điều tương tự, tôi vừa làm một, một, và một, một.
Tôi có thể dễ dàng đặt 0,5, 0,8, 0,6, và
điều đó sẽ thay đổi sức mạnh của màu sắc.
Vì vậy, ở đây tôi có rgb (0,0,1).
Một trong những lý do mà mọi người đã chuyển sang rgb là có
một lựa chọn khác gọi là rgba.
Và trong thời gian dài nhất tôi thực sự phải suy nghĩ về ý nghĩa của nó và
những gì nó là sự minh bạch alpha.
Vì vậy, bạn có một giá trị thứ tư ở cuối mà nói rằng, bạn biết gì không?
Tôi muốn sử dụng màu xanh này, nhưng tôi muốn làm cho nó một chút nhìn xuyên qua.
Vì vậy, khi nó xuất hiện,
nếu tôi thực sự làm cho nó bằng không, nó sẽ được hoàn toàn nhìn xuyên qua.
Nếu tôi đã cung cấp cho nó một giá trị cuối cùng của một,
nó sẽ trông giống như giá trị rgb thông thường.
Bây giờ một trong những điều thú vị cần lưu ý là, nếu bạn đang xem video này
ngay bây giờ và có ai đó bên cạnh bạn đang xem video trên màn hình của họ.
Nó hoàn toàn có thể là nếu bạn nhìn qua, Nó trông khác nhau.
Bạn cần phải nhớ rằng các màn hình khác nhau có thể hiển thị màu sắc theo
nhiều cách khác nhau, được chứ?
Vì vậy, tôi muốn cho bạn thấy một ví dụ thực sự nhanh chóng trên web
về cách bạn có thể nhìn thấy một số màu sắc khác nhau và cách chúng hoạt động.
Những gì tôi đưa ra ở đây là trang web khóa học của tôi và nó không sao nếu bạn không thể nhìn thấy nó.
Tôi biết nó hơi nhỏ.
Những gì tôi muốn cho bạn thấy là tôi sử dụng một cái gì đó gọi là Inspect Element
để thực sự loại nhìn vào trang của tôi, và nhìn vào màu sắc,
và một cách thực sự nhanh chóng cho tôi để xem làm thế nào tôi có thể làm cho nó trông khác nhau.
Vậy tôi có con chuột, ngay đây.
Tôi sẽ nhấp chuột phải, và tôi sẽ đi xuống Inspect Element.
Bây giờ đối với một số bạn, phần này có thể bật sang một bên hoặc bên dưới.
Bạn có thể di chuyển nó xung quanh bằng cách nhấp vào nút này ở đây.
Nhưng như bạn có thể thấy tôi sẽ làm nổi bật h1 của tôi và đi xuống đây để khoảng thời gian.
Và bạn có thể giống như oh, có màu tôi đang sử dụng.
Tôi sẽ đi trước và nhấp vào điều này, và như bạn có thể thấy
tôi thực sự có thể trong thời gian thực, loại chơi với những màu sắc khác nhau tôi muốn.
Tôi giống như cái đó tốt hơn màu xanh và
bạn có thể thấy rằng nó đang thay đổi giá trị thập lục phân cho tôi ở dưới đó.
Vì vậy, nếu tôi muốn,
tôi có thể tìm thấy màu sắc hoàn hảo, màu xanh lá cây này không phải là màu hoàn hảo.
Tôi có thể tìm thấy màu sắc hoàn hảo, lấy giá trị thập lục phân đó và
đưa vào tờ phong cách của tôi.
Họ cũng cung cấp cho bạn tùy chọn giá trị RGBA là tốt để
bạn có thể làm điều đó theo cách bạn muốn.
Tôi thích sử dụng yếu tố mong đợi để loại chơi với màu sắc bởi vì nó dễ
dàng hơn nhiều khi bạn có thể nhìn thấy những gì đang xảy ra khi bạn đang thiết kế nó.
Nếu bạn muốn kiểm tra cái gì khác tôi thậm chí có thể đi xuống đây, mỗi điều khi bạn làm
nổi bật bạn có thể thêm màu sắc, làm những việc khác nhau dọc theo cùng một dòng.
Vì vậy, tôi sẽ không đề nghị điều này, nhưng tôi sẽ thêm một màu nền.
Và như bạn có thể thấy, họ có những cái tên thực sự.
Bởi vì nó rất khó xảy ra rằng nếu bạn di chuyển qua các
giá trị thập lục phân khác nhau bạn có bất kỳ ý tưởng gì nó đang nói về.
Và thay vì thực sự sử dụng từ màu be, một lần nữa tôi có thể nhấp vào hộp đó.
Nó sẽ bật lên giá trị thập lục phân cho tôi.
Vì vậy, đây là nơi nó có thể trở nên rất vui vẻ và rất tệ,
bởi vì bạn có thể bắt đầu rơi xuống cái hố thỏ này.
Và bạn giống như, oh tôi thích màu này.
Không có màu này tốt hơn.
Bạn đang bắt đầu, bạn đang bắt đầu, chỉ cần chọn một màu, chơi với nó, và
tiếp tục đi với nó.
Nhưng chúng ta hãy quay lại.
Một trong những điều xảy ra khi người ta sử dụng màu sắc là có
xu hướng thực sự tự nhiên muốn sử dụng màu sắc để nhấn mạnh điều gì đó, hoặc
giải thích điều gì đó quan trọng như thế nào.
Bạn có thể đã thấy khi bạn điền vào các biểu mẫu mà nó nói rằng
hãy chắc chắn điền vào tất cả những gì có màu đỏ.
Vâng, đây có thể là một vấn đề thực sự khi nói đến khả năng tiếp cận.
Và tôi muốn bạn chắc chắn rằng bạn đang cố gắng suy nghĩ về
cách thích hợp nhất để sử dụng màu sắc của bạn khi bạn đang thiết kế trang của bạn.
Và một trong những điều bạn cần phải suy nghĩ là nó không đủ để suy nghĩ,
oh ai đó có thể sử dụng trình đọc màn hình.
Tôi sẽ sử dụng thẻ HTML để thực sự đảm bảo
rằng họ có thể chọn ngữ nghĩa từ trang.
Không, có rất nhiều người xem xét trang web của bạn không bị mù về mặt pháp lý.
Thay vào đó, chúng bị khiếm thị hoặc chỉ bị mù màu.
Họ, nhiều người bị mù màu hơn bạn thực sự nhận được.
Vì vậy, bạn muốn chắc chắn rằng khi bạn đang sử dụng trang của bạn,
bạn đang nghĩ về việc liệu màu sắc đang truyền đạt ý nghĩa hay chỉ là phong cách.
Vì vậy, suy nghĩ về độ tương phản màu sắc của bạn và những gì màu tương phản nó
khi bạn nhìn vào một trang là văn bản trên một màu sắc tốt cho nền?
Hầu hết chúng ta đều biết một cách trực giác khi nào một cái gì đó có độ tương phản màu sắc thực sự kém.
Chúng ta đang nheo mắt vào nó.
Nhưng thành thật mà nói,
rất ít người trong chúng ta biết mức độ thực sự chính xác của nơi bạn cần đến.
Vì vậy, những gì bạn có thể làm là bạn có thể sử dụng các công cụ khác nhau
để giúp bạn định lượng độ tương phản giữa văn bản và màu nền của nó.
Tôi đã đặt trong hai liên kết ở đây.
Wave.waveaim.org, và bộ kiểm tra độ tương phản sóng.
Và tôi sẽ chỉ cho bạn một ví dụ nhanh về cách bạn có thể sử dụng chúng
để kiểm tra một trang.
Vì vậy, tôi đi qua đây, và tôi có sóng. webbing.org.
Và bạn có thể tiếp tục và bạn có thể nhập bất kỳ URL nào bạn muốn ngay tại đây.
Tôi sẽ truy cập vào trang web cá nhân của tôi từ UMISH,
điều này có thể thay đổi vào thời điểm này xuất hiện.
Và, như bạn có thể thấy, bạn có thể đi qua đây và nó sẽ kiểm tra phong cách của bạn,
nó sẽ kiểm tra HTML khác nhau của bạn.
Nhưng nếu bạn kiểm tra nơi con chuột của tôi, bạn cũng có thể kiểm tra độ tương phản.
Và nó sẽ đi vào và nó sẽ nói, không, nó có vẻ tốt.
Không có vấn đề tương phản màu nào được phát hiện.
Bạn sẽ ngạc nhiên bao nhiêu, mặc dù, bạn sẽ nhận được ví dụ.
Chúng có thể cực kỳ cầu kỳ và nếu nó thực sự là một cái gì đó mà bạn cảm thấy mạnh mẽ
mà bạn có thể nhìn thấy, hoàn toàn, gắn bó với nó.
Nhưng anh muốn nhận lời đề nghị của họ với một hạt muối.
Một điều tôi thực sự muốn nói với các bạn một lần nữa,
chỉ là ý tưởng không sử dụng màu sắc một mình để truyền đạt ý nghĩa.
Đây là một loại biểu đồ thanh điển hình cho mọi người sử dụng màu sắc để nói, hey đây là
bao nhiêu chia sẻ là Apple iPhone, Pre Palm, những thứ khác nhau dọc theo dòng đó.
Vì vậy, chúng ta hãy nhìn vào cùng một biểu đồ nhưng trong thang màu xám.
Và đột nhiên bạn có thể thấy nó khá vô dụng đối với bất cứ ai thực sự cố gắng
chọn ra những phần này ở giữa nơi mà màu sắc cực kỳ giống nhau.
Thay vào đó, nếu bạn đang sử dụng một biểu đồ như thế này,
tôi không nói rằng bạn không thể, tôi đang nói chắc chắn rằng bạn đang cung cấp các lựa chọn thay thế.
Đảm bảo rằng bạn có văn bản thay thế hoặc bạn có chú thích hoặc
nơi nào khác mà mọi người có thể liên kết đến để có được thông tin này.
Được rồi, tôi biết là tôi đã không nói nhiều về những màu sắc khác nhau mà bạn có thể
sử dụng, hoặc những màu khác nhau đi cùng nhau,
bởi vì đó không phải là điều tôi cần phải giảng dạy cho bạn.
Đó là một cái gì đó mà bạn có thể tự mình đi và học hỏi.
Những gì tôi muốn bạn hiểu là những quy ước màu sắc khác nhau hoạt động như thế nào.
Làm thế nào mà bạn biết bạn có thể sử dụng hệ thập lục phân hoặc RGB, RGBA, hoặc
thậm chí các từ chính nó, nhưng bạn muốn loại bỏ điều đó.
Cuối cùng khi bạn xong việc,
khi bạn đã có màu sắc của mình, đừng quá gắn bó với chúng.
Bởi vì bạn sẽ ngạc nhiên về tần suất,
khi bạn kiểm tra trang web của bạn bằng cách sử dụng một bộ kiểm tra tương phản, rằng những gì bạn nghĩ trông
thực sự tuyệt vời thực sự không phải là một cái gì đó có thể truy cập được với tất cả mọi người.
Vì vậy, vui chơi với màu sắc.
Sử dụng phần tử kiểm tra.
Mọi người đều thích chơi với những yếu tố thiết kế khác nhau của trang của bạn.
Và tôi hy vọng rằng bạn đã học được một cái gì đó hữu ích ở đây khi bạn tiếp tục
lập trình, và tiếp tục tạo kiểu trang web của bạn.