Ўласцівасці CSS колеру. коды кветак

Адзін з інструментаў для змены стыляў вэб-старонак - CSS колеру. Ёсць некалькі спосабаў змены гэтага параметру. Кожны валодае як вартасцямі, так і недахопамі.

Назва

Ўласцівасць color задае колер элемента. У CSS ўключана 145 назваў адценняў. Сярод іх ёсць простыя (напрыклад black, blue) і складаныя (напрыклад crimson, lawngreen).

Паколькі ўвесь спіс запомніць складана, назвы ў табліцы стыляў прымяняюцца рэдка.

RGB

Большая частка тэлевізараў, смартфонаў, манітораў працуюць з каляровай мадэллю RGB. Гэта значыць любы адценне можа быць усталяваны камбінацыяй асноўных колераў, да якіх ставяцца чырвоны, зялёны і сіні. . Падобны падыход выкарыстоўваецца як у прыладах, так і ў CSS. основного состава принимают значения от 0 до 255. А количество возможных оттенков равно 16777216. Колеру асноўнага складу прымаюць значэнні ад 0 да 255. А колькасць магчымых адценняў роўна 16.777.216.

Так як мадэль RGB напрамую звязана з фізічнымі законамі візуалізацыі кветак, чорны задаецца ў ёй як rgb (0, 0, 0), белы - rgb (255, 255, 255). Сістэма RGBA цалкам аналагічная RGB, толькі з даданнем альфа-канала. Ён уплывае на празрыстасць, што змешвае адценне з заднім планам. Пры гэтым выгляд элемента будзе мяняцца ў залежнасці ад "падкладкі".

HSL

Каб зразумець, як працуе сістэма HLS, трэба прадставіць каляровай круг. У яго цэнтры знаходзіцца чырвоны, затым (па гадзіннікавай стрэлцы) усе астатнія адценні вясёлкі. цвета при помощи системы HLS требуется задать три параметра: Для вызначэння ў CSS колеру пры дапамозе сістэмы HLS патрабуецца задаць тры параметру:

• адценне (у градусах) - кірунак ад цэнтра круга;
• насычанасць (у працэнтах) - то, колькі колеру неабходна;
• яркасць (у працэнтах).

Напрыклад, фіялетавы можна вызначыць такім чынам: hsl (315, 100%, 45%). HSL найбольш зручны для эксперыментаў. Вывучыўшы каляровай круг, можна падчас прагляду табліцы стыляў прыкладна ўяўляць, які колер зададзена канкрэтнаму элементу. HSLA - той жа HLS, толькі з альфа-каналам: hsl (0, 100%, 50, 0.6) - чырвоны, празрысты крыху больш, чым напалову.

HEX

CSS цвета можно задать, используя шестнадцатеричное представление, например оранжевый определяется значением #FF4500 . У CSS колеру можна задаць, выкарыстоўваючы шаснаццатковае паданне, напрыклад аранжавы вызначаецца значэннем # FF4500.

Для лепшага разумення, што такое шаснаццатковае паданне, варта глыбей разгледзець дзесятковую сістэму. У ёй ёсць лічбы ад 0 да 9. Калі пры ліку трэба лік, большае 9, дадаецца яшчэ адзін разрад, і атрымліваецца 10, затым 100 і т. Д. У шаснаццатковай сістэме ўсё сапраўды гэтак жа, але ў ёй пасля 9 ідзе A, затым B і так да F - тое ж, што і 15 у дзесятковай сістэме. Затым дадаецца адзін разрад, і атрымліваецца 10, роўнае 16 ў звыклым нам вылічэнні.

Як і ў RGB, адценні ў HEX паказваюць, у якіх прапорцыях выкарыстоўваць асноўныя колеры. Пры гэтым іх не падзяляюць коскамі (color: # FFD500). Кожныя два знака задаюць колькасць чырвонага, зялёнага і сіняга.

CSS. Як правіла, сістэма HEX не выкарыстоўваецца падчас эксперыментаў, бо немагчыма падабраць патрэбныя колеру CSS. может помочь в этом деле, но если постоянно сверяться с ней, работа затянется. Табліца можа дапамагчы ў гэтай справе, але калі ўвесь час спраўджвацца з ёй, праца зацягнецца. Шаснаццатковае паданне найбольш зручна пры пераносе шаблону з графічнага рэдактара. Бо нашмат прасцей скапіяваць з яго толькі адну лічбу, чым па чарзе тры.

Які спосаб лепшы?

На гэты конт нічога канкрэтнага сказаць нельга. Калі элементам інтэрфейсу неабходная празрыстасць, выбірайце паміж RGBA і HSLA. Пры жаданні паэксперыментаваць ў браўзэры каляровай круг HLS будзе найбольш зручным. Калі ж вы карыстаецеся палітру або пераносіце дызайн з Photoshop, варта аддаць перавагу шаснаццаткавыя коды кветак CSS.