Главная » Дизайн » Коды цветов в html и css – все что нужно знать
Коды цветов html и css - все что нужно знать

Коды цветов в html и css – все что нужно знать

Коды цветов в html и css имеют повсеместное распространение на каждом сайте. Цвета в html применяются везде – они задают фон для сайта и его составляющих элементов, а так же цвет текста и ссылок. Прочитав эту статью Вы узнаете о кодах цвета все что нужно и даже больше!Коды цветов html и css - все что нужно знать

Работа с кодами цветов не занимает много времени технически – ведь для того, что бы их задать нужно всего навсего дописать в коде пару строк. Единственная трудность с которой может столкнуться владелец сайта – это подбор нужного цвета, ведь так хочется чтобы цвета подошли идеально! Этой статьей я постараюсь сэкономить Ваше время.

Как задать нужный цвет для элементов сайта?

Чтобы задать нужный цвет достаточно прописать: “Я хочу чтобы фон сайта был серым, текст черным, а ссылки синими” – вот и все! Но для того, чтобы Ваше желание смог понять любой браузер и оценил посетитель – придется обратиться к кодам цветов.

Существует три варианта, как задать нужный цвет:

  1. Через #. Код цвета в html или css можно задать шестью символами написанными после #. Например #ffffff – белый цвет. Так же для этого способа можно выделить один момент: число символов можно сократить до трех, если они попарно повторяются (1 и 2, 3 и 4, 5 и 6 – одинаковые). То есть белый цвет можно прописать так: #fff, а красный (#ff0000) так #f00.
  2. Словами. Для наиболее распространенных цветов можно использовать слова (англ.). Белый цвет будет white, а черный black и так далее. Лично я очень редко пользуюсь таким способом, и чаще всего прибегаю к первому.
  3. Через rgb.

RGB коды цветов – в чем их преимущество?

RGB – это аббревиатура, которая расшифровывается как красный зеленый синий (red green blue). Почему именно эти цвета? Все очень просто – меняя количественное содержание любого из них можно получить абсолютно любой цвет – это нужно понимать, но особо не вдаваться в подробности.

Количество одного цвета может колебаться от 0 до 255 условных единиц:

  • Если мы совсем не дадим цвета: по 0 единиц красного, зеленого и синего, то получиться черный цвет.
  • Если мы дадим все цвета по максимуму: 255 единиц красного, зеленого и синего, то получится белый цвет.
  • Все остальные цвета находятся между ними.

Прописывается код цвета так: rgb (255, 255, 255).rgb цвет - структура

  • Первое преимущество rgb перед другими способами задания цвета очевидно – этим способом можно задать любой нужный оттенок, ведь используется аж 9 переменных, а не 6 или 1 как в первом и втором соответственно.
  • Второе преимущество не столь очевидно, и чтобы его применить – его нужно знать. В код цвета можно дописать прозрачность.

Прозрачный цвет – как сделать?

В некоторых случаях цвет с определенным показателем прозрачности смотрится просто великолепно. Прозрачность может колебаться: от 0 – полностью прозрачный, до 1 – абсолютно не прозрачный. Смысла прописывать такие значения нет, а вот промежуточные положения прозрачности могут пригодится, например:Прозрачный цвет

Со способами прописывания цвета определились, теперь для большей ясности приведем некоторые примеры кодов цветов в html и css.

Таблица кодов цветов.

Наиболее удобным способом записи цвета для меня является первый (#), поэтому приведу примеры для него.  Основные цвета:

  • Код белого цвета: #fff;
  • Код черного цвета: #000;
  • Код красного цвета: #f00;
  • Код зеленого цвета: #0f0;
  • Код синего цвета: #00f;

Можно найти множество картинок посвященных таблице кодов цветов и так далее, но это не самый лучший способ выбрать нужный цвет, есть вариант гораздо более рациональный.

Посмотрите это видео, и у Вас никогда не будет проблем с подбором нужного кода цвета, кроме того, Вы сразу будете видеть результат на своем сайте:

Как узнать код цвета?

В некоторых случаях может потребоваться узнать код цвета. Вариантов здесь может быть 2:

  1. Нужно узнать какой цвет используется на сайте. Здесь нужно поступить так же как в видео выше, кликнуть правой кнопкой мыши и сразу посмотреть нужный код цвета в css.
  2. Требуется узнать кодовое значение цвета по картинке. Для этого я пользуюсь фотошопом:

Открываем картинку и кликаем сюда:фотошоп: шаг 1получаем код цвета в фотошопе

Этой информации будет достаточно чтобы знать что такое код цвета в html и css:

  • Как записать, подобрать или узнать код цвета? – уже не такие страшные вопросы, правда?
Комментировать через ВКонтакте:
Отзывов к посту "Коды цветов в html и css – все что нужно знать" уже 13:
  • Алёна Семёнова | 15.02.2013 в 17:39

    Ну теперь всё понятно с цветами. Кстати, я заметила, что ты не любишь плагины и предпочитаешь работать с кодами. Почему, Антон? С плагинами же проще?

    • admin | 16.02.2013 в 22:04

      Я не говорил что я не люблю плагины :smile: но если есть возможность отказаться от них – лучше ей пользоваться. К тому же не все плагины универсальны и могут подойти к любому блогу (например как у тебя ставил – плагин выделяющий комменты админа).
      А вообще к статье это никакого отношения не имеет, поэтому углубляться в тему не буду :|

  • Vadar | 15.02.2013 в 22:51

    Да нет, как я понял уже, он наоборот – умница! Плагины же замедляют скорость работы сайта! Спасибо те дорогой! Держи от меня твит и гугл!

  • Алёна Семёнова | 16.02.2013 в 22:30

    Хорошо, Антон, извини, что не в тему комментнула. Постараюсь впредь молчать и не писать не в тему… :|

    • admin | 16.02.2013 в 22:34

      Да ничего страшного, просто бывает так пишешь пишешь вкладываешь в статью душу, зная что такой подробной инфы в интернете в одном месте нет. А тут :) я нисколечки не обижаюсь ;) а на любой вопрос можно получить ответ, написав мне на почту. Просто не думаю что эти комменты будут интересны тем, кто пришел узнать о цветах в html коде

  • дед Виталя | 17.02.2013 в 0:48

    Давно знаю о кодах цветов, а вот нюансами работы с ними особенно не интересовался. А надо бы осваивать. Пригодится информация, например, о том, как задать прозрачный цвет а также как узнать код цвета.
    Спасибо, Антон и за видео, очень наглядно!

  • Anna | 18.02.2013 в 23:48

    И вот оно – прозрачный цвет! Я только думала на днях поискать инфу, как его сделать, а тут как раз Ваш пост увидела :smile:

    • admin | 18.02.2013 в 23:57

      Да, прозрачный цвет прикольная штука :|

      • Владимир Жданов | 19.02.2013 в 0:04

        Можно сделать прозрачный цвет еще с помощью opacity :smile:

        • admin | 19.02.2013 в 0:06

          Это уже не цвет будет, а прозрачность всего блока. А это бывает не Гуд :) Я на какже.ру сначала именно такой прозрачностью делал – потом шапку разглядеть не мог :D

  • Лекси | 04.04.2013 в 15:01

    Спасибо большое! Очень помогла часть про полупрозрачность фона. :shock:

  • Читаю твои статьи про html и css и узнаю много нового, спасибо! Что-то раньше не находила времени все прочитать. Этот rgb не раз в кодах встречала, не понимала, что это..

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: