Меню

Как цифрами обозначаются цвета



Теория цвета в цифрах

Разные люди могут по-разному представлять один и тот же цвет по его названию. Например голубой цвет может на самом деле быть цветом морской волны или небесным. Гораздо точнее цвет определяется шестнадцатеричным кодом, всего существует 16777216 комбинаций. Поэтому дизайнеру может быть полезно распознавать цвет, просто взглянув на его hex-код.

Основы

Начнем с простого: рассмотрим обычный hex-код, где каждая из трех пар цифр контролирует один из цветов RGB — красный, зеленый, синий. Числа могут принимать значения цифр от 0 до 9 и букв от A до F.

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

То есть величина чисел в парах означает количество цвета, проще говоря, если все числа максимальные, то в результате будет белый цвет — #FFFFFF, если числа минимальные, нули, то цвета нет, получается черный — #000000. Если изменять каждую пару, то получается: #FF0000 — самый яркий красный, #00FF00 — самый яркий зеленый и #0000FF — самый яркий синий. Соответственно, #00FFFF — самый яркий голубой, #FF00FF — самый яркий пурпурный и #FFFF00 — самый яркий желтый.

Распознавание цвета

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

В большинстве случаев распознать цвет по hex-коду можно, учитывая только первые цифры пар. В примере ниже понятно, что цвет смешан из большого количества красного, немного синего, а зеленого совсем нет.

Понимание цвета по hex-коду позволяет веб-дизайнеру быстрее ориентироваться в коде страницы, кроме того, можно всегда произвести впечатление на коллег или клиентов, сказав «Ах, какой прекрасный оттенок бордового».

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

Подчеркивание ссылок

По умолчанию браузеры подчеркивают гиперссылки на веб-страницах. При использовании не слишком крупных шрифтов подчеркивание может смешиваться с буквами ссылки, и выглядит такая конструкция не очень. Но можно сделать подчеркивание менее насыщенным:

  • Для темного текста на светлом фоне делаем ссылки ярче.
  • Для яркого текста на темном фоне делаем ссылки темнее.

Чтобы это работало, необходимо использовать тег span внутри каждого тега a, например:

Получившиеся ссылки легче читаются, т.к. подчеркивание не смешивается с символами. Однако добавлять span в каждую ссылку не очень рационально. Поэтому можно убрать подчеркивание ссылок, но при этом добавить border-bottom:

Читайте также:  Камни от порчи черного цвета

Цвета контента

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

Уменьшение первых цифр в парах hex-кода повысит контрастность текста, а значит читабельность улучшится:

Редактирование фона

Легко управлять фоном, изменяя hex-код цвета:

  • #404040 — нейтральный
  • #504030 — теплее
  • #304050 — холоднее

Фон страницы визуально более чувствителен к изменениям цвета, чем контент. Поэтому можно легко сделать его теплее или холоднее, корректируя и вторую цифру в парах hex-кода. Например:

  • #404040 — нейтральный
  • #594039 — теплее
  • #394059 — холоднее

Подбор и комбинирование цветов

Понимание структуры шестнадцатеричного кода цветов дает дизайнеру возможность точно подбирать комбинации цветов и выбирать цветовые схемы. Самая простая техника — это переставлять одну пару в разные места кода. Еще один способ — удвоение первой цифры в первой паре и разделение на два остальных первых цифр. Также можно комбинировать цвета, взятые из фото. Описанные способы наглядно продемонстрированы на рисунке ниже:

Источник

Как цифрами обозначаются цвета

В верстке страниц Вы можете использовать как шестнадцатиричный код (RGB), так и названия цветов, Обозреватель нормально распознает и то и другое.

Цифровые коды web цветов

  1. Текстовый, например, black, red. Для того, чтобы цвета выглядели одинаково во всех браузерах, рекомендуется пользоваться палитрой так называемых web-безопасных цветов (web-safe colors). Эта палитра содержит 216 цветов.

Палитра RGB (используется в графических редакторах). Каждый цвет представлен как сочетание красного (Red), зеленого (Grey) и синего (Blue) цветов. С помощью этих трех цветов можно получить абсолютно любой оттенок (более 16 млн.). Для каждого оттенка указывается соотношение этих трех основных цветов в диапазоне от 0 до 255. Например, черный цвет обозначается как 0 0 0, белый цвет — 255 255 255, синий — 0 0 255.

  • Шестнадцатеричный цифровой код. Для него принят следующий синтаксис: в начале кода ставится символ «#», а затем следует шестизначный набор символов в шестнадцатеричной системе счисления. Первая пара символов отвечает за красный цвет, вторая — за зеленый, третья — за синий. То есть это та же RGB-палитра, только в другом обозначении. Если в парах шестнадцатеричных чисел используются одинаковые числа, можно использовать краткую запись, например, запись #359 будет интерпретирована как #335599.
  • Если у какого-либо браузера по той или иной причине не хватает цветов, чтобы правильно отобразить использованный вами на web-странице цвет, то он подменяет ваши цвета наиболее близкими из тех, что имеются в его палитре.

    Читайте также:  Пропитка для дерева для наружных работ какая лучше цвета

    Источник

    Таблица цветов

    Цвет можно задавать двумя способами: названием цвета или же его шестнадцатеричным значением в палитре RBG в виде #RRBBGG, где RR — красный цвет (red), BB — синий (blue) и GG — зеленый (green). Чем выше значение одной из компонент, тем она более интенсивна. Оттенки серого получаются при задании одинаковых значений для всех трех компонентов. Каждая компонента может варьироваться от 0 до FF (255), т.е. всего можно получить 256х256х256=16777216 цветов. Так правило, этого более чем достаточно 🙂

    Таблица основных (безопасных) предопределенный цветов

    Ниже приведены названия и значения в палитре RBG для основных предопределенных цветов:

    Название Код Цвет Название Код Цвет Название Код Цвет
    alicemblue

    #f0f8ff

    antiquewhite

    #faebd7

    aqua

    #00ffff

    aquamarine

    #7fffd4

    azure

    #f0ffff

    beige

    #f5f5dc

    bisque

    #ffe4c4

    black

    #000000

    blanchedalmond

    #ffebcd

    blue

    #0000ff

    blueviolet

    #8a2be2

    brown

    #a52a2a

    burlywood

    #deb887

    cadetblue

    #5f9ea0

    chartreuse

    #7fff00

    chocolate

    #d2691e

    coral

    #ff7f50

    cornflowerblue

    #6495ed

    cornsilk

    #fff8dc

    crimson

    #dc143c

    cyan

    #00ffff

    darkblue

    #00008b

    darkcyan

    #008b8b

    darkgoldenrod

    #b8860b

    darkgray

    #a9a9a9

    darkgreen

    #006400

    darkkhaki

    #bdb76b

    darkmagenta

    #8b008b

    darkolivegreen

    #556b2f

    darkorange

    #ff8c00

    darkochid

    #9932cc

    darkred

    #8b0000

    darksalmon

    #e9967a

    darkseagreen

    #8fbc8f

    darkslateblue

    #483d8b

    darkslategray

    #2f4f4f

    darkturquoise

    #00ced1

    darkviolet

    #9400d3

    deeppink

    #ff1493

    deepskyblue

    #00bfff

    dimgray

    #696969

    dodgerblue

    #1e90ff

    firebrick

    #b22222

    floralwhite

    #fffaf0

    forestgreen

    #228b22

    fushsia

    #ff00ff

    gainsboro

    #dcdcdc

    ghostwhite

    #f8f8ff

    gold

    #ffd700

    goldenrod

    #daa520

    gray

    #808080

    green

    #008000

    greenyellow

    #adff2f

    honeydew

    #f0fff0

    hotpink

    #ff69b4

    indiandred

    #cd5c5c

    indigo

    #4b0082

    ivory

    #fffff0

    khaki

    #f0e68c

    lavender

    #e6e6fa

    lavenderblush

    #fff0f5

    lawngreen

    #7cfc00

    lemonchiffon

    #fffacd

    ligtblue

    #add8e6

    lightcoral

    #f08080

    lightcyan

    #e0ffff

    lightgoldenrodyellow

    #fafad2

    lightgreen

    #90ee90

    lightgrey

    #d3d3d3

    lightpink

    #ffb6c1

    lightsalmon

    #ffa07a

    lightseagreen

    #20b2aa

    lightscyblue

    #87cefa

    lightslategray

    #778899

    lightsteelblue

    #b0c4de

    lightyellow

    #ffffe0

    lime

    #00ff00

    limegreen

    #32cd32

    linen

    #faf0e6

    magenta

    #ff00ff

    maroon

    #800000

    mediumaquamarine

    #66cdaa

    mediumblue

    #0000cd

    mediumorchid

    #ba55d3

    mediumpurple

    #9370db

    mediumseagreen

    #3cb371

    mediumslateblue

    #7b68ee

    mediumspringgreen

    #00fa9a

    mediumturquoise

    #48d1cc

    mediumvioletred

    #c71585

    midnightblue

    #191970

    mintcream

    #f5fffa

    mistyrose

    #ffe4e1

    moccasin

    #ffe4b5

    navajowhite

    #ffdead

    navy

    #000080

    oldlace

    #fdf5e6

    olive

    #808000

    olivedrab

    #6b8e23

    orange

    #ffa500

    orengered

    #ff4500

    orchid

    #da70d6

    palegoldenrod

    #eee8aa

    palegreen

    #98fb98

    paleturquose

    #afeeee

    palevioletred

    #db7093

    papayawhop

    #ffefd5

    peachpuff

    #ffdab9

    peru

    #cd853f

    pink

    #ffc0cb

    plum

    #dda0dd

    powderblue

    #b0e0e6

    purple

    #800080

    red

    #ff0000

    rosybrown

    #bc8f8f

    royalblue

    #4169e1

    saddlebrown

    #8b4513

    salmon

    #fa8072

    sandybrown

    #f4a460

    seagreen

    #2e8b57

    seashell

    #fff5ee

    sienna

    #a0522d

    silver

    #c0c0c0

    skyblue

    #87ceeb

    slateblue

    #6a5acd

    slategray

    #708080

    snow

    #fffafa

    springgreen

    #00ff7f

    steelblue

    #4682b4

    tan

    #d2b48c

    teal

    #008080

    thistle

    #d8bfd8

    tomato

    #ff6347

    turquose

    #40e0d0

    violet

    #ee82ee

    wheat

    #f5deb3

    white

    #ffffff

    whitesmoke

    #f5f5f5

    yellow

    #ffff00

    yellowgreen

    #9acd32

    Расширенная таблица числовых значений цветов

    Если вам недостаточно приведенных выше цветов, то можете выбрать цвет из расширенной таблицы цветов. В CSS может использоваться сокращенная запись цвета в формате #RBG (по одному байту на каждый цвет). В этом случае, необходимо взять только нечетные цифры из приведенных в таблице значений (например, #003366 заменяется на #036).

    Источник

    Слово "Цвет" и его описание © 2022
    Внимание! Информация, опубликованная на сайте, носит исключительно ознакомительный характер и не является рекомендацией к применению. Обязательно проконсультируйтесь с вашим лечащим врачом!

    Adblock
    detector