Hex код как выглядит

7

What is Hex Code (HTML Color Codes) and How Do They Work?

When looking at a landscape, there are several objects you might describe as green. Leaves, grass, frogs, and algae could all receive that color designation. However, if you were pressed, you would acknowledge that they are not the same color but different shades of green.

Hex code offers specific codes to hues.

Computers require more specificity so that colors are uniform on every screen. Many programmers use hexadecimal color codes to label colors in their work. A hex code is a series of six characters that define the red, green, and blue content of a hue. This arrangement allows developers to choose a specific color from a palette of over 16 million hues.

Hex Code: An Exact Definition

Hex code provides a clear label for HTML color codes. In web development languages like HTML and CSS, a standard code for blue would read #0000FF. The hashtag indicates that a hexadecimal code follows. The first two characters represent the amount of red. The second pair measures green. The final characters indicate the blue content in the color. Each two-character combination corresponds to a number between 0 and 255, the range in RGB labeling.

How Does Hex Code Work?

Hex code uses 16 base numbers to provide a uniform arrangement for development. Although the code can represent almost 17 million colors, It reduces every color to six characters. Converting hexadecimal notation into RGB numbers is a two-step process.

There are 16 possible values for each character. Numbers correspond to their normal values of zero through nine. The letters A through F correspond to the values of 10 to 15. The first conversion step is multiplying the value of the first character by 16. In the second step, you add the value of the second number to the product of the first step. For example, the hexadecimal notation value of E1 is equivalent to (14 X 16) + 1 or 225.

Hex code covers a broad range starting with #000000 for white through #FFFFFF for black. These HTML color codes simplify the process of developing unique color palettes for websites and other digital media.

How Do You Create Colors With Hex Code?

Hex code is one of several ways of labeling colors in CSS and HTML. While named HTML color codes like “aquamarine” and “cadet blue” are convenient, they do not supply the range of possible colors found in hex code.

To create a hex code color, it is easiest to start with the first character in each RGB pairing. The first number or letter represents most of the color value. Then, you can make subtle changes by adjusting the second character in the pair.

If you are struggling with where to begin for a paint color on a digital screen, an online color generator is a helpful tool. This resource shows a color gradient. Each time you pick a color, you will receive the RGB and hex code notations for it. You can then put this information into your project.

For web development, a palette generator offers another step. Once you pick a color you like, you can enter it into the generator. It will show you an array of coordinating colors to give your site an appealing, well-designed look.

Where Did Hex Code Come From?

In 1981, James Maxwell developed the first-ever color photo.

Hex code is part of the long tradition of RGB color theory that began in the 1800s. Experiments with light and filters revealed that all colors could be created by combining red, green, and blue light. Using a practical application of this theory, the Mathematician James Maxwell developed the first color photograph in 1861.

As color theory developed, artists and designers wanted to find ways to standardize colors. The first color list involved labeling colors as a percentage of RGB content from zero to 100.

The advent of the computer age changed color labeling conventions. A single byte was comprised of eight bits. The highest binary number a byte can store is 255. This limit led to the standard RGB notation with (0, 0, 0) for white and (255, 255, 255) for black. Hex code cleans this notation by giving every RGB number a two-character value.

What Are the Applications of Hex Code?

Hex code has digital applications wherever developers want uniform colors over multiple platforms and devices. A standardized palette streamlines updates and revisions. Developers can carry over elements from a company’s old website or logo by maintaining the exact color scheme.

Color-matching tools in web design platforms can help artists choose appropriate colors for paint in their creations. The software identifies the color mix and returns a hex code for reference.

Examples of Hex Code in the Real World

HTML and CSS-Based Websites

The ability to choose colors has improved with each generation of HTML. What started as a few named HTML color codes has expanded to over 16 million hex code possibilities. Modern websites use colors to make pages more engaging and highlight features and navigation tools.

NFTs, Digital Art, and Design

As artwork moves from canvas to a digital screen, hex code allows digital artists to easily choose a unique color palette for paint. Codified colors also help artists standardize their work. For example, an artist can maintain consistency in a series of pieces by using the same hexadecimal color codes for each one.

Game Design

Consistent color is critical in game design. Hex codes allow a team of designers to build color-coordinated games by providing standardized color choices. Every team member will know the exact shade of blue to color a knight’s shield.

Up Next…

: They make it possible for you to claim ownership digitally. Find out all you need to know about them, here. They are languages which involve the interaction of objects with each other. Find out what exactly these objects consist of, how they function, and what languages belong to this category. It is the second oldest programming language still in existence. Discover all you need to know about it here.

What is Hex Code (HTML Color Codes) and How Do They Work? FAQs (Frequently Asked Questions)

What is the difference between hex code and RGB notation?

Hex code and RGB notation provide the same information to the computer. They both break down color into red, green, and blue elements. RGB notation shows the amount of each color with a number from 0 to 255. Hex code uses a two-character hexadecimal notation for the same number.

Many developers prefer hex code because every color has only six characters. RGB uses (0, 0, 0) for white and (255, 255, 255) for black. Hex code uses #000000 and #FFFFFF for the same colors.

What is hex color code in HTML?

Hex code is a system for labeling colors in HTML and CSS. The six-character notation provides cleaner, more uniform coding.

What are hex codes used for?

Programmers use hex code to denote colors for any object on a website or game. You can use hex color codes for text, backgrounds, borders, and other graphics.

How do you add a hex color in HTML?

You can employ hex codes in any place where you designate a color. HTML recognizes hex code for colors in both inline CSS and from a linked CSS document. To change the background color of an element to red, you would use “background-color: #FF0000” in the relevant CSS. The six-character hex code always follows a hash symbol that tells the program a hexadecimal code will come next.

How can I learn hex code?

The easiest way to understand hex code is to experiment with an online color generator. When you pick the color, the tool displays it in RGB notation, hex code, and other color notations. Using this resource, it will not take long to understand how hex code works, simplifying the use of the notation when choosing colors.

Как работают hex-коды для обозначения цветов

Перевод статьи «How Hex Code Colors Work – and How to Choose Colors Without A Color Picker».

Каким бы проектом вы ни занимались, скорее всего на каком-то этапе вы начнете работать с цветами. Особенно, если вы (как и многие другие) начинаете изучение программирования с HTML и создания веб-страниц.

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

По мере накопления опыта вы начнете смотреть скорее на сами коды цветов, а не просто полагаться на редактор. Вы заметите, что выбираемые вами цвета обозначаются какими-то странными кодами, вроде #ff0000.

Это hex-коды цветов. Они — фундаментальная часть работы HTML и CSS. Если вы разберетесь в том, как они функционируют, это не только поможет вам сэкономить массу времени, но и позволит создавать более элегантный и надежный код, причем гораздо быстрее.

В этой статье я расскажу вам обо всем, что вам нужно знать о hex-кодировке цветов.

Что означает слово «hex»?

Для начала давайте разберем, что в термине «hex-код» означает слово «hex». В этом контексте «hex» — это сокращение слова «hexadecimal» (англ. «шестнадцатеричный»). Речь идет о шестнадцатеричной системе счисления, где основание чисел — 16, а не привычное нам 10 (в десятичной системе).

Эта система счисления используется и в HTML, и во многих языках программирования. В частности — для обозначений цветов.

В шестнадцатеричной системе счисления используются те же цифры, что и в десятичной (0-9), а затем ряд продолжается буквами латинского алфавита. Таким образом, числа 10-15 представлены буквами A, B, C, D, E, F.

Почему для обозначения цветов стали использовать шестнадцатеричную систему счисления? Дело в том, что она естественным образом связана с двоичной системой, которую использует ваш компьютер.

Числа в двоичной системе часто представляются в виде степеней двойки, а 16 — это 2^4. В общем, конвертировать числа шестнадцатеричной системы в двоичные (и обратно) просто удобно. Но сейчас мы этим заниматься не будем.

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

Из каких компонентов состоит цвет?

Как шестнадцатеричные коды используются для обозначения RGB-цветов? (RGB — цветовая модель, описывающая способ кодирования цвета для цветовоспроизведения с помощью трёх цветов, которые принято называть основными. Сама аббревиатура RGB расшифровывается как red, green, blue — красный, зелёный, синий. — Прим. ред. Techrocks).

Каждый пиксель цветного монитора состоит из трех светящихся элементов красного, зелёного и синего цвета. Если рассмотрите экран в большом приближении, вы их увидите (если экран древний, слишком напрягаться не придется). Цвета, которые вы видите на экране, образуются благодаря управлению яркостью каждого из этих элементов.

Для шифрования цвета мы указываем, сколько света должна выдавать каждая из частей пикселя. RGB-значение может выглядеть так: RGB (255, 0, 0). Такие обозначения используются во многих программах.

255 — максимальное значение для компонента. Если брать наш пример, первый компонент (красный, R) должен светиться максимально, а два остальных — минимально. Это дает нам, как вы, наверное, догадались, чистый красный цвет.

(Кстати, для максимального значения число 255 выбрано не случайно, а из-за удобства использования. Диапазон 0-255 (включая 0 и 255), — это 256 значений, а 256 — это 2^8. Просто еще один факт, который знать не обязательно).

К этому моменту внимательные читатели могли уже понять, насколько просто работать с цветами, представленными в такой форме. Черный цвет представляется как RGB (0,0,0), а белый — RGB (255,255,255). Ну а зеленый, соответственно, — RGB (0,255,0).

Hex-кодировка цветов

Теперь, зная, что в принципе означают коды цветов, давайте посмотрим на hex-коды. Возьмем, к примеру, #ff0000, и попробуем разобраться, что этот код означает.

Посмотрите на таблицу перевода чисел из шестнадцатеричной системы в десятичную, и вы увидите, что «FF» — это 255 в десятичной системе.

Это подсказка. Два первых символа в нашем hex-коде (да и во всех остальных тоже) относятся к красному цвету, и в данном случае его значение — 255. Следующие два символа отвечают за зеленый, а последние — за синий цвет.

Исходя из этого, вы можете понять, что #ff0000 — то же самое, что RGB (255,0,0). То есть, чистый красный. Аналогично, #ff00ff — это максимум красного и одновременно синего, а вместе они дают пурпурный (magenta).

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

Эта система также означает, что вам доступна очень широкая палитра цветов, потому что каждый компонент может иметь любое значение, от 0 до 255. Попробуйте прикинуть количество вариантов, и вы поймете, что вам доступны 16777216 цветов.

Как использовать сокращенные обозначения цвета

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

Но сначала будет полезным узнать, что это не единственные опции.

Поскольку HTML проектировался так, чтобы им было удобно пользоваться, он допускает использование сокращенной записи hex-кодов. Например, код чистого красного цвета #FF0000 можно сократить до #F00. Одна цифра для красного, одна для зеленого и одна для синего. Браузеры интерпретируют #FF0000 и #F00 одинаково.

Такая запись сокращает доступное количество цветов до примерно 4 тысяч, но ее применение дает некоторые преимущества.

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

Почему стоит использовать hex-коды

Большинство конструкторов сайтов позволяют вводить hex-код вместо выбора цвета при помощи мыши. Такой подход имеет ряд преимуществ.

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

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

В-третьих, понимание того, как получаются цвета на экране, очень полезно при проектировании веб-страниц (да и любых программ). Зная, как разные устройства интерпретируют и выводят цвета, вы можете начать использовать hex-коды для смешивания цветов, и при этом быть уверенным, что на экране отобразится именно то, что вы хотели.

Дополнительные преимущества

Hex-коды применяются при работе с HTML, но не только. Практически все программы для работы с изображениями пользуются той же кодировкой. Таким образом, разобравшись, как работают hex-коды, вы получаете полезный и переносимый навык.

What's the Hex Code and How to Use It

In this article, you will learn the basics of the Hex Code and how to apply it.

If you have ever used graphics software, you may have noticed a 6-digit number with a hashtag symbol at the beginning of the Color Picker Menu.

The number is called the Hex Code. The Hex Code is a color code based on the Hexadecimal system.

Suppose you sample a specific color with the color picker of any design software. In that case, it automatically displays the corresponding Hex Code and, in most cases, the corresponding RGB and HSB values. It is possible to convert a Hex Code number to RGB, CMYK, and HSB color values and vice versa. Many free calculators are online available for the conversion of Hex Color Codes.

If you only have the Hex color code available, you can type it in the Hex Button, and the corresponding color will be displayed in the Fill or Stroke Well.

Source: Vectornator Color Panel

The Hexadecimal System

We are used to calculating in the decimal system. Our Indo-Arabic number system uses ten symbols to notate the digits (0 to 9). The hexadecimal system, on the other hand, contains sixteen digits. Since the mid-1950s, the letters A through F or a through f have been used as numeral symbols to represent the six additional digits. This goes back to the practice of IBM computer scientists at that time.

Hexa comes from Greek and means «six,» while Decem is the Latin word for «ten.» Therefore, the hexadecimal system is a place value system representing numbers with a base of 16. This means that the hexadecimal number system uses 16 different digits. In other words, there are 16 possible digit symbols — as opposed to two in the binary system (1 and 0) or ten in the decimal system (0 to 9).

The hexadecimal system is used in computer technology and facilitates the readability of large numbers or long-bit sequences. These are grouped into four bits each and converted into hexadecimal numbers. The result: a long sequence of ones and zeros becomes shorter hexadecimal numbers, which can be divided into groups of two or four. Thus, hexadecimal numbers are a more compact form of representing bit sequences.

Large binary numbers have the disadvantage that they are very confusing. To remedy this, the hexadecimal system was introduced. Here, 4 bits of a dual number are replaced by a hexadecimal character. Since a 4-bit dual number can have 16 states, but we only know ten decimal numbers, six letters were added to the hexadecimal number system.

Hexadecimal values are base 16 instead of base 10:

The letters A, B, C, D, E, and F equate the additional values.

The Hexadecimal Color Definition

If red, green, and blue are all at the minimum 0 (represented as “00” in the code), the color expressed is the color black. If red, green, and blue are all at the maximum 255 (represented as “ff” in the code), the color expressed is the color white.

To accurately assign a color in computer-aided graphic design, it is represented by a six-digit hexadecimal code based on the RGB model. The first two numbers represent red, followed by green and blue. Each hue is mixed from these three basic colors. The numerical values are divided into 255 parts and over 16 million colors. The full hue of a base color has the value 255, which corresponds to the hexadecimal code «FF.» The color value «0» indicates that the base color is not included. Since pure white results from the digital mixture of the colors red, green, and blue, this color has the hexadecimal coding #FFFFFF. For the color red, the hexadecimal code #FF0000 is derived on this basis.

Image on the left: Hex Code: #FFFFFF Image on the right: Hex Code: #FF0000

The system of hexadecimal color definition finds its application in many areas of computer-aided design. In this system, a color is represented by three consecutive hexadecimal numbers, each of which stands for the color of the RGB color space. RGB is an abbreviation for the proportions of the primary colors red, green, and blue in the mixed color.

The hexadecimal color definition is usually in the six-digit form, i.e., as a sequence of three hexadecimal numbers, each written with two digits, according to the scheme: #RRGGBB, which allows per octet 2 8 <\displaystyle 2^<8>> 2^<8>> (= 256) different states can be defined — from 0 for a completely «off» color and 255 (FF) for 100% color saturation.

The Hex Color Values can display more than 16 million different colors.

It can be helpful to memorize a few of the more common Hexadecimal Colors. This knowledge might come in handy if you were designing with a coder on the fly.

The Hex Color and the Alpha Channel

Generally, the Alpha Channel has separate controls in graphics software and does not interfere with the six-digit HEX code. You display the color value located in the 6-digit Hex Code, but the alpha is often organized with a separate slider that does not influence the 6-digit HEX Code. The 6-digit HEX code controls only the displayed color. If you want to change the alpha value, you’ll need to use the separate alpha channel slider in the Color Picker or the Color Slider Space in Vectornator.

Nevertheless, it is generally technically possible to implement the alpha value directly into the HEX code. With CSS Hex Codes f.ex, an Alpha value can be added. Using an alpha value to update a color transparency will change the hex code format from 6 digits #RRGGBB to 8 digits #RRGGBBAA.

Image on the left: Hex Code: #FFFFFF Image on the right: Hex Code: #FF0000

HEX-код что это и как работает для обозначения цветов

Работа с цветом — это основной инструмент графического и веб-дизайнера. Каждое приложение и сайт подразумевает использование собственных оттенков, даже если выбран максимально лаконичный стиль.

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

• колесо;
• комплементарность;
• контраст;
• оттеночные «гибриды»
• и многое другое.

Но при переносе цветов в веб-интерфейс потребуются специальные коды. Они есть у каждого оттенка, обозначаются шестизначным номером через знак «решетки». Например, код #000000 — это черный цвет.

Это и есть HEX-коды, комбинации определенных букв и цифр, которые «объясняют» виртуальному интерфейсу, какой именно оттенок нужно передать.

Что такое HEX-коды и как они формируются

HEX-коды подходят для определения практически любого тончайшего нюанса между цветами и переходами. Слово HEX происходит от hexadecimal — в переводе с английского языка «шестнадцатеричный».

Для кодировки цветовых значений используется шестнадцатеричная система, используемая во многих языках программирования. Принцип формирования HEX-кода:

• Числа 10-15 обозначаются буквами латинского алфавита, используются A, B, C, В, E, F. Дальше «F» буквы не идут, а код #ffffff – это чистый белый цвет, один из самых широко используемых кодов наряду с «нулями», обозначающими черный.

• Шестнадцатеричная система тесно связана с двоичной, которую используют компьютеры, мобильные телефоны и другая техника, предназначенная для отображения размещенной в интернете информации, поэтому при формировании данные обмениваются между собой.
• Все цвета выстраиваются из основных — синий, зеленый, красный. Этот принцип хорошо известен дизайнерам, RGB-оттенки считаются «стандартом» в любых графических стандартах. На основe RGB по тем же принципам формируются и HEX-коды для веб-интерфейсов.

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

Как шифруются HEX-коды

После значка «решетки» всего 6 символов. Они помогают попарно кодировать информацию для синего, зеленого и красного сигналов, используя такие принципы:

• первые две цифры задают параметры для красного цвета;
• вторая пара — для зеленого;
• третья — для синего.

Если известны RGB-оттенки, то можно просто воспользоваться таблицей и «расшифровать» с использованием шестнадцатеричной системы. Например, белый цвет, который в RGB-системе передается как «255», для HEX-формулы станет «FF».

А по сути «означает», что яркость «выкручивается» на полную мощность, не оставляя «места» никаким нюансам синего, зеленого или красного. Соответственно, черный цвет, который передается нулями, обозначает, что на этот пиксель вообще не подается сигнала.

Можно посмотреть на базовые цвета в чистом виде, если задать характеристики:

• #ff0000 — только красный цвет, все остальные оттенки «не участвуют», пиксель будет окрашен в соответствующий оттенок без примесей;
• #00ff00 — аналогично для зеленого, получается «идеальный зеленый», который в чистом виде используется довольно редко;
• #0000ff — так выглядит «синий без других оттенков».

Все остальные HEX-коды создают какую-либо комбинацию. Преимуществом кодировки служит то, что с ее помощью можно передать оттенки с высочайшей точностью. Всего доступно 16777216 цветов, что соответствует характеристикам самых «топовых» мониторов или экранов мобильных устройств.

Сокращение HEX-кодов

В ряде случаев «формулы» принято сокращать, используя вместо 6 символов всего 3. Это делается для сокращения оттенков, применяется в веб-программировании, когда важно точно воспроизвести цветовую гамму на всех страницах, не сбиваясь в тонкостях настройки.

Например, если цвет обозначается как #FF22AA — это насыщенный ярко-розовый оттенок, то его можно «упростить» до #F2A.

Написание HEX-кодов не зависит от регистра, поэтому #f2a и #F2A — это одно и то же. Допустимо использовать вперемешку заглавные и строчные буквы.

Сокращенные формулы цветов широко используются при верстке сайтов с использованием языка программирования CSS.

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

Большинство графических редакторов передают цветовые значения и их коды в характеристиках и параметрах. Если брать такие широко используемые программные среды, как Photoshop, Illustrator, Gimp и многие другие, то они сами «подскажут» пользователю шестизначный код.

Если вы работаете в Adobe Photoshop, то посмотреть значение HEX не составит труда. Для этого нужно:

Инструмент «пипетка» в Photoshop

Открыть картинку, из которой собираетесь взять оттенок. Это может быть векторная картинка с «простыми» оттенками или растровое изображение, например, фотография. Выбрать инструмент «Пипетка» или Eyedropper в английской версии.

Если цвет планируется брать со сложного и многоцветного рисунка, можно определить «поле», которое будет «считаться» пипеткой за образец. Для настройки нужно открыть панель «Размер образца» (Sample Size) и установить его по мере необходимости.

Размер образца для определения поля цвета

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

В открывшемся меню в самом низу, после «типографских» и других кодов, будет и HEX-код, узнать его можно по характерному символу решетки.

Определение кода цвета

Также можно поставить галочку «только веб-цвета» (Only Web Colors). Это служит для упрощения палитры.

Безопасные WEB-цвета

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

Названия оттенков и коды их цвета

Однако веб-цвета не настолько комплексные. Более того, специалисты не рекомендуют использовать слишком «тонкие» переходы и оттенки, потому что во время использования разных браузеров или приложений они могут передаваться по-разному. Старые компьютеры или телефоны вообще не всегда «понимают» некоторые оттенки.

Поэтому для корректного отображения рекомендуется использовать «безопасные» веб-цвета. Основные правила, относящиеся к построению HEX-коду «универсальных» оттенков:

1. Нужно использовать десятичные цветовые значения: 0, 51, 102, 153, 204, 255, потому что они самые «простые» и корректно распознаются даже устаревшими системами и браузерами.
2. В формулах 16-ричного типа используются такие параметры, как 00, 33, 66, 99, CC, FF.
3. Эти цвета могут отображаться на компьютерах и других устройствах с 8-битным режимом, поэтому для верстки сайтов рекомендуются именно «безопасные» оттенки.

Существуют готовые палитры с кодами и цветовым соответствием, чтобы можно было визуально оценить «безопасный» оттенок и использовать его в своем проекте. Если при верстке планируется задействовать корпоративные цвета компании, разумно будет подобрать наиболее подходящий тон из таких таблиц.

Текстовые наименования

Среда программирования CSS предлагает пойти еще дальше и отказаться от кодов. Она умеет распознавать названия оттенков, поэтому достаточно будет просто прописать цвет в коде, чтобы CSS-язык «объяснил» браузеру, какой оттенок имелся в виду.

Для такого кодирования применяются не только базовые (красный, зеленый, желтый, синий), но и достаточно разнообразные тона, включая хаки, коралл, шоколадный и многие другие. Тем не менее, у такого написания есть минусы:

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

Поэтому большинство веб-кодеров и других специалистов в области дизайна предпочитают HEX-коды в обычном или сокращенном варианте.

Полезные сайты для работы с HEX-цветами

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

Adobe Color

Располагается по адресу: https://color.adobe.com/ru

Русифицированный ресурс, русский язык определяется автоматически, если у вас не отключено распознавание местоположения, системы и другие кукиз.

1. Переводить цвета в HEX-коды и наоборот. Например, если есть RGB-оттенок, то его значения вводятся в нужном порядке, а на выходе получается нужный код для веб-программирования.
2. Создавать гармонии для цветового решения. Это удобно, если у вас имеется один базовый оттенок, на основе которого надо продумать комплексное решение для сайта, приложения, брендбука и т.д. Гармонии будут предлагаться в нескольких стилях, от монохрома до комплиментарных и двойных комплиментарных схем.
3. Можно сделать обратный перевод: из hex-цвета в RGB или типографский формат CMYK, что потребуется, если вы создаете продукцию для печати на базе цветового решения сайта.
4. Готовые схемы и градиенты легко скачать в соответствующих разделах.

Также можно посмотреть «тренды» и вдохновиться чужими цветовыми решениями, скачать готовые схемы из библиотеки. Это гораздо быстрее и удобнее, чем с нуля разрабатывать собственное решение.

ColorScheme

Располагается по адресу: https://colorscheme.ru/

Универсальная конвертация цветов. Простой и лаконичный веб-ресурс, ничего лишнего, быстро загружается, интуитивно понятный.

1. Поддержка и конвертация из любых форматов в HEX и из него в другие, включая расширенный RGB (RGBA), HSB, LAB.
2. Сразу же отображается «безопасный» цвет в разделе Websafe, поэтому можно ориентироваться на него при создании цветовой схемы.
3. Можно регулировать точность перевода, чтобы получить наиболее близкий оттенок.
4. Предоставляются HTML-коды для вставки.

Также на сайте есть названия оттенков автомобилей — специфичная информация, но может кому-нибудь потребоваться, имена цветов для CSS, названия экзотических тонов, среди которых можно найти такие примечательные наименования, как «бабушкины яблоки» или «борода Абдель-Керима».

Color-HEX

Располагается по адресу: https://www.color-hex.com/

Англоязычный ресурс, но разобраться с ним будет несложно даже без знания языка. Позволяет получать внешнее отображение любого HEX-кода, а также его аналоги в большинстве форматов, включая CMYK для типографии или LAB — цветового пространства, которое используют фотографы и фоторетушеры.

1. Просчитывается соотношение зеленого-синего-красного в RGB-цвете относительно его HEX-кода, аналогично с циан-маджента-желтый-синий в типографском варианте.
2. Показывается, как цвет будет смотреться на белом фоне, что поможет вебмастеру прикинуть внешний вид оттенка на стандартном ресурсе.
3. Даются CSS-коды для большинства вариантов использования: фона, шрифта, рамки (border), тени.
4. Предлагается несколько цветовых схем, основанных на выбранном HEX-коде, которыми можно воспользоваться для создания своей.

Простой и удобный инструмент, крайне полезный для веб-верстки и быстрого подбора необходимых оттенков.

Htmlcolorcode

Располагается по адресу: https://htmlcolorcodes.com

Еще один англоязычный ресурс, предлагающий как основной сервис — преобразование цвета в HEX-код и обратно, так и много дополнительных приятных функций, среди которых:

1. Возможность «потыкать» палитру и выбрать красивые цвета с дальнейшим экспортом в виде отдельного оттенка или цветовой схемы.
2. На основе одного тона подбираются другие по принципу гармонии, поэтому достаточно выбрать один оттенок, чтобы автоматически «нашлись» другие.
3. Есть названия цветов на английском языке, причем, тоже можно просто выбрать оттенок местным аналогом «пипетки», чтобы ресурс предложил имена.
4. Есть библиотека цветов, в которой более сотни идей для вдохновения.

Ресурс выглядит как несколько урезанная версия аналогичного инструмента от Adobe, но работает хорошо, к тому же быстро загружается.

ColorHexa

Располагается по адресу: https://www.colorhexa.com/

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

Но у него есть собственные возможности:

1. Генератор градиентов. Это удобная возможность, когда нужно создать объемный рисунок, но трудно решить, какие цвета в какие должны перетекать и как это в результате будет смотреться. Инструмент поможет создать градиент, достаточно просто поместить начальные, промежуточные и конечные коды.
2. Смешивание цветов. Нужно набрать код, добавить знак «+» и ввести второй или третий. Система посчитает результат и выдаст его в виде получившегося цвета и его кода.
3. Вычитание цветов — работает аналогичным образом, только вместо плюса используется минус.

Также здесь есть 216 безопасных цветов и названия оттенков.

HexColorTool

Располагается по адресу: https://www.hexcolortool.com/

Главная особенность этого инструмента – не просто подбор тонов, а возможность отметить какой-либо один, а потом сделать его светлее или темнее.

Это крайне удобно, ведь зачастую весь дизайн строится вокруг одного цвета, меняется только подложка, тени и другие нюансы вокруг базового оттенка. Затемнение или осветление начинается от одного процента, максимум – 20%.

Также можно оценить опции:

• один и тот же оттенок можно оценить с разной прозрачностью;
• подобрать комплиментарную цветовую схему;
• сохранить получившиеся результаты для дальнейшей работы.

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

Заключение

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

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

В результате легко получается объединять творчество, эстетику и конкретные выражения для технической обработки.