Hex color code

Hex Color Codes

Color-Hex gives information about colors including color models (RGB, HSL, HSV, CMYK, XYZ, Yxy, Hunter Lab and CIE-Lab), Triadic colors, monochromatic colors and analogous colors calculated in color page. Color-Hex.org also generates a simple CSS code for the selected color. HTML element samples are also shown below the color detail page. Simply type the 6 digit color code in the box above and hit enter.

Best Favorite Colors

Users Latest Favorite Colors

Everything would be dark without colors. But thanks to their abundance, the world seems bright and colorful, and it is filled with millions of shades. Color Hex is an online tool that can help you identify a particular color by its name or numeric code. The list includes simple primary colors and touches extended options. And this service allows you to quickly find color combinations for your perfect project.

Introduction to Web Colors

Most of us spend time exploring the Internet, looking for exciting pictures or information, and the majority pays attention precisely to the web interface (fonts, colors). Thus, color is part and parcel of every website, which helps make the first impression about it and engages visitors for a long time. Therefore, many web developers or people who deal with HTML or CSS should know more about all colors and their variety.

Dealing with color requires a good understanding of how it works. There are patterns of colors that designers face on a daily basis. But there are other, less popular tones and shades. Let’s dig deeper and look at the complete classification of them.

Color patterns

In order for the site to look beautiful, the developers have to select certain color schemes. Their selection is almost no problem, but to make sure that the colors and shades complement each other, emphasizing the right points, it is a quite difficult task. A color model is an abstract form of describing color representation in the form of certain components or coordinates that consist of three or more values. Below are the most common color patterns.

RGB (Red, Green, and Blue) is an additive color model. Its prime colors are the same colors indicated in its title. It means that when you mix all the colors together, you get white. This model is used in all electronic devices, like computers or smartphones. It is written in the form: RGB (0,0,0), each of the colors can vary from 0 to 255 inclusive, where the value of 0,0,0 refers to black color, and the value of triple 255 goes to white. Additionally, a fourth parameter can be added – the Alpha channel, which demonstrates the level of transparency of a specific color.

RGBA (Red, Green, Blue, and Alpha) indicates on a little specification of the color with one extra digit. This digit describes the transparency of the color. The value can take either 0 (fully transparent) or 1 (fully opaque). A value of 0.5 makes the paint translucent.

HEX (Hexadecimal) looks like this #102945. And how to figure out what exactly this color is? The first two digits for red, the second for green, and the third for blue. Each character can take on the following values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 and a, b, c, d, e, f. Where #000000 is black, and #ffffffff is white.

CMYK (Cyan, Magenta, Yellow, and Key) is a scheme of color formation by the implementation of subtractive method. This color model includes: cyan, magenta, yellow, and the key color, which is black. This model is used in the printing industry for color printing. Paper, like all materials, reflects light. So, there is so much light reflected from this type of surface. Even though black can be obtained by combining yellow, cyan, and magenta paints in equal proportions, this approach is insufficient for several technical reasons. So, black is used separately.

HSL and HSV

HTML Color Names

Basic Colors

Let’s start with an Easy level – the basic colors. This group is well-known for everyone because it contains colors with standard names, and there are only 16 of them. But the problem is that a computer does not know colors by the names you know. Since computers “understand” only binary and hexadecimal calculus. So, hexadecimal is used to determine the brightness of the channel in the RGB color model.

At this point, there is no need to select each shade manually, as there is the Color Hex service. But let’s move forward to an Advance level.

Extended Colors

Of course, there are more than 16 colors, and those colors are specified into a separate group of extended colors. For HTML, the extended colors work as the basic ones and are represented in the same format but with other combinations of digits and characters.

Hex Triplet

For mortals and inexperienced users, all colors have just names and nothing more. But people who develop and create websites and their pages have extended knowledge about them.

All color titles possess unique names: not in terms of common denominations but previously determined digits and three-byte hexadecimal numbers. This “scary-named” term is represented by the same number of colors, including red, blue, and green. It is called hex-triplet. Each byte has a range of intensity from 00 to ff (considering decimal notation – from 0 to 255). And if you apply elementary math in this case, you will have this formula:

The number in the result indicates that there are over sixteen million colors, which can be used.

CSS Colors

Colors are widely used in CSS by the reason to change text colors, background landscape, shadows, gradients, etc. There are several ways to set colors in CSS.

The color attribute determines the color of the text. It is pretty simple. More importantly, there are varied patterns of color units available.

CSS offers 145 color names, from the simplest (black, white, red, orange, blue, and so on) to more specific ones (aquamarine, darkkhaki, orchid, crimson, indigo, etc.).

Color Harmony

When people talk about color harmony, they rely solely on subjective feelings, while the concept of color harmony is an objective regularity. Harmony is an equilibrium, asymmetry of forces. Our vision demand and affect complementary colors (opposite, complementary), creating this balance. The neutral color is gray. Our eye does not create any complementary color with it. To create harmonious combinations, various color order systems have been developed. These are the color circle and color triangles (image below). The opposite colors in this circle are complementary.

Conclusion

Now you know the basics. Start making your own palettes and patterns, experiment and practice with colors and paints, and then, you will definitely succeed!

FAQ Section

How do I find a color code?

There are over 16 million colors, so it is pretty impossible to memorize all the codes. And if you need to find the code within a second, you can use our Color Hex tool.

How many basic HTML colors?

According to the data, the complete list of primary HTML colors only includes sixteen colors.

What is an RGB palette?

RGB stands for Red, Green, and Blue. These three colors are essential because, with the help of their shades and tones, there are so many different colors.

How fast can Color Hex identify the needed color?

The Color Hex tool features an extensive base of colors. Thus, this service will identify the color within a second.

Источник

Color Hex Color Codes

Color codes encyclopedia providing information about any color

Color Codes

We all know that color is an essential aspect which makes our world rich and colorful. It also influences our attention, our mood and our actions. Your choices may make or break the attractiveness of our world.ColorCodeHex.com website provides free information for any color. You can enter any color code on ColorCodeHex.com and the website will display a description and automatically convert it to its equivalent value in Hexadecimal, RGB, CMYK, HSL, HSV, XYZ, XYY, CIE-Lab, CIE-LCHter-Lab. ColorCodeHex.com offers matching color schemes such as analogous, triadic, tetradic, monochromatic, split complementary, and complementary colors, according to the color code. Using this website, you can choose the right color scheme for your needs.

Color Code Picker

HTML Color Picker is the most powerful online tool for choosing colors in hexadecimal, RGB, HSV and CMYK values. It is widely used among web designers and developers.

Online Color Mixer

This is an Online Color Mixer. You can mix two colors using the color picker and see the result.

HTML Color Names

All modern browsers support the following 140 color names. In your HTML and CSS, you can use them by name, Hex color code, or RGB value.

Источник

HTML COLORS
Get your Html Color codes with our color picker, HEX code, RGB, RGBA, HSL and HSLA values, including HSV, HWB and CMYK. Go pick!

Ran out of imagination? Explore our color picker and choose the perfect color for your project. RGB, HEX, HSL, CMYK, we’ve got you covered. Our color picker is smart enough to understand all color codes.

We got hundreds of color combinations! Check out our color chart page to get inspired. Explore flat design colors, Google Material design, fluent colors, metro design scheme, all with HEX and RGB color codes.

#b676b1

#82caaf

#75c0e0

#fecf6a

#39a275

#df1c44

#8F3985

#194a8d

Its getting difficult to find the perfect color? Well, you can try one of these or go to our Color generators until you find the perfect one or use more of our tools. Good Luck!

Dont remember all color names? Well, you can take a look at our Color Names Section and end up your doubts. We have all the color groups and names. Enjoy!

Gradients for Designers and Artists

Gradient Hunt is a free and open platform for color inspiration with thousands of trendy hand-made color gradients

And a little description.
and so one

And a little description.
and so one

And a little description.
and so one

And a little description.
and so one

Dont know or dont remember something about coding colors? Well, we offer you the best HTML & CSS Color Tutorials with the most ask questions to the weirdest ones. Time to learn!

We have created a wonderful section to share your color palettes and we also did an awesome color palette creator for you to create the most epic palettes ever. Show us your talent!

Dont know how to create gradients? No problem, with our gradients and gradients generator you would realize how easy and beautiful is to create gradients. Take a look!

What are the 8 HTML Color Values?

Now we are talking about the 8 HTML color values (HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK).

The HEX Color Value is represented in hexadecimal, so the range goes from 00 to FF for each of them. The code is expressed as follows: #RRGGBB, each of the 2-digit values ​​being the range of each of the 3 colors, with which we choose the final value that represents each color.

The HWB Color Value, (Hue-Whiteness-Blackness), is very similar to the HSV (Hue, Saturation, Value) and HSL (Hue, Saturation, Lightness), except that neither HSV nor HSL provides saturation for whiteness.

FOR MORE INFORMATION VISIT THE LINKS THAT ARE IN THE TEXT OR VISIT OUR COLOR THEORY.

Common Colors

Источник

HTML COLORS
Get your Html Color codes with our color picker, HEX code, RGB, RGBA, HSL and HSLA values, including HSV, HWB and CMYK. Go pick!

Ran out of imagination? Explore our color picker and choose the perfect color for your project. RGB, HEX, HSL, CMYK, we’ve got you covered. Our color picker is smart enough to understand all color codes.

We got hundreds of color combinations! Check out our color chart page to get inspired. Explore flat design colors, Google Material design, fluent colors, metro design scheme, all with HEX and RGB color codes.

#b676b1

#82caaf

#75c0e0

#fecf6a

#39a275

#df1c44

#8F3985

#194a8d

Its getting difficult to find the perfect color? Well, you can try one of these or go to our Color generators until you find the perfect one or use more of our tools. Good Luck!

Dont remember all color names? Well, you can take a look at our Color Names Section and end up your doubts. We have all the color groups and names. Enjoy!

Gradients for Designers and Artists

Gradient Hunt is a free and open platform for color inspiration with thousands of trendy hand-made color gradients

And a little description.
and so one

And a little description.
and so one

And a little description.
and so one

And a little description.
and so one

Dont know or dont remember something about coding colors? Well, we offer you the best HTML & CSS Color Tutorials with the most ask questions to the weirdest ones. Time to learn!

We have created a wonderful section to share your color palettes and we also did an awesome color palette creator for you to create the most epic palettes ever. Show us your talent!

Dont know how to create gradients? No problem, with our gradients and gradients generator you would realize how easy and beautiful is to create gradients. Take a look!

What are the 8 HTML Color Values?

Now we are talking about the 8 HTML color values (HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK).

The HEX Color Value is represented in hexadecimal, so the range goes from 00 to FF for each of them. The code is expressed as follows: #RRGGBB, each of the 2-digit values ​​being the range of each of the 3 colors, with which we choose the final value that represents each color.

The HWB Color Value, (Hue-Whiteness-Blackness), is very similar to the HSV (Hue, Saturation, Value) and HSL (Hue, Saturation, Lightness), except that neither HSV nor HSL provides saturation for whiteness.

FOR MORE INFORMATION VISIT THE LINKS THAT ARE IN THE TEXT OR VISIT OUR COLOR THEORY.

Common Colors

Источник

Colors Tutorial

Colors are displayed combining RED, GREEN, and BLUE light.

Color Names

With CSS, colors can be set by using color names:

Example

CSS Color Values

With CSS, colors can be specified in different ways:

RGB Colors

RGB color values are supported in all browsers.

Each parameter defines the intensity of the color as an integer between 0 and 255.

For example, rgb(0,0,255) is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.

Example

Shades of gray are often defined using equal values for all the 3 light sources:

Example

Hexadecimal Colors

Hexadecimal color values are also supported in all browsers.

RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color.

For example, #0000FF is displayed as blue, because the blue component is set to its highest value (FF) and the others are set to 00.

Example

Shades of gray are often defined using equal values for all the 3 light sources:

Example

Upper Case or Lower Case?

You can use upper case or lower case letters to specify hexadecimal values.

Lower case are easier to write. Upper case are easier to read.

Color Names

CSS supports 140 standard color names.

In the next chapter you will find a complete alphabetical list of color names with hexadecimal values:

The currentcolor Keyword

The currentcolor keyword refers to the value of the color property of an element.

Источник

HTML Color Names

Color Names Supported by All Browsers

All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):

We just launched
W3Schools videos

COLOR PICKER

Get certified
by completing
a course today!

CODE GAME

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Web Courses

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Как работают 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-коды, вы получаете полезный и переносимый навык.

Источник

Hex color code

Hexadecimal Color Codes

This page demonstrates the six-digit hexadecimal representation of color of the form #RRGGBB, where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color. Using a hexadecimal code is the most reliable of the several ways you can define colors in HTML or style sheets.

You can use the Hex Hub to choose from among these colors as sorted by hue.

The colors come from a variety of sources including popular color sets. I also list many other colors you won’t find anywhere else—such as cheddar, lake michigan, moon, cinnamon, fog, titanium, battleship, mint, yolk, chili, espresso, cream city brick, hematite, safety vest, and more!

This page is part of The Color Spot, a collection of Web pages showing color codes used in HTML and style sheets. You can use a quick reference table to choose from among the many other color tables available.

Color swatches are defined by using the hexadecimal code for the color and are sorted by the hexadecimal code. The color names are descriptive and shouldn’t be used to specify a color unless you are using the 16 named colors or SVG colors. You can see shades of these colors to use in creating color schemes.

Click on the graphic on any page to see a table of color tables available or to see the meaning of the labels (Safe 16 SVG Hex3).

You can use different formats of this same information (To vote for this version—share this link.)
expanded version / compact version

Источник

CSS Color Codes

Use the following color picker or color charts to pick a color that you can use within your CSS code. The color picker provides the color values in hexadecimal and RGB. The color chart provides them in hexadecimal, RGB, and their color names.

Color Picker

Basic CSS Colors

Here is a table of the basic color names that have been in CSS since CSS1 (except orange, which was added in CSS 2.1).

Try clicking on a value. This will open the color in Quackit’s online editor so you can see how it looks (and grab the code). There’s also a link to a color tester where you can get another preview of the color.

CSS Color Names

Here is a full list of the CSS named colors as specified in CSS3 (CSS Color Module Level 4). These are based on the X11 color set. The above basic colors are also included in this chart.

Try clicking on a value. This will open the color in Quackit’s online editor so you can see how it looks (and grab the code). There’s also a link to a color tester where you can get another preview of the color.

How to use these Colors

You can apply any of these colors to a website or blog by using the relevant CSS code.

Take blue for example.

Below are quick CSS code examples for applying this color to various HTML elements.

Check out some basic color code examples using color names in the online editor.

Color names are case-insensitive (it doesn’t matter whether you use UPPERCASE or lowercase).

In Hexadecimal Notation

Here is the same color, but this time using hexadecimal notation instead of the color name.

This needs to be prefixed with a hash symbol, so it will become #0000ff when written in the code.

Check out some basic color code examples using hexadecimal values in the online editor.

Hex colors are case-insensitive (it doesn’t matter whether you use UPPERCASE or lowercase).

So 0000ff and 0000FF both display the same color.

In RGB Functional Notation

Here is the same color, but this time using RGB functional notation.

Check out some basic color code examples using RGB functional notation in the online editor.

Full-Page Example

Here is an example of where CSS color codes can fit into an HTML document.

This example uses embedded style sheets. You can also move the styles to an external style sheet so that you can apply the styles across the whole site from one file.

Transparent Colors

CSS also enables us to add transparent colors to our HTML elements. This means that you can add a color that’s semi-transparent — so that you can see the element behind it.

Here’s an example of adding transparency to a color using the rgba() function.

List of Color Values

Here’s a list of color values you can use with CSS.

List of Color Properties

Here’s a list of color-related properties you can use with CSS.

Web Safe Colors

This chart displays the 216 «web safe» colors. Click on a color to display it in a new page.

With current day monitors being able to display millions of colors, there’s little need to use the web safe colors any more. But it’s a great way to pick some basic colors nice and quickly. And hey, it’s still a nice looking chart!

Источник

What Are HEX Colors and How They Work in Design

What exactly is a HEX color? Learn the definition of HEX colors, how many there really are, and discover how to use them in your designs.

Hex colors are a way of representing colors from various color models through hexadecimal values. A hexadecimal color follows the format #RRGGBB, where RR is red, GG is green, and BB is blue. These hexadecimal integers can be in a range of 00 to FF to specify the intensity of the color.

A simple example of this is #FF0000. This color is pure red, because the red component is at its max value of FF and the green and blue components are at their lowest of 00.

Image via 3rieart.

Why Use Hex Colors?

Using hex color codes to represent different colors is an easy way to differentiate between colors. Once you understand how they work, you can easily change the red, blue, or green values to create a different shade. This is particularly convenient given that you have such a range of color options with hex color codes, which guarantees color exactness.

How Many Hex Colors Are There?

In standard #RRGGBB notation, there are 256^3 color combinations available, or 16,777,216. This is because each color value RR, GG, BB can contain 256 different values, ranging from 00 to FF. Therefore, the number of combinations is 256^3.

Image via Look Studio.

An interesting side note is that many modern browsers will also support transparency. This means that an entirely new set of color codes exists in the form of #AARRGGBB. In this instance, there are 4,294,976,296 color codes, or 256^4. It’s important to keep in mind that the addition of the transparency does not indicate that there are extra colors, since solely adding transparency does not change the color. This merely adds more information and more available color codes depending on transparency, or the level of opacity.

How Do Hex Colors Work?

Hexadecimal colors use sixteen different values to represent a single shade of color, whether it be red, green, or blue. This is powerful because it gives you a broad range of shades for each color – specifically sixteen. Each color is broken down into a number or character, ranging from 0-9 and A-F, where 0 is the minimum value and F is the maximum. Next, the color format is separated into #RRGGBB, where RR is red, GG is green, and BB is blue.

This gives you an idea of just how many color combinations are possible with hex color codes, which is why they are used so often.

Want to learn more about color? Check out these articles:

Источник

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

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

Основы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

How To Use CSS Hex Code Colors with Alpha Values

Introduction

In CSS, there are several formats for colors that can be used. Common ones include hex (hexadecimal) codes, RGB (red, green, blue), RGBA (red, green, blue, alpha), and HSL (hue, saturation, lightness).

In this article, you will review hex color codes and explore using alpha values for transparency.

Prerequisites

If you would like to follow along with this article, you will need:

Using Color Keywords

First, CSS supports color keywords. Most browsers and devices can render these named colors into color values.

For example, if you wanted your text to have red color, you could use the keyword red :

Different value formats, like hex codes, will allow you to customize beyond 140 colors.

Understanding Hexadecimal Values

You are probably most used to counting with decimal values (or base 10):

In others words, a single-digit only has 10 possible values ( 0 to 9 ), and after that, it must increase to two digits ( 10 ).

Hexadecimal values are base 16 instead of base 10:

For example, these are all valid hexadecimal values:

Next, learn how to use hexadecimal values in CSS styles.

Using Hexadecimal Values in CSS

To create custom colors, you can use combinations of the hexadecimal numbers described above to create hex codes, which represent specific colors.

Colors are represented by a combination of red, green, and blue values. The lowest value ( 00 ) will be the darkest version of the color (closest to black), and the highest value ( FF ) will be the lightest version of the color (closest to white).

Setting all three pairs to the lowest value ( 00 ) will produce a solid black color:

Setting all three pairs to the highest value ( FF ) will produce a solid white color:

Let’s say you wanted the heading text color to be a bright red. To achieve this, you can set the red ( RR ) value to the highest possible value ( FF ). Since you do not want any green or blue, you can set the green ( GG ) and blue ( BB ) values each to the lowest possible value ( 00 ).

This code will render as:

The approach you adopt should adhere to the coding standards used by your project.

Next, learn how to use alpha values with CSS hex codes.

Adding an Alpha Value to CSS Hex Codes

Using an alpha value to update a color’s transparency will change the hex code format from #RRGGBB to #RRGGBBAA (where alpha is A ). The first six values (the red, green, and blue ones) remain the same.

The AA value in #RRGGBBAA can range from the lowest value possible ( 00 ) to the highest value possible ( FF ). Lowering the value will cause the visibility to become fainter and fainter until it becomes transparent. Raising the value will cause the visibility to become more and more opaque.

Let’s say you want a blue color that is fairly transparent.

First, start with the hex code for the blue color:

This code will render as:

Next, you can change the transparency by adding two more values to the hex code. In this example, the alpha value is set to 80 :

This code will render as:

The alpha value in the hexadecimal format can be a little confusing because it’s hard to conceptualize what a base 16 value for transparency will actually look like. However, the benefit is if you’re already using hex codes in your codebase, now you can update them to change the transparency, too! No color format changes required.

Using Chrome DevTools Tip for Picking Colors

One quick tip for seeing your colors in different formats is with the Chrome DevTools.

Once your DevTools panel is open, look for the color your checking in the styles section. Once you find it, you can click the box to the left of the color to adjust the values directly. You can also hold SHIFT and click on the box to toggle through your various format options with the values correctly converted.

This example adjusts the alpha value and color value. Then toggles between hex code format, RGBA format, and HSLA format.

Conclusion

In this article, you reviewed hex color codes and explored using alpha values for transparency.

The browser support for #RRGGBBAA hex codes requires modern browsers. It is not available in older versions of Internet Explorer. Reference Can I Use #rrggbbaa hex color notation to see if this format is suited for the target audience of your project.

If you’d like to learn more about CSS, check out our CSS topic page for exercises and programming projects.

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Источник

HTML Color Codes

Use this page to get HTML color codes for your website. The colors are represented by various color models, such as hexadecimal, RGB, HSL, etc.

To learn about HTML colors and how to apply them to your website, check out the HTML colors section of the HTML tutorial.

Color Picker

CSS Color Names

Here is a table of the CSS color names. These are based on the X11 colors, and are supported by all major browsers.

Try clicking on a value. This will open a color tester where you can test different colors against the page background.

More Color Charts

Here’s a quick glimpse back in time to see how colors used to be done on the web.

Web Safe Colors

This chart displays the 216 «web safe» colors. Click on a color to display it in a new page.

Are the Web Safe Colors Still Relevant?

The «web safe color palette» was used heavily in the early days of the web, especially in the late 1990s.

Being «web safe» meant that the color would be displayed consistently across different computer systems. Back then, most computer monitors had an 8-bit color depth, which means they could display only 256 colors. Also, some of those colors weren’t displayed consistently between different systems.

If a website specified a color that wasn’t available on the monitor, it would either display another color that was available, or attempt to make up the color by using a dithering process.

Nowadays, there’s usually no need to limit yourself to the web safe colors, as most computers (and even mobile devices) can display millions of colors, so the issue is no longer prevalent.

However, there’s nothing to stop you continuing to use this color palette today. Using web safe colors can provide a bright and bold look, and could bring a fresh new look to your website!

HTML3 and HTML4 Color Names

There was a time where the HTML specification defined the color names that could be used within HTML documents. This is no longer the case — CSS has taken over the responsibility for defining colors within HTML documents.

The following color code chart contains the 16 official HTML color names from the HTML 3.2 specification, which became an official recommendation on 14 January 1997.

The same color names were included in the HTML 4.01 specification, which became an official recommendation on 24 December 1999.

These colors were originally picked as being the standard 16 colors supported with the Windows VGA palette.

RGB & Hexadecimal

However, due to the limitations of computer monitors at the time, web designers often limited themselves to just the web safe colors.

CSS1 & CSS2

Both the CSS1 specification (17 Dec 1996) and the CSS2 specification (12 May 1998) included the same 16 color names that were defined in HTML 3.2 and HTML 4.0.

As with the HTML specifications, CSS supported the use of hexadecimal notation to specify colors outside this range.

System Colors

In addition to being able to assign color keyword values (color names, hex values, RGB), CSS2 allowed authors to specify colors in a manner that integrated them into the user’s graphic environment.

The following lists additional values for color-related CSS values and their general meaning.

ActiveBorder Active window border. ActiveCaption Active window caption. AppWorkspace Background color of multiple document interface. Background Desktop background. ButtonFace Face color for three-dimensional display elements. ButtonHighlight Dark shadow for three-dimensional display elements (for edges facing away from the light source). ButtonShadow Shadow color for three-dimensional display elements. ButtonText Text on push buttons. CaptionText Text in caption, size box, and scrollbar arrow box. GrayText Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color. Highlight Item(s) selected in a control. HighlightText Text of item(s) selected in a control. InactiveBorder Inactive window border. InactiveCaption Inactive window caption. InactiveCaptionText Color of text in an inactive caption. InfoBackground Background color for tooltip controls. InfoText Text color for tooltip controls. Menu Menu background. MenuText Text in menus. Scrollbar Scroll bar gray area. ThreeDDarkShadow Dark shadow for three-dimensional display elements. ThreeDFace Face color for three-dimensional display elements. ThreeDHighlight Highlight color for three-dimensional display elements. ThreeDLightShadow Light color for three-dimensional display elements (for edges facing the light source). ThreeDShadow Dark shadow for three-dimensional display elements. Window Window background. WindowFrame Window frame. WindowText Text in windows.

These system colors have been deprecated in CSS3. They were initially replaced by the appearance property, but that was subsequently dropped from the CSS3 specification.

CSS 2.1

The CSS 2.1 specification (07 June 2011) added orange to the list of color names, bringing the total to 17 color names.

Interestingly, CSS Color Module Level 3 became an official recommendation on the same day, and provided 147 color names. More on that below.

System Colors

CSS 2.1 also included the various system colors that were specified in CSS2 (above).

CSS3 changed the way that CSS is defined.

CSS3 consists of many different modules, each with a specific focus. For example, there’s a module for backgrounds and borders, another for text, a module for grid layouts, another for colors, etc.

This is in contrast to previous specs, where, CSS was released as a whole specification. For example, CSS2, CSS 2.1, etc. All aspects of CSS were included in each specification.

So now, colors are defined in the «CSS Color Module». CSS3 started with CSS Color Module Level 3, which became an official recommendation on 07 June 2011 (the same date that CSS 2.1 became an official recommendation!). It then proceded to CSS Color Module Level 4. But it’s all considered to be CSS3. Only the specific module number changes now.

So the colors in the chart at the top of this page can all be considered «CSS3 colors».

Источник

Play With Hex To Get Inspiration With Web Color Palette Generator, CSS Gradient Generator And Find HTML color codes (Hex), RGB Color Codes For Free

Sign Up Now, It’s free

Free Tools like Color Picker, Color Wheel, Image To Palette, Color Gradients online

Easy To Manipulate Values Using Website Algorithms Like Convert RGB To Hex, HSV To Hex, Hex To RGB And More

Advanced Values Of Hex (HTML) Color Codes, Color Schemes, RGB Color Codes, CMYK, Shades, Tints, Tones And More

Compitable With

Designed For You

Colorhex.net is a multi-purpose Website Designed To Working In All Web Browsers and all major devices which is a cross-platform website that gives information about

HTML Color Codes

Our Services

big formulas and algorithms for big information that we give here in Colorhex.net passed on our knowledge, so take advantage and find your code color online

now it’s easy to get colors you want from images which you can use these color as helper background or gradients for these image and can be exported to many extensions

make a nice color gradient with our tool and get your pre CSS code which can easily use in your projects or export to Images as you like, now go and get image or CSS color codes

in Colorhex.net there is a big database one of these is about color names also you can find your color information by searching color by name using the form above

find out information and values quickly by using color wheel it’s a speed tool using when you need to manipulate with many values at the same time, make your rule

Is a great tool that used to get over 16,777,216 hex code in an easy way which is designed to work in all devices, just drag your mouse on it and get colors as hex code

In the early years of computing, the displays supported only 256 colors, 216 lists of these colors suggested as web standard which can be displayed in all screens, find theme here and go

Leave a Comment

it’s important web site to give many information about colors

it’s a create website and very usefull

To leave a comment please

Information You Want

How To Get Information For Any Color

How to make a color Palette

How to make a color Gradient

RGB: the RGB is a shortcut of (Red colour, Green colour, Blue colour) which we can mix different values of these colours to produce new colour depending on mixing values and the main uses of

RGB color

CMYK: the CMYK is a shortcut of (Cyan colour, Magenta colour, Yellow colour, Key colour (Black)) which we can mix a different values of these colours to produce new colour depending on mixing values and The main purpose of the CMYK colour model is used in colour printing, The Minimum Value of CMYK is (0) and The Maximum is (1) or from (0) to (100).

Binary: which represents two values 0 or 1.

Octal: which represents the values from (0) to (7).

Complementary colour: the relationship between Complementary colours are the colours that are opposite each other in the colour wheel.

Split Complementary colour: A split complementary colour scheme is one where a primary colour is used with the two analogous colours to its complement.

Triadic colour: are three colours that are equally spaced from each other on colour wheel, the easiest way to adjust these colours by adding the equal-angel triangle on colour wheel.

Tetradic colour: it’s used four colours arranged as complementary and as rectangle shape on colour wheel.

Analogous colour: it’s the colour lie next to each other on the colour wheel.

Monochromatic colour: it’s a colours from the same family on the colour wheel and these colour different from each other by the colour lightness and darkness.

Источник

HTML Color Shades

Shades of Gray

Gray colors are displayed using an equal amount of power to all of the light sources.

To make it easy for you to select a gray color we have compiled a table of gray shades for you:

An anomaly in the table above is that HTML Gray is darker than DarkGray.

The color names of HTML / CSS was inherited from the X11 standard.

HTML / CSS defined gray at the midpoint of the 8-bit gray scale (128,128,128).

X11 defined gray to be (190,190,190); which is closer to HTML silver.

Gray / Grey Web Colors

There are several gray color names in HTML / CSS.

All gray colors are spelled as gray (not grey).

This spelling was inherited from the X11 standard.

All modern browsers accept both gray and grey, but early versions of Internet Explorer did not recognize grey

Shades of Red

If you look at the color table below, you will see the result of varying the red light from 0 to 255, while keeping the green and blue light at zero.

Click on the hexadecimal values, if you want to analyze the color in our color picker.

16 Million Different Colors

The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256).

Most modern monitors are capable of displaying at least 16384 different colors.

Web Safe Colors?

Many years ago, when computers supported maximum 256 different colors, a list of 216 «Web Safe Colors» was suggested as a Web standard (reserving 40 fixed system colors).

This is not important now, since most computers can display millions of different colors.

This 216 hex values cross-browser color palette was created to ensure that all computers would display the colors correctly when running a 256 color palette:

Источник

Hex color code

The CSS data type represents a color. A may also include an alpha-channel transparency value, indicating how the color should composite with its background.

A can be defined in any of the following ways:

Note: This article describes the data type in detail. To learn more about using color in HTML, see Applying color to HTML elements using CSS.

Syntax

The data type is specified using one of the options listed below.

Note: Although values are precisely defined, their actual appearance may vary (sometimes significantly) from device to device. This is because most devices are not calibrated, and some browsers do not support output devices’ color profiles.

Named colors

The complete list of such keywords is available here.

currentcolor keyword

The currentcolor keyword represents the value of an element’s color property. This lets you use the color value on properties that do not receive it by default.

If currentcolor is used as the value of the color property, it instead takes its value from the inherited value of the color property.

RGB color model

The RGB color model defines a given color in the sRGB color space according to its red, green, and blue components. An optional alpha component represents the color’s transparency.

rgb() or rgba() : rgb[a](R, G, B[, A]) or rgb[a](R G B[ / A])

R (red), G (green), and B (blue) can be either s or

, where the number 1 corresponds to 100% (full opacity).

HSL color model

The HSL color model defines a given color in the sRGB color space according to its hue, saturation, and lightness components. An optional alpha component represents the color’s transparency.

Many designers find HSL more intuitive than RGB, since it allows hue, saturation, and lightness to each be adjusted independently. HSL can also make it easier to create a set of matching colors (such as when you want multiple shades of a single hue). However, using HSL to create color variations can produce surprising results, as it is not perceptually uniform. For example, both hsl(240 100% 50%) and hsl(60 100% 50%) have the same lightness, even though the former is much darker than the latter.

HSL colors are expressed through the functional hsl() and hsla() notations.

hsl() or hsla() : hsl[a](H, S, L[, A]) or hsl[a](H S L[ / A])

S (saturation) and L (lightness) are percentages. 100% saturation is completely saturated, while 0% is completely unsaturated (gray). 100% lightness is white, 0% lightness is black, and 50% lightness is «normal».

, where the number 1 corresponds to 100% (full opacity).

HWB color model

Similar to HSL color model, the HWB color model defines a given color in the sRGB color space according to its hue, whiteness and blackness components.

As with HSL, HWB can be more intuitive to use than RGB. A hue is specified in the same way, followed by the amount of whiteness and blackness, respectively, in percentage values. This function also accepts a alpha value.

Note: There is no separate hwba() function as there is with HSL, the alpha value is an optional parameter, if it is not specified an alpha value of 1 (or 100%) is used. To specify this value a forward slash ( / ) must follow the blackness value before the alpha value is specified.

HWB colors are expressed through the functional hwb() notation.

Note: The HWB function does not use commas to separate its values as with previous color functions.

W (whiteness) and B (blackness) are percentages. These two colors mix, so you would need 0% whiteness and 100% blackness to produce the color black. And vice versa 100% whiteness and 0% blackness for the color white. 50% of both values renders a mid grey and any other variations a shade of the hue specified.

, where the number 1 corresponds to 100% (full opacity). When specifying an alpha value it must be preceded with a forward slash ( / ).

System Colors

In forced colors mode (detectable with the forced-colors media query), most colors are restricted into a user- and browser-defined palette. These system colors are exposed by the following keywords, which can be used to ensure that the rest of the page integrates well with the restricted palette. These values may also be used in other contexts, but are not widely supported by browsers.

Note: Note that these keywords are case insensitive, but are listed here with mixed case for readability.

Lab colors

CSS Color 4 introduced Lab colors. Lab colors are specified via the lab() functional notation. They are not limited to a specific color space, and can represent the entire spectrum of human vision.

LCH color model

CSS Color 4 introduced LCH colors. LCH colors are specified via the lch() functional notation. They are not limited to a specific color space, and can represent the entire spectrum of human vision.

In fact, LCH is the polar form of Lab. It is more human friendly than Lab, as its chroma and hue components specify qualities of the desired color, as opposed to mixing. It is similar to HSL in that way, although it is far more perceptually uniform. Unlike HSL that describes both hsl(60 100% 50%) hsl(240 100% 50%) as having the same lightness, LCH (and Lab) correctly ascribes different lightnesses to them: the former (yellow) has an L of 97.6 and the latter (blue) an L of 29.6. Therefore, LCH can be used to create palettes across entirely different colors, with predictable results. Please note that LCH hue is not the same as HSL hue and LCH chroma is not the same as HSL saturation, although they do share some conceptual similarities.

color() colors

CSS Color 4 introduced this notation. Colors specified via the color() function can specify a color in any of the predefined color spaces, as well as custom color spaces, defined via the @color-profile rule.

Interpolation

In animations and gradients, values are interpolated on each of their red, green, and blue components. Each component is interpolated as a real, floating-point number. Note that interpolation of colors happens in the alpha-premultiplied sRGBA color space to prevent unexpected gray colors from appearing. In animations, the interpolation’s speed is determined by the timing function.

Accessibility considerations

Some people have difficulty distinguishing colors. The WCAG 2.0 recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. See Color and color contrast for more information.

Источник