HTML pozwala twórcom stron internetowych korzystać z różnych kolorów na stronach internetowych, aby były atrakcyjne. Kolory są niezbędnym narzędziem do stworzenia lepszego wyglądu i wyczucia naszej aplikacji. Strony internetowe mające interaktywne kolory są najbardziej prawdopodobne i łatwo przyciągają uwagę użytkownika. Pomaga także użytkownikom komunikować się z aplikacją i rozumieć akcję. Ponadto HTML oferuje różne metody stosowania koloru do treści.

Ten przewodnik pokaże:

• Jakie są kody kolorów HTML?
• Jak zastosować kolory w HTML?
• Metoda 1: Zastosowanie kolorów w HTML przy użyciu wartości kodu Hex
• Metoda 2: Stosowanie kolorów w HTML za pomocą RGB
• Metoda 3: Zastosowanie kolorów w HTML za pomocą HSL

Zacznijmy!

Jakie są kody kolorów HTML?

Kody kolorów HTML to identyfikatory do zastosowania kolorów na stronie internetowej. Typowe kody kolorów HTML to nazwy klawiatury, „Kod szesnastkowy”,„RGB (czerwony, zielony, niebieski)", I "HSL (odcień, nasycenie, lekkość)".

Jak zastosować kolory w HTML?

W HTML istnieją trzy metody zastosowania kolorów na stronie internetowej za pomocą:

• Wartości kodu szesnastego
• RGB
• HSL

Omówimy każdy z nich za pomocą wdrożenia. Po pierwsze, konieczne jest utworzenie pliku HTML.

Przykład: Stosowanie kolorów w HTML za pomocą nazw kolorów
W pliku HTML dodaj div wewnątrz znacznika ciała. Ustaw nazwę klasy DIV jako „pojemnik". Utwórz dwa elementy na nagłówek i akapit wewnątrz Div:

WITAJ ŚWIECIE!

Akapit zaczyna się stąd…

Dodane elementy HTML będą wyglądać tak:

Uczyńmy stronę internetową bardziej atrakcyjną, stosując niektóre style. Aby to zrobić, dołącz znacznik w sekcji główki pliku HTML. Wewnątrz stylu, zastosuj style CSS dla Div w ten sposób:

Powyższy kod zawiera właściwości CSS dla klasy DIV, które są wymienione poniżej:

• ".pojemnik”Reprezentuje klasę Div.
• "kolor tła„Własność jest wykorzystywana do zastosowania koloru tła Div.
• "Margines: Auto”Stosuje margines ze wszystkich stron Div.
• "Text-Align: Center”Wyrównuje tekst w centrum div.
• "wysokość" I "szerokość”Można przypisać zgodnie z preferencjami użytkownika.

Wyjście

Jak widzimy, „kolor tła„Własność Div jest teraz zmieniona na„oset„Od białego. W ten sposób stosujemy kolory na nasze strony internetowe, używając po prostu nazw kolorów. Aby jednak skorzystać z różnych odcieni kolorów, istnieją trzy metody stosowania kolorów za pomocą kodów kolorów.

Metoda 1: Zastosowanie kolorów w HTML przy użyciu wartości kodu Hex

"Wartości kodu szesnastego”To wartości szesnastkowe, które mogą być używane do zastosowania kolorów w HTML.

Składnia
Możesz napisać kod koloru w tym formacie:

#rrggbb

W powyższej składni „RR„Jest dla czerwonego”gg”Jest dla zielonego i„nocleg ze śniadaniem”Jest dla niebieskiego.

Spójrz na poniższą tabelę reprezentującą kolor i ich wartości szesnastkowe:

Kolor	Wartość kodu szesnastkowego
Czerwony	#FF0000
Niebieski	#0000ff
Zielony	#00FF00
Biały	#ffffff
Czarny	#000000

Przykład
Kontynuujmy ten sam przykład i zmień kolor DIV na czerwony za pomocą wartości kodu szesnastkowego. Aby to zrobić, zmień wartość koloru tła z „oset" Do "#FF0000”W następujący sposób:

kolor tła: #FF0000;

Można zauważyć, że kolor tła Div jest skutecznie zmieniany na czerwony:

Metoda 2: Zastosowanie kolorów w HTML za pomocą kodu RGB

"RGB”To kolorystyka lub model, który wykorzystuje podstawowe kolory czerwone, zielone i niebieskie światła. Można dodać różne wartości tych kolorów, aby wygenerować wiele kolorów.

Składnia
Schemat RGB działa zgodnie z podaną formułą:

RGB (czerwony, niebieski, zielony)

Rzućmy okiem na niektóre kolory z ich wartościami RGB:

Zabarwienie	Kod koloru RGB
Czerwony	RGB (255,0,0)
Zielony	RGB (0,255,0)
Niebieski	RGB (0,0,255)
Biały	RGB (255 255,255)
Niebieski	RGB (0,0,0)

Przykład
Oto demonstracja zmiany koloru tła naszego Div na „żółty„Stosując kod RGB. „„kolor tła”Jest ustawiony jako„RGB (0,0,255)”, Którym jest żółty kod koloru RGB:

kolor tła: RGB (255, 255, 0);

Po przypisaniu wartości RGB (255,255,0) właściwości koloru tła sprawdź wyniki poniżej:

Metoda 3: Zastosowanie kolorów w HTML za pomocą HSL

W HTML kolory można również zdefiniować za pomocą „HSL" Hue, SAturation i LIghtness. W tym celu konieczne jest wykorzystanie metody kodu koloru HSL.

Składnia
Format metody koloru HSL () cytowany jest poniżej:

HSL (odcień, nasycenie, lekkość)

W kolorze RGB każdy kolor oznacza kąt i wartość procentową dla czynników poniżej listy:

• Odcień: Służy do reprezentowania stopnia, od 0 do 360 na kole kolorów RGB.
• Nasycenie: Jest to wartość procentowa, w której 0% oznacza odcień szarości, a 100% to pełny kolor.
• Lekkość: Jest to wartość procentowa, w której 0% wskazuje na czarne, a 100% jest dla białych.

Przykład
Zmieńmy wyżej wymienione „div„Kolor do odcienia zieleni o odcieniu”106„Stopnie, nasycenie” 73%”I lekkość„ z 58%”:

kolor tła: HSL (106, 73%, 58%);

Wynik pokazano poniżej:

Proszę bardzo! Nauczyłeś się trzech metod stosowania kolorów w HTML.

Wniosek

Kody kolorów HTML to identyfikatory do zastosowania różnych kolorów. Oprócz użycia tylko nazwy kolorów, HTML pozwala nam na użycie trzech metod: wartości kodu sześciokątnego, kolorów RGB i HSL. Możesz użyć tych kolorów na dowolnym elemencie HTML, ustawiając wartości tych kodów. Ten zapis wykazał metody stosowania kolorów w HTML.