Màu sắc của các trang chính của Yandex. Tự động phát hiện màu - kinh nghiệm của nhóm Yandex. Bạn thực sự muốn gì?

Xin chào các độc giả thân mến của trang blog. Tôi tiếp tục đăng các bài viết ở mục “”. Hôm nay tôi muốn nói về màu sắc trong mã HTML và CSS, giải thích cho những người chưa biết cách thiết lập chúng, cách chúng được hình thành, cách sử dụng các chương trình được thiết kế đặc biệt cho việc này để tìm kiếm hoặc nắm bắt màu mong muốn và nhiều hơn nữa.

Vấn đề chỉ định sắc thái mong muốn có thể đặc biệt liên quan đến quản trị viên web mới làm quen, khi các mã được cung cấp trong tài liệu web (ví dụ: #f3af6c) không hoàn toàn rõ ràng và không rõ thông tin này có thể được lấy bằng cách nào và ở đâu (tìm ở đâu). tìm bảng màu Html và CSS) cũng như cách sử dụng chúng để thiết kế văn bản hoặc bất kỳ khối nào khác của tài liệu web.

Hãy để tôi nhắc bạn rằng chúng ta đã làm quen với các nguyên tắc cơ bản được sử dụng trong . Chúng tôi cũng đã xem thẻ và học hỏi, học hỏi rất nhiều điều cũng như cách thực hiện.

Mã và bảng màu RGB cơ bản

Điều khá hợp lý là ngôn ngữ đánh dấu siêu văn bản và các biểu định kiểu xếp tầng có khả năng tô màu tài liệu, vì nếu không các trang web sẽ rất nhàm chán và đơn điệu. Để làm điều này, họ thường sử dụng một mô hình có tên RGB (từ viết tắt bắt nguồn từ ba từ tiếng Anh có nghĩa là đỏ, lục và lam).

Trong mô hình RGB chỉ có ba màu được sử dụng (rõ ràng là đỏ, lục và lam), mỗi màu có thể được biểu thị bằng một mức độ sáng khác nhau. Đối với mỗi kênh (đỏ, lục và lam), bạn có thể chọn một trong 256 mức độ sáng có thể. Số 256 được lấy vì rất nhiều giá trị sắc thái có thể được mã hóa trong một byte thông tin.

Theo đó, đối với tài liệu web của chúng tôi, chúng tôi có thể chọn bất kỳ màu nào trong số rất nhiều màu có thể có (256*256*256). Ví dụ: để có được màu đen, cả ba kênh của bảng màu phải có giá trị độ sáng bằng 0 và để có được màu trắng, đỏ, lục và lam phải có độ sáng tối đa.

Bây giờ chúng ta hãy thử tìm hiểu cách đặt độ sáng ở mỗi kênh và chúng ta có bao nhiêu khả năng cho việc này?

Trên thực tế, có hai cách chính:

cài đặt bằng cách ghi lại độ sáng cho từng kênh (đỏ, lục và lam) theo ký hiệu thập lục phân
nhiệm vụ bằng cách nhập tên màu trong mã tài liệu web

Hãy bắt đầu với những cái phức tạp và cố gắng tìm ra cách viết màu theo mã thập lục phân. Ví dụ: nếu chúng ta muốn viết mã cho màu trắng trong hệ thập phân, chúng ta sẽ nhận được mã 256 256 256 và cho màu đen - 0 0 0. Ở đây, có lẽ mọi thứ đều rõ ràng.

Nhưng trong hệ thống số thập lục phân, ngoài chữ số Ả Rập, sáu chữ cái đầu tiên của bảng chữ cái Latinh cũng được sử dụng và có nét đặc trưng riêng trong việc hình thành số. Tôi không nghĩ rằng đáng để đi sâu hơn vào vấn đề này, nhưng để làm ví dụ, tôi sẽ nói rằng màu trắng cho Html có thể được đặt như thế này: #ffffff và màu đen như thế này: #000000. Những thứ kia. 00 tương ứng với 0 trong ký hiệu thập phân và ff tương ứng với 256.

Những thứ kia. Mỗi kênh màu RGB trong mã CSS được phân bổ hai chữ số thập lục phân, do đó, các mục nhập giá trị màu bao gồm sáu chữ số (hoặc các chữ cái tương đương với các chữ số trong hệ thập lục phân), đứng trước dấu băm “#”. Nó khá đơn giản.

Ví dụ: trong bảng bên dưới về các sắc thái đơn giản nhất, các mục thập lục phân của chúng sẽ trông như thế này:

Đương nhiên, bạn không bắt buộc phải nghĩ ra và so sánh các mã bóng thập lục phân với những mã mà bạn muốn thấy trên dự án Internet của mình. Bạn có thể chọn màu cho trang web trong bất kỳ trình chỉnh sửa đồ họa nào (thậm chí trong ), nơi chúng chắc chắn sẽ hiển thị cho bạn bản ghi của sắc thái này ở định dạng RGB hoặc tìm bảng màu Html và sao chép mã bạn cần từ đó.

Màu Yandex - lựa chọn bảng màu RGB trong kết quả Yandex

Bạn không muốn sử dụng trình chỉnh sửa đồ họa cho mục đích này hoặc tìm bảng có mã? Không có gì. Cuộn xuống trang này một chút và bạn sẽ tìm thấy rất nhiều chương trình cụ thể và được thiết kế riêng để làm việc với màu sắc trong mã Html hoặc CSS.

Nếu điều này không phù hợp với bạn, thì chỉ cần mở nó và nhập nó vào thanh tìm kiếm yêu cầu với tên của bóng râm đó, mà bạn quan tâm (mặc dù bạn chỉ cần nhập: xám-nâu-mâm xôi).

Kết quả là, ở đầu kết quả tìm kiếm, bạn sẽ thấy bảng bảng Yandex.Colors rất tiện lợi để chọn màu cho trang web của bạn. Ở góc dưới bên phải của bảng màu này, bạn có thể sao chép mã thập lục phân của màu bạn cần (có dấu thăng ở phía trước), sau đó bạn chỉ cần dán vào đúng vị trí trong tài liệu web của mình.

Tất cả điều này được hiện thực hóa nhờ cái gọi là, được thiết kế để hỗ trợ các nhà thiết kế và thiết kế bố cục.

Bạn có thể đặt màu trong thanh tìm kiếm Yandex, cả ở dạng tên và dạng mã - kết quả là bạn sẽ thấy nó trông như thế nào trên màn hình và nếu cần, bạn có thể nhận được ký hiệu thập lục phân của nó.

Trên thực tế, công cụ này cũng có thể hữu ích cho những người dùng Internet thông thường, chẳng hạn như để hiểu đồ nội thất có màu lốm đốm màu nâu bạc-mâm xôi-mâm xôi sẽ trông như thế nào. Bạn cũng có thể xem video về cách sử dụng thầy phù thủy Yandex này:

Một số màu sắc trong ngôn ngữ đánh dấu siêu văn bản có thể được chỉ định bằng cách sử dụng các từ, ví dụ: “đen” có nghĩa là đen, “trắng” có nghĩa là trắng, v.v. Nhưng có một lưu ý. Do đó, việc đặt màu chỉ có thể thực hiện được đối với một số lượng hạn chế trong số chúng.

Chà, trước tiên, có lẽ rõ ràng là bạn sẽ không thể biểu thị tất cả 16 triệu sắc thái có thể có trong sơ đồ RGB bằng cách sử dụng các từ trong bất kỳ bảng nào (bạn sẽ cảm thấy mệt mỏi khi cuộn qua nó).

Thứ hai, trong trình xác thực W3C cho đặc tả Ngôn ngữ đánh dấu siêu văn bản 4.01 (hiện tại nó được hỗ trợ đầy đủ bởi tất cả các trình duyệt có thể có), chỉ có 16 màu được xác định, có thể được chỉ định trong mã Html hoặc CSS bằng các từ:

Bạn cũng có thể tìm thấy các bảng màu chi tiết hơn nhiều có thể được chỉ định bằng các từ trong mã, nhưng có khả năng trong một số trình duyệt, màu này sẽ không được hiển thị chính xác.

Do đó, ngoại trừ bảng 16 sắc thái cơ bản vừa nêu ở trên, tất cả các màu khác phải được chỉ định trong mã của tài liệu web chỉ sử dụng ký hiệu thập lục phân, để tránh sự dư thừa không cần thiết.

Sử dụng mã màu và tên trong quản trị trang web

Hiện tại, tất cả thiết kế bên ngoài của trang web đều được thực hiện bằng CSS (các biểu định kiểu xếp tầng) và việc chỉ định mã màu trực tiếp trong Html là cực kỳ hiếm, nhưng điều đó vẫn xảy ra. Ngoài ra, có những trường hợp không thể sử dụng biểu định kiểu CSS bên ngoài vì lý do này hay lý do khác (ví dụ: trong trường hợp tạo bản phát hành).

Do đó, tôi vẫn sẽ đưa ra một ví dụ về cài đặt màu trong Html, mặc dù trong trường hợp này chúng đã được sử dụng rồi. các thẻ không được trình xác thực W3C đề xuất. Ví dụ: trước đây màu nền được đặt trong thẻ “BODY” thông qua thuộc tính “bgcolor” và văn bản được tô màu ngay lập tức trên toàn bộ trang web bằng thuộc tính “văn bản”.

Ví dụ: việc đặt các sắc thái cần thiết trong trường hợp này có thể trông như thế này:

Nội dung tài liệu

Kết quả là một trang web có nền màu be và phông chữ màu xanh đậm. Trước khi CSS được đưa vào sử dụng, để thay đổi màu phông chữ của bất kỳ phần văn bản riêng lẻ nào, thẻ “FONT”, không còn được trình xác thực W3C khuyên dùng, đã được sử dụng rộng rãi, trong đó thuộc tính “color” cùng tên được đưa vào đặt màu:

phần văn bản cần tô màu xanh

Để xem kết quả của mã được viết trên màn hình, bạn cần lưu tệp này với phần mở rộng html, sau đó mở nó trong bất kỳ trình duyệt nào thuận tiện cho bạn.

Bây giờ, để bố cục trang web của bạn được coi là hợp lệ, bạn nên đặt màu của các thành phần trong biểu định kiểu xếp tầng thông qua các quy tắc và thuộc tính thích hợp. Các quy tắc chèn như vậy vào CSS không khác với các quy tắc được mô tả ở trên.

Như bạn có thể thấy, đôi khi để rút ngắn ký hiệu màu sắc, không phải sáu ký tự được sử dụng mà chỉ sử dụng ba ký tự, nếu chúng khớp với mỗi kênh - “#6с0” thay vì “#66с00”.

Chọn màu từ bảng màu của một chương trình đặc biệt hoặc chụp nó từ màn hình

Như tôi vừa viết ở trên, bảng màu RGB (đỏ, lục, lam) được sử dụng ở mọi nơi. Đối với mỗi màu trong số ba màu chính, có 256 cấp độ - từ 0 đến 255 (nếu chúng ta chuyển đổi các giá trị này sang hệ thập lục phân, chúng ta sẽ nhận được - từ 00 đến FF).

Bởi vì Chúng ta có ba màu chính, từ sự kết hợp của tất cả các sắc thái khác được hình thành, khi đó ký hiệu thập lục phân sẽ trông giống như thế này: 99FF66 (màu xanh lục). Bằng cách thêm # vào trước nó, chúng ta nhận được mã #99FF66, mã này có thể được sử dụng cả trong Html và tệp kiểu. Không cần phải nói rằng bạn không cần phải tự mình tìm ra và ghi nhớ tất cả những điều vô nghĩa này.

Để làm điều này, bạn có thể sử dụng một chương trình đặc biệt cho phép bạn chọn màu mong muốn trên bảng màu (hoặc chụp nó từ màn hình công cụ như pipet) và nhận ngay mã của nó. Bạn không cần phải có chương trình mà chỉ cần truy cập Yandex và nhập tên của bất kỳ màu nào vào thanh truy vấn (tôi đã viết về điều này ngay ở trên).

Dưới đây là danh sách các chương trình cho phép bạn thực hiện đầy đủ tất cả những điều này:

Chúc bạn may mắn! Hẹn gặp lại bạn sớm trên các trang của trang blog

Bạn có thể quan tâm

Danh sách trong mã Html - thẻ UL, OL, LI và DL
Cách chèn link và hình ảnh (ảnh) vào HTML - thẻ IMG và A
Cách tạo siêu liên kết (A, Href, Target trống), cách mở siêu liên kết trong cửa sổ mới trên trang web và cũng tạo liên kết hình ảnh bằng mã Html
Phông chữ (Khuôn mặt, Kích thước và Màu sắc), Thẻ Blockquote và Pre - định dạng văn bản cũ ở dạng HTML thuần túy (không sử dụng CSS)
Các bảng trong Html - Thẻ Table, Tr và Td, cũng như Colspan, Cellpadding, Cellspacing và Rowspan để tạo chúng
Biểu mẫu Html cho trang web - thẻ Biểu mẫu, Nhập và chọn, Tùy chọn, Vùng văn bản, Nhãn và các thẻ khác để tạo các thành phần biểu mẫu web Select, Option, Textarea, Label, Fieldset, Legend - Thẻ Html cho dạng danh sách thả xuống và trường văn bản
Img - Thẻ Html để chèn ảnh (Src), căn chỉnh và ngắt dòng văn bản xung quanh ảnh (align), cũng như đặt nền (background)
Chỉ thị nhận xét và Doctype trong mã Html, cũng như khái niệm về các phần tử khối và nội tuyến (thẻ)
Ngôn ngữ đánh dấu siêu văn bản Html là gì và cách xem danh sách tất cả các thẻ trong trình xác nhận W3C
Các ký tự khoảng trắng và định dạng mã của chúng trong Html, cũng như các ký tự khoảng trắng đặc biệt không ngắt và các cách ghi nhớ khác

Khi tạo Yandex, các nhà phát triển đã đảm bảo rằng nó dễ sử dụng và dễ hiểu.

Không có gì thừa trong thiết kế và cài đặt phông chữ, vì vậy người dùng có thể nhanh chóng hiểu đó là gì.

Mỗi phiên bản của trình duyệt Yandex đều được thiết kế đẹp mắt, thiết kế được thực hiện bởi các chuyên gia giỏi nhất. Nhưng có những người dùng không thích sự đơn điệu. Họ sẽ nhanh chóng cảm thấy nhàm chán với ngay cả những khung cảnh đẹp nhất, họ sẽ muốn “thay đổi hoàn cảnh” và “thổi hồn” vào công việc của mình bằng trình duyệt web.

Điều này không có gì sai cả, nếu không thì tại sao nhà phát triển lại đưa ra chức năng thay đổi giao diện? Vì vậy, bất kỳ ai không thích nền tiêu chuẩn hoặc cảm thấy nhàm chán với sự đơn điệu đều có thể thay đổi giao diện ứng dụng của mình.

Để thay đổi giao diện của trình duyệt Yandex, bạn chỉ cần mất tập trung trong vài phút:

Bật trình duyệt web của bạn.
Mở một tab mới (bạn có thể thực hiện việc này trong phần cài đặt bên cạnh thanh dấu trang).
Một “Bảng điều khiển nhanh” sẽ xuất hiện trước mặt bạn. Bạn cần đi xuống cuối màn hình và nhấp vào biểu tượng “Thay đổi nền”.
Sau đó, một danh sách sẽ mở ra với nhiều thiết kế trình duyệt khác nhau, trong đó bạn cần chọn thiết kế mà bạn thích nhất. Sau khi chọn bản vẽ thích hợp, nhấp vào nút “Xong”.

Bạn không phải lo lắng về việc thay đổi hình nền mỗi lần - bạn không cần phải làm vậy. Giờ đây, mỗi khi bạn vào “Express Panel” (ngay cả khi bạn đóng và mở lại Yandex), bạn sẽ được thưởng thức một bức tranh thú vị. Và làm việc với tinh thần cao sẽ thú vị và dễ dàng hơn rất nhiều!

Có thể đặt thứ gì đó “của riêng chúng ta” làm nền không?

Tất nhiên, các nhà phát triển Yandex không thể làm hài lòng mọi người dùng bằng những hình ảnh mà họ cung cấp để thay đổi nền. Nếu bạn xem qua danh sách đầy đủ các thiết kế có sẵn và không tìm thấy thứ gì phù hợp, đừng thất vọng.

Những trường hợp như vậy được cung cấp bởi những người tạo ra Trình duyệt Yandex: bạn có thể tải xuống hình ảnh cá nhân có sẵn trên máy tính của mình. Điều này mang lại sự kiềm chế hoàn toàn cho trí tưởng tượng. Chẳng hạn, sẽ dễ chịu biết bao nếu mỗi khi vào “Express Panel” bạn lại nhìn thấy một mảnh tươi sáng của cuộc đời mình hoặc một bức ảnh của một đứa trẻ nhỏ?

Để đặt ảnh từ thiết bị của bạn làm nền, bạn cần:

kích hoạt Yandex;
mở một cửa sổ con mới;
tìm chức năng “Thay đổi nền” và nhấp vào nó;
Đằng sau hình ảnh cuối cùng có biểu tượng “+”, bạn cần nhấp vào biểu tượng đó;
chọn ảnh bạn muốn xem trong trình duyệt và nhấn enter (“Enter”).

Bây giờ bạn có thể đặt hoàn toàn bất kỳ hình ảnh nào được lưu cho đến lần thay đổi tiếp theo.

Thuật toán mới để chọn màu cho thẻ quảng cáo ứng dụng trong Yandex Launcher.

Các dịch vụ Yandex khác nhau hoạt động với màu sắc để giải quyết các vấn đề về giao diện: làm nổi bật các khối thông tin và phản hồi của đối tượng, quản lý sự chú ý và tạo hệ thống phân cấp trực quan.

Ví dụ về sử dụng thuật toán chọn màu trong tìm kiếm và Yandex.Music

Tùy thuộc vào nhiệm vụ, việc lựa chọn màu sắc có thể yêu cầu tính toán phức tạp. Nhưng điều đó xảy ra là việc đạt được kết quả mong muốn sẽ dễ dàng hơn nhiều.

Chúng tôi có thẻ quảng cáo ứng dụng trong Yandex Launcher: xếp hạng, mô tả và nút “Cài đặt”. Đây là những đề xuất theo ngữ cảnh - chúng mở ở đầu danh sách ứng dụng hoặc trong một thư mục trên màn hình nền.

Triển khai ban đầu

Màu nền của thẻ được chọn tự động dựa trên biểu tượng; nút có màu trắng mờ. Thuật toán đã cố gắng xác định màu chính của biểu tượng bằng cách sắp xếp các pixel theo tông màu. Cách tiếp cận này không phải lúc nào cũng mang lại kết quả tốt đẹp, nó có nhược điểm:

xác định màu sắc không chính xác;
màu sắc “bẩn” do tính trung bình;
những nút bấm buồn tẻ, những tấm thẻ nhàm chán.

Ví dụ về thẻ vấn đề

Bạn thực sự muốn gì?

Tấm thiệp lẽ ra phải trở thành sự tiếp nối thực sự của biểu tượng và màu sắc phải phong phú và tươi sáng. Tôi muốn tạo cảm giác rằng tấm thiệp được làm bằng tay một cách cẩn thận và không bị rơi vào thứ gì đó được tạo ra một cách bất cẩn một cách tự động.

Bạn luôn muốn làm cho nó đẹp hơn nhưng nguồn lực thì không phải là vô hạn. Không có kế hoạch phân bổ một nhóm viết thư viện thần kỳ để xác định màu sắc. Vì vậy, nhiệm vụ là cải thiện thuật toán xác định màu sắc với nỗ lực tối thiểu, tìm ra cách tô màu thẻ đẹp mà không cần phát minh ra tàu vũ trụ.

Vào thứ bảy, tôi dọn dẹp trình soạn thảo mã, lấy HTML5 và Canvas ra và bắt đầu nảy ra ý tưởng. Vào thứ Hai, tôi đến gặp nhóm với một lời đề nghị.

Thuật toán phát hiện màu mới

Bước 1. Lấy biểu tượng. Chúng tôi loại bỏ các pixel màu trắng, đen và trong suốt.

Biểu tượng gốc → Hình vuông pixel được lọc

Bước 2. Chúng tôi giảm hình ảnh thu được xuống còn 2 × 2 pixel (đã tắt tính năng khử răng cưa). Kết quả là chúng ta có được bốn màu biểu tượng. Nếu hình ảnh gốc đồng nhất, chúng có thể lặp lại - không có vấn đề gì lớn.

Kết quả sau bước thứ hai. Biểu tượng nguồn → Màu sắc

Chúng tôi đã tắt chức năng khử răng cưa để màu sắc không bị trộn lẫn và trở nên “bẩn”.

Trên thực tế, nó diễn ra như sau: hình vuông được chia thành bốn phần, chúng tôi lấy pixel ở giữa từ hàng trên cùng của mỗi phần tư. Trong quá trình triển khai, mọi thứ đều đơn giản: chúng tôi thậm chí không cần một mẫu hình ảnh thực sự hoặc làm việc với đồ họa nói chung. Chúng tôi lấy các pixel có vị trí mong muốn từ mảng một chiều thu được sau bước đầu tiên.

Bước 3. Hầu như mọi thứ đã sẵn sàng. Chỉ còn lại một chút: chúng tôi lấy ra các màu thu được, chuyển đổi chúng thành HSL và sắp xếp chúng theo độ sáng (L). Chúng tôi vẽ thẻ.

Sơ đồ ánh sáng:

nền - màu sáng nhất;
nút - gần ánh sáng nhất;
văn bản là tối nhất.

Lược đồ tối (nếu có hai hoặc nhiều màu tối):

nền - màu tối nhất;
nút - gần nhất với bóng tối;
văn bản là nhẹ nhất.

Áp dụng màu sắc, chúng tôi kiểm tra độ tương phản: chênh lệch Độ sáng giữa nền và nút ≥ 20; giữa nền và văn bản ≥ 60. Nếu không khớp thì sửa lại.

Các thẻ kết quả. Biểu tượng nguồn → Màu sắc → Thẻ

Và một số thẻ ví dụ khác:

Kết quả

Chúng tôi có những tấm thiệp đầy màu sắc, được làm từ màu biểu tượng thật, không có bất kỳ tạp chất “bẩn” nào. Bằng cách sử dụng nhiều màu sắc, tấm thiệp trông rực rỡ hơn nhiều. Điều đặc biệt thú vị là với nền đồng nhất của biểu tượng, thẻ sẽ trở thành phần tiếp theo trực tiếp của nó: đường viền giữa chúng hoàn toàn không đáng chú ý.

Và quan trọng nhất: hai ngày sau khi thuật toán mới được đề xuất, bản triển khai đầu tiên đã có sẵn trong bản dựng dành cho nhà phát triển. Chúng tôi đã thử nghiệm nó trong nhóm, đặt ngưỡng cho bộ lọc ở bước đầu tiên và cung cấp cho các trường hợp đặc biệt:

biểu tượng một màu - làm cho nền tối hơn một chút để nó không bị hợp nhất;
biểu tượng có nền - nhìn vào các pixel xung quanh các cạnh; nếu tất cả đều giống nhau thì chúng ta đặt nền thẻ giống nhau.

Thuật toán sửa đổi sẽ được đưa vào phiên bản tiếp theo. Đặc biệt cảm ơn người đứng đầu nhóm phát triển Yandex Launcher, Dima Ovcharov, vì sự quan tâm, mong muốn và sự kiên nhẫn của anh ấy. Cuối cùng - nhiều ví dụ hơn.

www.livemaster.ru

Mã và bảng màu RGB cơ bản

Bây giờ chúng ta hãy thử tìm hiểu cách đặt độ sáng ở mỗi kênh và chúng ta có bao nhiêu khả năng cho việc này?

Trên thực tế, có hai cách chính:

cài đặt bằng cách ghi lại độ sáng cho từng kênh (đỏ, lục và lam) theo ký hiệu thập lục phân
nhiệm vụ bằng cách nhập tên màu trong mã tài liệu web

Ví dụ: trong bảng bên dưới về các sắc thái đơn giản nhất, các mục thập lục phân của chúng sẽ trông như thế này:

Đương nhiên, bạn không bắt buộc phải nghĩ ra và so sánh các mã bóng thập lục phân với những mã mà bạn muốn thấy trên dự án Internet của mình. Bạn có thể chọn màu cho trang web của mình trong bất kỳ trình chỉnh sửa đồ họa nào (ngay cả trong trình chỉnh sửa trực tuyến miễn phí Pixlr Editor), nơi bạn chắc chắn sẽ được hiển thị bản ghi về sắc thái này ở định dạng RGB hoặc tìm bảng màu Html và sao chép mã bạn cần từ đó.

Màu Yandex - lựa chọn bảng màu RGB trong kết quả Yandex

Nếu điều này không phù hợp với bạn, thì chỉ cần mở Yandex và nhập vào thanh tìm kiếm yêu cầu với tên của bóng râm đó, mà bạn quan tâm (mặc dù bạn chỉ cần nhập: xám-nâu-mâm xôi).

Tất cả điều này được hiện thực hóa nhờ cái gọi là “thầy phù thủy” Yandex, được thiết kế để giúp các nhà thiết kế và thiết kế bố cục.

Sử dụng mã màu và tên trong quản trị trang web

Hiện tại, tất cả thiết kế bên ngoài của trang web đều được thực hiện bằng CSS (các biểu định kiểu xếp tầng) và việc chỉ định mã màu trực tiếp trong Html là cực kỳ hiếm, nhưng điều đó vẫn xảy ra. Ngoài ra, có những tình huống, vì lý do này hay lý do khác, không thể sử dụng các biểu định kiểu CSS bên ngoài (ví dụ: trong trường hợp tạo sự cố về danh sách gửi thư đăng ký).

Ví dụ: việc đặt các sắc thái cần thiết trong trường hợp này có thể trông như thế này:

Nội dung tài liệu

phần văn bản cần tô màu xanh

ktonanovenkogo.ru

Bảng màu RGB, cách đặt màu chính xác trong CSS và Html.

Như đã biết, để giải quyết các vấn đề về thiết kế màu sắc của văn bản, người ta sử dụng cấu trúc được chấp nhận chung RGB(đó là, Màu đỏ- Màu đỏ, Màu xanh lá– Màu xanh lá cây, và tương ứng Màu xanh da trời- Màu xanh da trời)

Bảng màu RGB liên quan đến việc chỉ sử dụng ba màu, mỗi màu có thể được thể hiện bằng một mức độ sáng khác nhau. Trong mã CSS và Html, đối với mỗi màu trong bảng màu, bạn có thể xác định một trong 256 mức độ chuyển màu có thể có.

Do đó, để thiết kế tài liệu, bạn có thể sử dụng số lượng màu khá lớn - 256-256-256. Ví dụ: để có kết quả là màu đen, cả ba màu RGB cần đặt giá trị độ sáng về 0 và ngược lại, nếu yêu cầu màu trắng thì đối với tất cả các màu bạn cần đặt độ sáng tối đa.

Chúng ta hãy xem xét kỹ hơn cách đặt độ sáng màu trong Html. Bạn có thể điều chỉnh độ sáng theo hai cách:

Bằng cách đặt mã màu bảng màu cho trang bằng mã Html, xác định độ sáng của màu RGB bằng hệ thống số thập lục phân
Bằng cách đặt màu trong CSS bằng ký hiệu thập lục phân.

Chúng ta hãy xem cách viết mã bằng cách đánh dấu thập lục phân và siêu văn bản. Đầu tiên, chúng ta hãy nhớ hệ thống số thập phân - ví dụ: nếu chúng ta cần màu trắng, thì mã của nó sẽ như sau: 256 256 256, trong trường hợp màu đen: 0 0 0.

Không giống như mã thập phân chỉ chứa số, bảng thập lục phân cũng chứa các chữ cái trong bảng chữ cái Latinh. Nghĩa là, trong trường hợp này có một hệ thống cụ thể để biểu diễn các con số. Ví dụ: màu trắng trong HTML được chỉ định là: #ffffff và màu đen: #000000. Dễ dàng nhận thấy ở đây 00 tương ứng với 0, và ff tương ứng với 256 (nếu chuyển sang số thập phân).

Như vậy, bảng màu RGB của Html, CSS được chia thành các kênh, mỗi kênh được cấp hai ký tự thập lục phân. Đó là lý do tại sao tất cả các màu trong mã Html đều được tạo từ sáu chữ cái (tương đương với các số) và chính các số đó. Cần lưu ý rằng mã được bắt đầu bằng ký hiệu “#”.

Tất nhiên, không cần phải chọn mã màu theo cách thủ công - bạn chỉ cần khởi chạy bất kỳ trình chỉnh sửa đồ họa nào, tìm màu phù hợp và xem mã màu trong hệ thống RGB trong thông tin chi tiết. Có một tùy chọn khác đơn giản hơn - bảng màu Html có mã. Hãy tìm và sao chép nó cho chính bạn.

Màu Yandex – chọn mã màu Html trong bảng màu RGB ở đầu ra Yandex.

Trong số những thứ khác, bạn có thể chọn bảng màu cho trang web của mình bằng Yandex. Để thực hiện việc này, chỉ cần nhập từ “màu” hoặc tên màu bạn cần vào thanh tìm kiếm. Theo yêu cầu, bảng màu sẽ được hiển thị ở đầu ra Yandex.Colors. mà bạn có thể chọn màu sắc. Ở góc bên phải, bạn có thể thấy mã màu ở dạng RGB và hệ thập lục phân, được sử dụng khi xây dựng tài liệu web.

Tùy chọn này từ Yandex giúp đơn giản hóa đáng kể quy trình làm việc. Rất đơn giản - nhập tên màu và lấy mã yêu cầu.

Cần lưu ý rằng một số màu trong đánh dấu siêu văn bản có thể được chỉ định bằng một từ, ví dụ: “xám” - xám, “trắng” - trắng, “đen” - đen, v.v. Tất nhiên, việc thiết lập màu trong HTML theo cách này chỉ có thể áp dụng cho số lượng màu không lớn. Quả thực, 16 triệu màu RGB không thể tìm thấy trong bất kỳ cuốn sách tham khảo hay bảng sử dụng chữ nào.

Trình xác thực W3C 4.01 (đánh dấu siêu văn bản) cung cấp một bảng gồm 16 sắc thái cơ bản, với sự trợ giúp của bảng màu CSS và Html được biên soạn và từ đó có thể chỉ định rõ màu nào có thể được chỉ định bằng từ.

Các màu khác phải được chỉ định bằng mã thập lục phân.

Tên màu của bảng màu RGB trong các trang web, cũng như thay thế màu của văn bản bằng thuộc tính màu, ví dụ và phương pháp sử dụng mã màu trong CSS và Html.

Ngày nay, thiết kế bên ngoài của các trang được thực hiện bằng cách sử dụng CSS (các biểu định kiểu xếp tầng), tuy nhiên, bạn thường có thể tìm thấy các trường hợp màu được chỉ định trong HTML.

Vì vậy, dưới đây là ví dụ về cách chỉ định màu trong HTML.

trang web của bạn

Kết quả cuối cùng sẽ là một trang có phông chữ màu tím trên nền vàng.

Trước đây, trong CSS, để chỉ định màu của văn bản trong một vùng cụ thể, cần phải nhập thẻ “FONT” (không được W3C khuyến nghị) và để đặt màu, thuộc tính “color” đã được đưa vào Nó:

văn bản cần tô màu đỏ

Để tô màu một số thành phần văn bản theo màu bạn cần, bạn cần sử dụng thẻ “FONT” để viết mã HTML trông như thế này:

Văn bản có màu phông chữ bạn muốn thay thế

Hiện tại, để có được bố cục trang web hợp lệ, tôi khuyên bạn nên sử dụng CSS khi đặt mã màu. Nhìn chung, các quy tắc chèn mã màu vào CSS không khác với những quy tắc đã thảo luận ở trên.