Sześciokąt w kolorze szarym. Samouczek HTML

Niestety nie ma jeszcze możliwości wyświetlenia wrażeń smakowych na stronie internetowej. Ale można to w pełni zrekompensować za pomocą kolorów. W końcu kolory HTML pozwalają wyświetlić dowolny z milionów odcieni. Więc " kolorowe kredki W jego zestawie jest ich znacznie więcej niż siedem.

Schemat kolorów w HTML

W HTML kolor można określić w kilku formatach:

1. Jako wartość szesnastkową – stosuje się kod określony w szesnastkowym systemie liczbowym. Takie kody kolorów w HTML składają się z trzech par liczb szesnastkowych. Każda para odpowiada za nasycenie odcienia kolorem podstawowym:

• Pierwsza para liczb odpowiada za kolor czerwony;
• Druga para dotyczy zawartości koloru zielonego;
• Ten ostatni wynika z niebieskiej zawartości.

Na początku kodu (przed liczbami) umieszcza się znak krzyżyka. To właśnie oznacza zapis szesnastkowy kod koloru. Oprócz cyfr od 1 do 9 w tym systemie liczbowym wykorzystywane są litery alfabetu łacińskiego (A, B, C, D, E, F).

Na przykład kod biały w HTML będzie wyglądać jak #FFFFFF:

2. Słowo kluczowe – HTML obecnie obsługuje około 147 słów kluczowych. Ale nie wszystkie te słowa są wyjątkowe. Część z nich nawiązuje do tego samego odcienia kolorystycznego.

Kolor szary jest reprezentowany przez dwa słowa kluczowe: szary i szary. Ich kod szesnastkowy (HEX) ma tę samą wartość #808080.

Przykład:

#808080

3. W formacie RGB – to kodowanie kolorów w formacie HTML opiera się na zastosowaniu trzech wartości, ustawionych w zakresie od 0 do 255. Każda z nich określa nasycenie barwy jednym z kolorów podstawowych:

• R – czerwony (czerwony);
• G – zielony (zielony);
• B – niebieski (niebieski).

Numer koloru w formacie RGB zapisywany jest w postaci: rgb(0, 210, 100).

kolor tła: rgb(100,186,43)

4. W formacie RGBA – jest to ulepszony format RGB, gdzie czwarta wartość określa przezroczystość koloru w postaci ułamka dziesiętnego od 0 do 1.

Przykład użycia:

kolor tła: rgba (100,86,143,0,2)

kolor tła: rgba (100,86,143,0,5)

kolor tła: rgba (100,86,143,0,8)

kolor tła:rgba(100,86,143,1)

Tabele kolorów HTML i generatory kolorów

Przy tak szerokiej gamie formatów ustawień kolorów łatwo się pomylić. Dlatego został wynaleziony specjalny stół zabarwienie. Zawiera 147 kluczowych nazw odcieni kolorów z kodami zgodności we wszystkich głównych standardach kolorów. Dodatkowo każde pole wyposażone jest w pasek umożliwiający wizualny wybór koloru. Jedna z tych tabel jest prezentowana na stronie internetowejcolorcheme.ru:

Ale nawet przy takiej strukturze dopasowania wybór odpowiedniego odcienia może być trudny. I nie jest faktem, że tabela kodów kolorów będzie zawierać ten, którego potrzebujesz.

Aby ominąć tę przeszkodę i maksymalnie ułatwić wybór odpowiedniego odcienia, opracowano interaktywne serwisy internetowe. Ich interfejs użytkownika mogą się od siebie nieznacznie różnić.

Na stronie html-color-codes.info generator kolorów wygląda następująco:

W ramach usługi color-picker.appsmaster.co to narzędzie jest zaimplementowane nieco inaczej:

Nasycenie każdego koloru w generatorze ustawia się za pomocą specjalnych suwaków. Wizualnie cień jest wyświetlany poprzez kolor ramki i prostokąta po lewej stronie. Na dole 3 pola wyświetlają kod koloru w podstawowych formatach.

Ale generator kolorów jest dostępny nie tylko na wyspecjalizowanych stronach. Prawie wszystkie edytory graficzne są wyposażone w podobne narzędzie. Na przykład Photoshop:

Środki bezpieczeństwa podczas pracy z kolorem

A to było dawno, dawno temu, w epoce kart graficznych obsługujących tylko 256 kolorów. W tych odległych czasach system operacyjny mógł wyświetlać tylko pewną liczbę ośmiobitowych odcieni bez zniekształceń.

Następnie opracowano świetną tabelę bezpiecznych kolorów. Określono 216 odcieni, które można było wyświetlić bez zniekształceń w dowolnej ówczesnej przeglądarce. I do dziś to” świetny rękopis» jest nadal dostępny w niektórych zasobach:

Obecnie wszystko się zmieniło. Dlatego wszystkie zasady bezpieczeństwa podczas pracy z kolorem w HTML są całkowicie anulowane. W końcu nowoczesny sprzęt komputerowy obsługuje ponad 16 milionów różnych odcieni. A 216 bezpiecznych kolorów odeszło w zapomnienie.

Dane te w pełni potwierdzają statystyki. Sądząc po tym, w 2014 roku tylko 0,5% użytkowników ma komputery obsługujące tylko 256 odcieni.

Podstawy harmonii kolorów

Nie każdy z nas jest obdarzony naturalnym, harmonijnym zmysłem smaku. Dlatego dobór odpowiedniego koloru może być nie lada wyzwaniem. Ale, chwała nauce, udało jej się nawet opisać harmonię kolorów w postaci kilku schematów. Wszystkie opierają się na wykorzystaniu koła barw. Schematy harmonijnego doboru kolorów w HTML.

Kody kolorów w CSS służą do określania koloru. Zwykle kody kolorów lub wartości kolorów służą do ustawienia koloru pierwszego planu elementu (np. Kolor tekstu, kolor łącza) lub koloru tła elementu (kolor tła, kolor bloku). Można ich również używać do zmiany koloru przycisku, obramowania, znacznika, najechania kursorem i innych efektów dekoracyjnych.

Możesz określić wartości kolorów w różnych formatach. W poniższej tabeli wymieniono wszystkie możliwe formaty:

Wymienione formaty opisano bardziej szczegółowo poniżej.

Kolory CSS — kody szesnastkowe

Szesnastkowy kod koloru jest sześciocyfrową reprezentacją koloru. Pierwsze dwie cyfry (RR) reprezentują wartość czerwoną, dwie kolejne oznaczają wartość zieloną (GG), a dwie ostatnie reprezentują wartość niebieską (BB).

Kolory CSS — krótkie kody szesnastkowe

Krótki szesnastkowy kod koloru jest krótszą formą zapisu sześcioznakowego. W tym formacie każda cyfra jest powtarzana, aby uzyskać równoważną sześciocyfrową wartość koloru. Na przykład: #0F0 staje się #00FF00.

Wartość szesnastkową można pobrać z dowolnej grafiki oprogramowanie, Jak na przykład Adobe Photoshopie, Core Draw itp.

Każdy szesnastkowy kod koloru w CSS będzie poprzedzony znakiem hash „#”. Poniżej znajdują się przykłady użycia notacji szesnastkowej.

Kolory CSS - Wartości RGB

Wartość RGB to kod koloru ustawiany za pomocą właściwości rgb(). Ta właściwość przyjmuje trzy wartości: po jednej dla koloru czerwonego, zielonego i niebieskiego. Wartość może być liczbą całkowitą od 0 do 255 lub wartością procentową.

Notatka: Nie wszystkie przeglądarki obsługują właściwość koloru rgb(), dlatego nie zaleca się jej używania.

Poniżej znajduje się przykład pokazujący wiele kolorów przy użyciu wartości RGB.

Generator kodu koloru

Korzystając z naszej usługi, możesz stworzyć miliony kodów kolorów.

Bezpieczne kolory przeglądarki

Poniżej znajduje się tabela 216 kolorów, które są najbezpieczniejsze i niezależne od komputera. Te kolory w CSS wahają się od 000000 do kodu szesnastkowego FFFFFF. Są bezpieczne w użyciu, ponieważ zapewniają prawidłowe wyświetlanie kolorów na wszystkich komputerach pracujących z paletą 256 kolorów.

W HTML kolor można określić na trzy sposoby:

Ustawianie koloru w HTML według jego nazwy

Niektóre kolory można określić na podstawie nazwy, korzystając z nazwy koloru na stronie język angielski. Najpopularniejszy słowa kluczowe: czarny (czarny), biały (biały), czerwony (czerwony), zielony (zielony), niebieski (niebieski) itp.:

Kolor tekstu – czerwony

Najpopularniejsze kolory standardu Konsorcjum Sieć WWW(Angielskie konsorcjum w sieci WWW, W3C):

Przykład użycia różnych nazw kolorów:

Przykład: określenie koloru poprzez jego nazwę

• Spróbuj sam "

Nagłówek na czerwonym tle

Nagłówek na pomarańczowym tle

Nagłówek na tle limonki

Biały tekst na niebieskim tle

Nagłówek na czerwonym tle

Nagłówek na pomarańczowym tle

Nagłówek na tle limonki

Biały tekst na niebieskim tle

Określanie koloru za pomocą RGB

Podczas wyświetlania różnych kolorów na monitorze podstawą jest paleta RGB. Dowolny kolor uzyskuje się poprzez zmieszanie trzech podstawowych: R - czerwony, G - zielony, B - niebieski. Jasność każdego koloru jest podawana w jednym bajcie i dlatego może przyjmować wartości od 0 do 255. Na przykład RGB(255,0,0) jest wyświetlane jako czerwony, ponieważ kolor czerwony jest ustawiony na najwyższą wartość (255) i reszta jest ustawiona na 0. Możesz także ustawić kolor jako procent. Każdy parametr wskazuje poziom jasności odpowiedniego koloru. Na przykład: wartości rgb(127, 255, 127) i rgb(50%, 100%, 50%) ustawią ten sam średni zielony kolor:

Przykład: Określanie koloru za pomocą RGB

• Spróbuj sam "

rgb(127, 255, 127)

RGB(50%, 100%, 50%)

rgb(127, 255, 127)

RGB(50%, 100%, 50%)

Ustaw kolor według wartości szesnastkowej

Wartości R G B można również określić za pomocą szesnastkowych (HEX) wartości kolorów w postaci: #RRGGBB gdzie RR (czerwony), GG (zielony) i BB (niebieski) to wartości szesnastkowe od 00 do FF (tak samo jak dziesiętne 0-255 ) . System szesnastkowy w odróżnieniu od systemu dziesiętnego opiera się, jak sama nazwa wskazuje, na liczbie 16. System szesnastkowy wykorzystuje następujące znaki: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Tutaj cyfry od 10 do 15 zastąpiono literami łacińskimi. Liczby większe niż 15 w systemie szesnastkowym są reprezentowane przez połączenie dwóch znaków w jedną wartość. Na przykład najwyższa liczba 255 w systemie dziesiętnym odpowiada najwyższej wartości FF w formacie szesnastkowym. W przeciwieństwie do systemu dziesiętnego, liczba szesnastkowa jest poprzedzona symbolem skrótu. # na przykład #FF0000 jest wyświetlany jako czerwony, ponieważ kolor czerwony ma najwyższą wartość (FF), a pozostałe kolory mają ustawioną wartość minimalną (00). Znaki po symbolu skrótu # Można pisać zarówno wielkimi, jak i małymi literami. System szesnastkowy pozwala na użycie skróconej formy #rgb, gdzie każdy znak jest odpowiednikiem double. Zatem wpis #f7O należy traktować jako #ff7700.

Przykład: Kolor szesnastkowy

• Spróbuj sam "

czerwony: #FF0000

zielony: #00FF00

niebieski: #0000FF

czerwony: #FF0000

zielony: #00FF00

niebieski: #0000FF

czerwony+zielony=żółty: #FFFF00

czerwony+niebieski=fioletowy: #FF00FF

zielony+niebieski=cyjan: #00FFFF

Lista powszechnie używanych kolorów (nazwa, HEX i RGB):

Kody kolorów (tła) według nasycenia i odcienia.

Tabela (paleta) kolorów html daje możliwość samodzielnego wyboru tonu, którego potrzebujesz. Wartość koloru jest wyświetlana w trzech formatach: szesnastkowym, RGB i HSV.

• Hex składa się z trzech dwuznakowych wartości w systemie liczb szesnastkowych. Na przykład: #ff00b3, gdzie pierwsza para cyfr jest czerwona, druga zielona, ​​a trzecia niebieska.
• RGB (RedGreenBlue) ma postać „200 100 255”, wskazując ilość odpowiedniego tonu (czerwony, zielony, niebieski) w wynikowym kolorze.
• HSV (Hue, Saturation, Value – ton, nasycenie, wartość) – model barw, w którym współrzędne wynoszą:
  • Barwa - odcień koloru, może wahać się od 0° do 360°.
  • Nasycenie - nasycenie, waha się od 0-100 lub 0-1. Im wyższy ten parametr, tym „czystszy” kolor, dlatego też parametr ten nazywany jest czasem czystością koloru. Im bliżej zera jest ten parametr, tym kolor jest bliższy neutralnej szarości.
  • Wartość (wartość koloru) - ustawia jasność, wartość może również zmieniać się w zakresie 0-100 lub 0-1.

Podaj kod koloru: IŚĆ

Lista kolorów z nazwami

Tabela zawiera angielskie nazwy kolorów (które mogą być używane jako wartości) obsługiwane przez wszystkie przeglądarki oraz ich wartości szesnastkowe. Wszystkie wymienione kolory są „bezpieczne”, co oznacza, że ​​będą wyglądać tak samo we wszystkich przeglądarkach.

Dla strony HTML Kolory są oznaczane głównie w formacie szesnastkowym. W tym celu stosuje się dwa rodzaje zapisu kodu – pełny lub skrócony. Aby poprawnie wskazać kolor HTML w całości, należy wpisać sześć znaków (cyfry i/lub litery angielskie) po znaku krzyżyka, np. czarny jest zapisywany w ten sposób: #000000. Skrót określający kolory HTML składa się ze skrótu i ​​trzech cyfr i/lub liter znajdujących się za nim. W której ten typ rezerwy można wykorzystać tylko wtedy, gdy pełny zapis danego koloru składają się z identycznych symboli znajdujących się po znakach krzyżyka. Na przykład ten sam kolor czarny można zapisać w ten sposób: #000. Możesz określić kolory HTML, używając zarówno dużych, jak i małych znaków, ponieważ wielkość liter nie jest rozróżniana.

Każdy znak zapisany po „#” odpowiada określonej proporcji kolorów czerwonego, zielonego i niebieskie kolory. Z kolei wszystkie monitory składają się z ogromnej liczby pikseli (mikroskopijnych punktów), z których każdy zawiera 3 tzw. „latarki” (źródła światła): czerwoną, zieloną i niebieską. Następnie dostosowując intensywność światła emitowanego przez te „latarki”, monitor wyświetla nam taki kolor, jakiego potrzebujemy.

Łącząc intensywność emisji światła czerwonego, niebieskiego i zielonego (od 0 do 256), monitory mogą wyświetlać 16 000 000 różnych odcieni.

Kolory stron internetowych można także podawać słownie lub w kodzie RGB.

Dziś ustnie można zapisać 147 kolorów. Ważne jest, aby wiedzieć, że niektóre różne nazwy mogą oznaczać te same kolory, na przykład Szary i Szary to kolor szary (#808080).

Bezpieczne kolory dla stron internetowych.

Nie każdy monitor i przeglądarka może poprawnie wyświetlić wszystkie 16 milionów kolorów HTML.

Jeśli natkniesz się na kolor, którego przeglądarka nie może poprawnie wyświetlić, to:

1. Przeglądarka zastępuje go tym, który jest do niego najbardziej podobny i który można z powodzeniem odtworzyć;
2. Aby wyświetlić poprawnie, przeglądarka może wymieszać kilka kolorów i odtworzyć wynik.

Aby mieć pewność, że wydruk w dowolnej przeglądarce i na dowolnym monitorze będzie miał kolor określony w kodzie, zaleca się użycie „Bezpiecznych kolorów”. Ustalano je nie ręcznie, czy na czyjeś życzenie, ale matematycznie. Są to w 100% bezpieczne kolory dokumenty HTML jest ich 216. I chociaż dzisiejsza technologia osiągnęła taki poziom, że nowoczesne monitory i przeglądarki rozpoznają miliony odcieni, zalecamy używanie tych bezpiecznych kolorów, aby zagwarantować reprodukcję kolorów.

Ta tabela zawiera 216 bezpiecznych kodów kolorów HTML. Każdy kolor ma wartość RGB określającą kolor redaktorzy graficy i HEX, aby określić kolor na stronach HTML.