Html color code

Html color code

Click on any color square to get its HTML color code.

HTML Color Picker

Move the horizontal slider to chose color and then click into color square to get HTML color code.

*You can access the old version of color picker here: LINK

HTML Color Codes Theory

So you are wondering «Does this weird combination of letters and numbers have any meaning?» Well the answer is «Yes» and this is how it goes:)

HTML Codes format:
Each HTML code contains symbol «#» and 6 letters or numbers. These numbers are in hexadecimal numeral system. For example «FF» in hexadecimal represents number 255 in Decimal.

Meaning of symbols:
The first two symbols in HTML color code represents the intensity of red color. 00 is the least and FF is the most intense. The third and fourth represents intensity of green and fifth and sixth represents the intensity of blue. So with combining the intensity of red, green and blue we can mix almost any color that our heart desire;)

Support this website

Please support this website by linking to it. All you have to do is to put the code below on your website. Or spread the word trough social networks (Twitter, Facebook):

Источник

There are three different ways of defining color. The easiest way is to name the color in English. For example: black, white, red, green and blue. I have put together the names of the color which are supported in HTML

This color code is not recommended because Internet Explorer is the only browser that supports RGB values in HTML.

RGB is a shortcut from Red, Green, Blue. Every single color of these can take any value between 0 (which doesn’t matter) and 255 (the full proprieties of that color). I have put together the way of how you write RGB colors. If you use a browser that is not Internet Explorer you will have no result.

The hexadecimal system is pretty hard at first look but with all this, we assure you that once the time passing, and with a bit of practice, you will understand it fully. The hexadecimal color system is the standard system for all web browsers. Is confident and compatible not only in web applications.

The hexadecimal system is a representation of 6 color characters. The first two characters (RR) represent the red value, and the next two (GG) are green, and the last two (BB) are blue.

Decimal

In this way the possibilities are bigger and the system can have 16 values.

An example of hexadecimal code would be:

The «F» letter is the maximum value that the system can take. When a browser sees this code it will show the white color. In case you want to find out the numerical value of this color we have the next formula:

The formula is very simple. We take the first value of the «F» or 15 and we multiply it by 16 and we add to the second value 15. The result is 255, the maximum value whom a primary color can have.

True colors

The hexadecimal system is very used for creating pages. This is compatible with the majority of the browsers, in this way the displayed colors for a web page will not be changed. As an assurance, use the colors true colors like :»#0011EE», «#44HHFF», or «#117788». This type of colors will not be changed in a browser.

Here we have a list of the true colors

We recommend to stick to these 216 «web-safe». However, 8-bit color displays were much more common when the 216-color palette was developed than they are now. Anyway, it has been discovered that only 22 of the 216 colors in the web-safe palette are reliably displayed without inconsistent remapping on 16-bit computer displays.

We attached here a table with these 22 really safe colors:

Источник

Html color code

Management

Теги HTML

Здесь цвет фона веб-страницы задан как #fa8e47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (fa) определяют красную составляющую цвета, цифры с третьей по четвертую (8e) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.

Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.

Чтобы легче ориентироваться в шестнадцатеричных цветах, примите во внимание некоторые правила.

Рис. 1. Цветовой круг

Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели подойдет графический редактор, умеющий работать с разными цветовыми моделями, например, Adobe Photoshop. На рис. 2 показано окно для выбора цвета в этой программе, линией обведено полученное шестнадцатеричное значение текущего цвета. Его можно скопировать и вставить к себе в код.

Рис. 2. Окно для выбора цвета в программе Photoshop

Веб-цвета

Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей — красной, зеленой и синей, устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 — 216 цветов. Пример веб-цвета — #33ff66.

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

Цвета по названию

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

Источник

HTML Online Training

19 Lectures 2 hours

HTML Web Development

18 Lectures 1.5 hours

Learn HTML

13 Lectures 40 mins

Colors are very important to give a good look and feel to your website. You can specify colors on page level using tag or you can set colors for individual tags using bgcolor attribute.

The tag has following attributes which can be used to set different colors −

bgcolor − sets a color for the background of the page.

text − sets a color for the body text.

alink − sets a color for active links or selected links.

link − sets a color for linked text.

vlink − sets a color for visited links − that is, for linked text that you have already clicked on.

HTML Color Coding Methods

There are following three different methods to set colors in your web page −

Color names − You can specify color names directly like green, blue or red.

Hex codes − A six-digit code representing the amount of red, green, and blue that makes up the color.

Color decimal or percentage values − This value is specified using the rgb( ) property.

Now we will see these coloring schemes one by one.

You can specify direct a color name to set text or background color. W3C has listed 16 basic color names that will validate with an HTML validator but there are over 200 different color names supported by major browsers.

Note − Check a complete list of HTML Color Name.

W3C Standard 16 Colors

Here is the list of W3C Standard 16 Colors names and it is recommended to use them.

Example

Here are the examples to set background of an HTML tag by color name −

A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB).

A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Paintshop Pro or MS Paint.

Each hexadecimal code will be preceded by a pound or hash sign #. Following is a list of few colors using hexadecimal notation.

Example

Here are the examples to set background of an HTML tag by color code in hexadecimal −

This color value is specified using the rgb( ) property. This property takes three values, one each for red, green, and blue. The value can be an integer between 0 and 255 or a percentage.

Note − All the browsers does not support rgb() property of color so it is recommended not to use it.

Following is a list to show few colors using RGB values.

Example

Here are the examples to set background of an HTML tag by color code using rgb() values −

Browser Safe Colors

Here is the list of 216 colors which are supposed to be safest and computer independent colors. These colors very from hexa code 000000 to FFFFFF and they will be supported by all the computers having 256 color palette.

Источник

Color Codes

Color Codes come in three different forms:

Contents

Color Examples

W3C have listed only 16 valid color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

If you want valid HTML or CSS, use the HEX values instead.

CSS3 introduced the possibility to use RGBA (RGB with Alpha) colors.

It can be used like this:

Where a is the level of red, b the level green and c the level blue (must all be a number between 0 and 255).

d is the transparency of the color, and it must be a value between 0 and 1 (ex : 0.7).

Example

Will render like this: Lorem ipsum

216 «Web safe» Colors

Below is a table showing the 216 web safe colors. The really safe colors are underlined:

Web safe colors used to be really important when 8-bit was the standard color setting for most users. However, now with most people using at least 24-bit, moving to 36-bit, they are less important, with more people using hex or decimal colors.

X11 Color Names

From 2005, most general use browsers have given some of the colors names.

Источник

HTML Colors

By Priya Pedamkar

Introduction to HTML Colors

This article covers how to use colors in the website using HTML in simple and easy way. Colors play an important role in creating websites to look and feel good. There is no individual tag built-in HTML; instead, it makes use of style attribute or the color property. Precisely, the colors are embedded in the HTML elements using Cascading Style Sheet (CSS). Colors give an elegant look to the web page. Adding colors to the web page includes setting background colors, tables, paragraphs, etc.

How to Set a Background Color in HTML?

Making background color brighten makes the website to look pretty and bolder. It is done by using colors, Hex color codes. RGB and RGBA color values (Alpha value 0 to 1).

Web development, programming languages, Software testing & others

Hex color is applied directly to the Html code using the Style attribute inside the body element of the Html. Hex is a combination of both numbers and letters. Below is the example illustrating Background color on the web page.

Code:

Code Snippets:

Code:

How to Apply Color to Text in HTML?

Applying color to the HTML text is quite easy; we can add/ change the color of the text by applying three ways, namely Hex color, HSL values and color names. The following are the three different techniques to apply color to the corresponding web pages.

1. Color Names

This is quite simple by using English color names when the application is straight forward these color names are used. Specifying color names are direct methods, and W3C has announced 16 basic colors (Black, yellow, red, Maroon, Grey, Lime, Green, Olive, Silver, Aqua, Blue, Navy, White, Purple, Fuchsia, Teal)

2. HSL

Hue saturation and lightness color values. Hue is defined in 0 to 360-degree, saturation and lightness from 0 to 100 %.

3. Hex Color

To get a precise result six-digit hexadecimal number is applied. To elaborate, the first two digits denote Red, the next two denote Green, the other two denote Blue value and preceded by ‘#’.

The following example explains the different ways of applying colors to the documents.

Code:

Output:

There are different methods to do text color as HTML has a lot of customizable applications.

Источник

In HTML, color is defined using CSS properties. The property you use for a particular situation will depend on what it is you’re applying color to. For example, two popular CSS properties for defining color are the color property (for applying foreground color to the text) and background-color property (for applying color to an element’s background).

When it comes to specifying an actual color, that’s where things get a little interesting. There are many ways of specifying color in HTML. Most web developers choose their preferred method and stick with that. Having said that, you should be aware of the various methods for specifying a color value, because, you may find that you prefer to use a combination of methods.

But let’s not get ahead of ourselves. Let’s look at a couple of simple examples first.

HTML Color Examples

Here are some examples of applying color to HTML elements.

Text Color

To specify text color, you need to use color: , where is a color name, hex code, or decimal RGB value.

HTML color example

Text Background Color

To specify background color, use the background-color property:

HTML color example

Text Border Color

To specify border color, use the border property, along with the border width and style:

HTML color example

Div Color

You can apply color to any element and it will cascade down to all elements within that element. For example, here we apply colors to the

Div and Text

Here’s another example. This time, I’ve added some more text, with specific styles that over-ride those defined at the

The surrounding ‘div’ element has got the following properties applied against it: background-color:yellow; color:blue; border:1px solid black;

Specifying a Color Value

It might be tempting to just stick to color names when specifying your HTML colors. After all, color names are easy to remember. However, I recommend getting familiar with hexadecimal and RGB color values. This is because, hexadecimal and RGB colors provide you with a far greater range of colors than color names. If you get stuck while trying to come up with a color scheme for your website, color names can be quite limiting. Hexadecimal and RGB will open your options right up. Especially if you use a color picker like the one below.

Источник

Html color code

Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате RGB, RGBA, HSL, HSLA.

По шестнадцатеричному значению

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трёх цветов — красный, зелёный и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зелёную, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.

По названию

Браузеры поддерживают некоторые цвета по их названию. В табл. 1 приведены названия, шестнадцатеричный код, значения в формате RGB, HSL и описание.

С помощью RGB

Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359.

Рис. 1. Цветовой круг

Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.

Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.

Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

Пример

Предупреждение

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

Источник

HTML Hex Color Codes

Example: In this example, we simply print the different hex color codes by using the background-color style in HTML heading tag.

Output:

HTML Color Codes are the medium of representing the colors format that a computer could read and display. The most used Color codes are Hex codes. Hex codes are three-byte hexadecimal numbers (consist of six variables), with a pair of characters in the Hex code, representing the intensity of red, green, and blue in the color respectively.

Format of Hex Color Codes: Each Hex color code contains the symbol “#” followed by 6 alphabets or numbers. Numbers are in the hexadecimal numeric system. There are 1,67,77,216 different color possibilities. 00 value range of the code represents the lowest intensity of color on the other hand FF value range of code represents the highest intensity.

Meaning of a Hex code:

The white color is a mixture of the three primary colors at full intensity representing the Hex color code #FFFFFF.

The black color is a mixture of the three primary colors at the lowest intensity representing the color code #000000.

Источник

CSS Colors

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.

Источник

Html color code

Management

Теги HTML

Здесь цвет фона веб-страницы задан как #fa8e47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (fa) определяют красную составляющую цвета, цифры с третьей по четвертую (8e) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.

Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.

Чтобы легче ориентироваться в шестнадцатеричных цветах, примите во внимание некоторые правила.

Рис. 1. Цветовой круг

Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели подойдет графический редактор, умеющий работать с разными цветовыми моделями, например, Adobe Photoshop. На рис. 2 показано окно для выбора цвета в этой программе, линией обведено полученное шестнадцатеричное значение текущего цвета. Его можно скопировать и вставить к себе в код.

Рис. 2. Окно для выбора цвета в программе Photoshop

Веб-цвета

Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей — красной, зеленой и синей, устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 — 216 цветов. Пример веб-цвета — #33ff66.

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

Цвета по названию

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

Источник

HTML Colors

HTML Color Selector

Answers to Questions (FAQ)

What is the definition of an HTML color code?

An HTML code is usually composed of the # character (hash) followed by 6 hexadecimal characters ( 0-9a-f ). The 6 characters correspond to a triple of 3 pairs of 2 characters, respectively coding the values of red, green and blue (RGB) via a hexadecimal code (between 00 and ff = 255)

Example: #ff007f corresponds to ff (255) red, 00 green and 7f (127) blue. This mixture corresponds to the color Rose

Why some HTML color codes have 3 characters?

A variant in the writing of codes is allowed: a code with 3 characters, one for red, one for green, one for blue (instead of 2 for each). This limits the number of available values (16 values per color instead of 256), but has the advantage of reducing the write size. To get a long code, double each character.

Example: ‘# f70’ matches f ( ff : 255) red, 7 ( 77 => 119) green and 0 blue. This mixture corresponds to an orange color

What is the list of colors with an html name?

Source code

dCode retains ownership of the «HTML Colors» source code. Except explicit open source licence (indicated Creative Commons / free), the «HTML Colors» algorithm, the applet or snippet (converter, solver, encryption / decryption, encoding / decoding, ciphering / deciphering, translator), or the «HTML Colors» functions (calculate, convert, solve, decrypt / encrypt, decipher / cipher, decode / encode, translate) written in any informatic language (Python, Java, PHP, C#, Javascript, Matlab, etc.) and all data download, script, or API access for «HTML Colors» are not public, same for offline use on PC, mobile, tablet, iPhone or Android app!
Reminder : dCode is free to use.

Источник

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 QHMit’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 QHMit’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!

Источник

A Beginner’s Guide to HTML Color Codes

Written by Anna Fitzgerald

Adding color to your site can evoke emotion, set the ambiance, and make your overall design more cohesive.

In this post, we’ll cover everything you need to know about design principles related to HTML color codes so you can update and add to the colors on your site. Whether you’re redesigning your website or choosing a color palette for the very first time, learning this essential skill can help you create a site that reflects the look and feel of your brand consistently.

Let’s start by defining what HTML color codes are.

HTML Color Codes

We see colors everyday and have names for them, like red and yellow. Within these colors are hundreds of different shades that we also have names for. There’s not just pink, for example, but neon pink, bubblegum pink, rose, fuchsia, magenta, and countless others.

The problem is, even as we try to get more specific, these color names can be interpreted differently by different people. One person’s neon pink might be another’s fuchsia, which might be someone else’s magenta.

To avoid this imprecision online, we use HTML color codes. Computers can interpret HTML color codes to display the appropriate color. These codes can come in a variety of formats, including Hex color codes. Let’s take a closer look at this format below.

HTML Hex Color Codes

Hex color codes is the most popular HTML format used in websites and other software applications. Every hex code is made up of three byte hexadecimal numbers preceded by a hashtag.

A byte is a pair of characters in the Hex code that represent the intensity of the three primary colors (red, green, and blue) in the color. Values range from 00 (the lowest intensity of a primary color) to FF (the highest intensity of a primary color).

That means every hex code consists of three pairs, or six characters in total. These six characters can be any combination of ten numerals (0-9) and six letters (a-f). This 16-symbol numeral system is known as hexadecimal code. In total, there are 16,777,216 possible combinations. Let’s try to figure out a few of them.

To figure out the hex color code of white, consider that you have to mix each of the three primary colors at their full intensity. That means the Hex color code of white is #FFFFFF. Since black is a lack of primary color, its hex color code is #000000. If you want red, then you want the highest intensity of red and the lowest intensity of the other two primary colors. The hex code of red would therefore be #FF0000. Take a look at the diagram below for a few other combinations.

Take a look at the screenshot below for more examples.

To get more familiar with hex codes, you can play around with online tools like color pickers and wheels.

Using the color picker shown below, you can figure out the hex codes of different colors, from black and white to the deepest greens and brightest blues.

Once you find a color you like, make note of its hex code. That way, you can reuse the same colors in multiple designs and across channels, which is essential for consistent branding.

Now that you understand what HTML color codes are and hex codes in particular, let’s look at how you can use HTML color codes.

How to Use HTML Color Codes

You can add hex codes in your site’s HTML to edit the color of individual elements.

Say, for example, you want to change the color of a paragraph to red. You simply add a style attribute to the paragraph element you want to color and use the color property with the correct Hex code. The code will look like this:

Using this code, I could transform the intro of this blog post, making the first paragraph red. It would look something like this on the front end:

You could also separate the HTML and CSS and achieve the same result.

Here’s the CSS you’d put in the head section of your doc:

Here’s the HTML you’d put in the body section of your doc:

Using this same process, you can change the color of your background, text, and other elements on your site.

Building a Site in Color

Color can help emphasize an element on the page, create brand recognition, and make your site memorable. Now that you have a basic understanding of HTML color codes, you can add or change color on your site to create a cohesive design.

Now that you have HTML color codes down, learn about other HTML codes that can help you properly render information on your website and make necessary updates.

Originally published Mar 1, 2020 8:00:00 AM, updated June 03 2022

Источник

HTML Цвета, цвет текста фона

Цвета HTML задаются с использованием предопределенных имен цветов, или RGB, Hex, HSL, RGBA, HSLA значений.

Названия цветов

В HTML цвет можно задать с помощью имени цвета:

Цвет фона

Можно задать цвет фона для элементов HTML:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Пример

Hello World

Цвет текста

Вы можете установить цвет текста:

Всем привет

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Пример

Hello World

Цвет границы

Вы можете установить цвет границ:

Всем привет

Всем привет

Всем привет

Example

Hello World

Hello World

Hello World

Значения цвета

В HTML цвета также могут быть заданы с помощью значений RGB, шестнадцатеричных значений, HSL значений, RGBA значений и HSLA значений:

Так же, как название цвет «Tomato»:

Так же, как название цвета «Tomato», но 50% прозрачный:

Пример

Значение RGB

В HTML, цвет может быть указан как RGB значение, используя эту формулу:

Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета между 0 и 255.

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

Для отображения черного цвета, все параметры цвета должны быть установлены в 0, как это: RGB (0, 0, 0).

Для отображения белого цвета, все параметры цвета должны быть установлены в 255, как это: RGB (255, 255, 255).

Экспериментируйте, смешивая значения RGB ниже:

Источник

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».

Источник

CSS Colors: What You Need to Know About HTML, Hex, RGB & HSL Color Values

Published: October 21, 2020

Color is an essential part of website design. It can influence what visitors click on, how they read text, and how they feel navigating around your site.

While using color effectively requires practice and knowledge of color theory, adding it to your website is easy thanks to the CSS color and background-color properties.

There are several ways to define these properties. You can use HTML color names, hex color codes, RGB color codes, or HSL color values to change the text color or background color of a web page. Let’s take a closer look at these different methods below.

HTML Colors in CSS

Using HTML colors is one of the easiest methods for adding color in CSS. That’s because HTML colors are represented as color names, rather than a series of numbers.

There are currently 140 color names supported by modern browsers. Orange, gold, cyan, maroon, and skyblue are just a few examples. You can find the full list here.

Let’s look at an example. Say you want to change a paragraph of text to red. You’d use a CSS selector to target the paragraph and define the color property with the HTML color name “red.”

This seems easy enough, right?

However, using HTML color names is not recommended. For one, they’re difficult to remember beyond the standard rainbow. Yes, red, yellow, and navy are easy to memorize, but what about OldLace? Mocassin? The 100+ others?

Secondly, while 140 color names is a lot to memorize, it’s a small number when you consider how many colors, shades, and hues exist in the world. Using HTML color names will therefore limit your color combinations and ability to create a website color scheme.

Finally, and most importantly, HTML color names introduce imprecision. Your ivory may be another person’s white, which may be another’s seashell — and so on.

To avoid this imprecision online, you can use color codes, rather than names. Let’s take a look at the most popular formats below.

Hex Color Codes in CSS

Hex color codes are composed of a hashtag and three pairs of characters that represent the intensity of the three primary colors (red, green, and blue). Possible values range from 00 (the lowest intensity of a primary color) to FF (the highest intensity of a primary color).

Every hex code consists of six characters in total. These six characters can be any combination of ten numerals (0-9) and six letters (a-f). That means there are 16,777,216 possible combinations in total. Let’s walk through a few combinations below.

To create white, you have to mix each of the three primary colors at their full intensity. That means the Hex color code of white is #FFFFFF. Since black is a lack of primary color, its hex color code is #000000. To create blue, you want the highest intensity of blue and the lowest intensity of the other two primary colors. The hex code of red would therefore be #FF0000.

The diagram below shows a few other hex color codes.

Obviously, memorizing 16,000 hex color codes is out of the question. That’s where online tools like HTML Color Codes’ Color Picker come in. With this tool, you can click and drag your cursor inside the “picker area” on the right. Its Hex (as well as its RGB and HSL values) will appear at the top. Take a look at the demo below.

Let’s look at an example. Say you want to change the background of a web page to the shade of blue above. You’d use a CSS selector to target the body and define the background-color property with the hex color code #69EAFF.

RGB Color Codes in CSS

RGB is another color model based on the combination of the primary colors — hence, the shorthand for Red, Green, Blue. RBG color codes are composed of three numbers separated by commas. Each number represents the intensity of the respective primary color as an integer between 0 and 255. These numbers are then wrapped in parentheses and preceded by a lowercase “rgb.”

So rgb (0, 0, 0) is black, rgb (255, 0, 0) is red, and rgb (0, 0, 255) is blue.

The major benefit of using RGB color codes is that you can not only control the color of an element — you can also control the opacity of that color. To do so, you simply add an “a” to the rgb() prefix and a fourth value inside the parentheses. Ranging from 0 to 1, this value sets the transparency of the color. 0 is completely transparent and 1 is completely opaque. So the value 0.5 would render the color at 50% opacity.

Let’s look at an example. Say you want to change the background color of a heading and paragraph on your page. You want both elements to have the same background color. To ensure the heading is more eye grabbing, however, you’ll set the background color of the paragraph to be 30% opaque.

HSL Color Values in CSS

If you’d like to control hue, saturation, and lightness as well as the transparency of color, then you can use the color system HSL.

HSL is formatted similarly to RGB color codes. It is composed of three numbers separated by commas. These numbers are then wrapped in parentheses and preceded by a lowercase “hsl.” You can also add an “a” to “hsl” and a fourth value between 0 and 1 in parentheses to set the transparency of the color.

However, unlike RGB color codes, the first three numbers of an HSL color value do not represent the intensity of the respective primary color. Instead, these three numbers represent Hue, Saturation, and Lightness. Hue is measured in degrees on a scale of 0 – 360. Setting hue to 0 or 360 is red, 120 is green, 240 is blue. Saturation and Lightness are measured in percentages on a scale of 0 – 100. Saturation set to 0% is a shade of gray and 100% is the full color. Lightness set to 0% is black and 100% is white.

Let’s look at an example. Say you want to change the headings on the page to different shades of red. Then you could use the same hue value, 0, and simply change the saturation and lightness values. For the last heading, we can also add a fourth value to make it trsnaprent.

Color Gradients in CSS

We have only discussed how you can make the background of an element or entire page a solid color. But you can also make it a gradient. A gradient shows one gradually changing into another color (or multiple) in a certain direction like top to bottom, left to right, or diagonally.

To create a gradient, you have to specify at least two color stops. But you don’t have to specify just two. You can specify as many as you want, in any format you want.

Say you want to create a rainbow gradient moving left to right. First, create a div in HTML. You don’t have to put anything inside the div element. You can just leave it empty and then style it with CSS.

To create the gradient effect, use the shorthand “background” property in CSS and set the property to “linear-gradient.” You can then specify as many color stops as you want in parentheses. You can use any combination of HTML color names, hex color codes, RGB color codes, and HSL color values. Below we’ll use five color stops.

You can learn more about creating background color gradients in How to Add & Change Background Color in HTML.

Adding Color with Bootstrap CSS

The above examples have assumed you’re building your site from scratch. But what if you’re using Bootstrap CSS in your project?

But to create a truly custom website that reflects your unique brand identity, you can’t simply copy and paste these chunks of reusable code. You’ll want to add custom CSS in an external stylesheet to override Bootstrap CSS’s default stylesheet.

Let’s say you like the size and rounded edges of these buttons, but none of the colors are part of your website’s color scheme. In that case, you’ll want to use the Bootstrap button class without a modifier class. Then, in your own stylesheet, you can apply a text and background color to your buttons using the CSS properties and values discussed above.

Then, using a class selector, we’ll define the color and background-color properties with hex color codes for white (#FFFFFF) and a shade of turquoise (#5FBC9F) in CSS.

You can follow this same process for overriding the default styling of other Bootstrap elements, like navbars, tables, grids, and more.

Adding Color with CSS

In CSS, you can change the text and background color of your web page or different elements on the page. To do so, you just need some familiarity with the color names and codes above. Depending on the code you use, you can not only experiment with solid colors. You can also change the transparency, hue, saturation, and lightness of the colors on your website. Such basic web design knowledge can help you create a truly custom site.

Источник

CSS Color Module Level 3

Abstract

CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. It uses color-related properties and values to color the text, backgrounds, borders, and other parts of elements in a document. This specification describes color values and properties for foreground color and group opacity. These include properties and values from CSS level 2 and new values.

Status of This Document

This section describes the status of this document at the time of its publication. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at https://www.w3.org/TR/.

This document was published by the CSS Working Group as a Recommendation using the Recommendation track.

A W3C Recommendation is a specification that, after extensive consensus-building, is endorsed by W3C and its Members, and has commitments from Working Group members to royalty-free licensing for implementations.

W3C recommends the wide deployment of this specification as a standard for the Web.

This document was produced by a group operating under the W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

A separate implementation report shows that each test in the test suite was passed by at least two independent implementations. However, most tests have now been updated for CSS Color 4 (see implementation report).

A complete list of changes to this document is available.

1. Introduction

This section is non-normative.

CSS beyond level 2 is a set of modules, divided up to allow the specifications to develop incrementally, along with their implementations. This specification is one of those modules.

This module describes CSS properties which allow authors to specify the foreground color and opacity of an element. This module also describes in detail the CSS value type.

It not only defines the color-related properties and values that already exist in CSS1 and CSS2, but also defines new properties and values.

2. Dependencies

3. Color properties

3.1. Foreground color: the ‘ color ’ property

This property describes the foreground color of an element’s text content. In addition it is used to provide a potential indirect value (currentColor) for any other properties that accept color values. If the ‘ currentColor ’ keyword is set on the ‘ color ’ property itself, it is treated as ‘ color: inherit ’.

There are different ways to specify lime green:

3.2. Transparency: the ‘ opacity ’ property

Opacity can be thought of as a postprocessing operation. Conceptually, after the element (including its descendants) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering. See simple alpha compositing for details.

4. Color units

A is either a keyword or a numerical specification.

4.1. Basic color keywords

The list of basic color keywords is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. The color names are ASCII case-insensitive.

4.2. Numerical color values

4.2.1. RGB color values

The RGB color model is used in numerical color specifications. These examples all specify the same color:

The format of an RGB value in hexadecimal notation is a ‘ # ’ immediately followed by either three or six hexadecimal characters. The three-digit RGB notation ( #rgb ) is converted into six-digit form ( #rrggbb ) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.

The format of an RGB value in the functional notation is ‘ rgb( ’ followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ‘ ) ’. The integer value 255 corresponds to 100%, and to F or FF in the hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. White space characters are allowed around the numerical values.

All RGB colors are specified in the sRGB color space (see [SRGB] ). User agents may vary in the fidelity with which they represent these colors, but using sRGB provides an unambiguous and objectively measurable definition of what the color should be, which can be related to international standards (see [COLORIMETRY] ).

Values outside the device gamut should be clipped or mapped into the gamut when the gamut is known: the red, green, and blue values must be changed to fall within the range supported by the device. User agents may perform higher quality mapping of colors from one gamut to another. This specification does not define precise clipping behavior. For a typical CRT monitor, whose device gamut is the same as sRGB, the four rules below are equivalent:

Other devices, such as printers, have different gamuts than sRGB; some colors outside the 0..255 sRGB range will be representable (inside the device gamut), while other colors inside the 0..255 sRGB range will be outside the device gamut and will thus be mapped.

4.2.2. RGBA color values

The RGB color model is extended in this specification to include “alpha” to allow specification of the opacity of a color. See simple alpha compositing for details. These examples all specify the same color:

Unlike RGB values, there is no hexadecimal notation for an RGBA value.

Implementations must clip the red, green, and blue components of RGBA color values to the device gamut according to the rules for the RGB color value composed of those components.

These examples specify effects that are possible with the rgba() notation:

4.2.3. ‘ transparent ’ color keyword

CSS1 introduced the ‘ transparent ’ value for the background-color property. CSS2 allowed border-color to also accept the ‘ transparent ’ value. The Open eBook(tm) Publication Structure 1.0.1 [OEB101] extended the ‘ color ’ property to also accept the ‘ transparent ’ keyword. CSS3 extends the color value to include the ‘ transparent ’ keyword to allow its use with all properties that accept a value. This simplifies the definition of those properties in CSS3. Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.

4.2.4. HSL color values

There are several other color schemes possible. Some advantages of HSL are that it is symmetrical to lightness and darkness (which is not the case with HSV for example), and it is trivial to convert HSL to RGB.

The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the lightness/darkness, and saturation)

If saturation is less than 0%, implementations must clip it to 0%. If the resulting value is outside the device gamut, implementations must clip it to the device gamut. This clipping should preserve the hue when possible, but is otherwise undefined. (In other words, the clipping is different from applying the rules for clipping of RGB colors after applying the algorithm below for converting HSL to RGB.)

Converting an HSL color to sRGB is straightforward mathematically. Here’s a sample implementation of the conversion algorithm in JavaScript. It returns an array of three numbers representing the red, green, and blue channels of the colors, normalized to the range [0, 1].

4.2.4.1. HSL examples

Each table below represents one hue. Twelve equally spaced colors (i.e. at 30° intervals) have been chosen from the color circle: red, yellow, green, cyan, blue, magenta, with all the intermediate colors (the last is the color between magenta and red).

In each table, the X axis represents the saturation while the Y axis represents the lightness.

4.2.5. HSLA color values

Just as the ‘ rgb() ’ functional notation has the ‘ rgba() ’ alpha counterpart, the ‘ hsl() ’ functional notation has the ‘ hsla() ’ alpha counterpart. See simple alpha compositing for details. These examples specify the same color:

Implementations must clip the hue, saturation, and lightness components of HSLA color values to the device gamut according to the rules for the HSL color value composed of those components.

These examples specify effects that are possible with the hsla() notation:

4.3. Extended color keywords

The table below provides a list of the X11 colors [X11COLORS] supported by popular browsers with the addition of gray/grey variants from SVG 1.0. The resulting list is precisely the same as the SVG 1.0 color keyword names. This specification extends their definition beyond SVG. The two color swatches on the left illustrate setting the background color of a table cell in two ways: The first column uses the named color value, and the second column uses the respective numeric color value.

4.4. ‘ currentColor ’ color keyword

CSS1 and CSS2 defined the initial value of the ‘ border-color ’ property to be the value of the ‘ color ’ property but did not define a corresponding keyword. This omission was recognized by SVG, and thus SVG 1.0 introduced the ‘ currentColor ’ value for the ‘ fill ’, ‘ stroke ’, ‘ stop-color ’, ‘ flood-color ’, and ‘ lighting-color ’ properties. CSS3 extends the color value to include the ‘ currentColor ’ keyword to allow its use with all properties that accept a value. This simplifies the definition of those properties in CSS3. The value of the ‘ color ’ property. The used value of the ‘ currentColor ’ keyword is the computed value of the ‘ color ’ property. If the ‘ currentColor ’ keyword is set on the ‘ color ’ property itself, it is treated as ‘ color: inherit ’.

4.5. CSS system colors

4.5.1. CSS2 system colors

Deprecated. In addition to being able to assign color keyword values to text, backgrounds, etc., CSS2 allowed authors to specify colors in a manner that integrated them into the user’s graphic environment.

For systems that do not have a corresponding value, the specified value should be mapped to the nearest system color value, or to a default color. Note that some profiles of CSS may not support System Colors at all.

The following lists additional values for color-related CSS values and their general meaning. Any color property can take one of the following names. Although these are ASCII case-insensitive, it is recommended that the mixed capitalization shown below be used, to make the names more legible. Active window border. Active window caption. Background color of multiple document interface. Desktop background. The face background color for 3-D elements that appear 3-D due to one layer of surrounding border. The color of the border facing the light source for 3-D elements that appear 3-D due to one layer of surrounding border. The color of the border away from the light source for 3-D elements that appear 3-D due to one layer of surrounding border. Text on push buttons. Text in caption, size box, and scrollbar arrow box. Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color. Item(s) selected in a control. Text of item(s) selected in a control. Inactive window border. Inactive window caption. Color of text in an inactive caption. Background color for tooltip controls. Text color for tooltip controls. Menu background. Text in menus. Scroll bar gray area. The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Window background. Window frame. Text in windows.

For example, to set the foreground and background colors of a paragraph to the same foreground and background colors of the user’s window, write the following:

4.6. Notes on using colors

5. Simple alpha compositing

6. Sample style sheet for (X)HTML

This appendix is informative, not normative. This style sheet could be used by an implementation as part of its default styling of HTML4, XHTML1, XHTML1.1, XHTML Basic, and other XHTML Family documents.

7. Profiles

Each specification using CSS3 Color must define the subset of CSS3 Color features it allows and excludes, and describe the local meaning of all the components of that subset.

Non normative examples:

8. Test suite

A CSS Color Module Test Suite has been developed, although further tests may be added. This test suite is intended to allow user agents to verify their basic conformance to the specification. This test suite does not pretend to be exhaustive and does not cover all possible numerical color values. These tests are available at https://test.csswg.org/harness/suite/css-color-3_dev/.

9. Future features

This section is non-normative.

A number of features related to color management, such as the ‘ @color-profile ’ at-rule for specifying ICC profiles, a means to control the rendering intent of those profiles, and a way to use those profiles (the ‘ color-profile ’ property) were removed from CSS Color 3 due to lack of implementation interest at the time.

Development of related features continued in CSS Color 4 and 5; see the ‘ color() ’ function, the ‘ @color-profile ’ at-rule, and the ‘ rendering-intent ’ descriptor.

10. Acknowledgments

Thanks to Brad Pettit both for writing up color-profiles, and for implementing it. Thanks to Steven Pemberton for a write up on HSL colors. Thanks especially to the feedback from Marc Attinasi, Bert Bos, Joe Clark, fantasai, Patrick Garies, Tony Graham, Ian Hickson, Susan Lesch, Alex LeDonne, Cameron McCormack, Krzysztof Maczyński, Chris Moschini, Chris Murphy, Christoph Päper, David Perrell, Jacob Refstrup, Dave Singer, Jonathan Stanley, Andrew Thompson, Russ Weakley, Etan Wexler, David Woolley, Boris Zbarsky, Steve Zilles, the XSL FO subgroup of the XSL working group, and all the rest of the www-style community. And thanks to Chris Lilley for being the resident CSS Color expert.

11. Changes

Changes since the 05 August 2021 Recommendation

The following editorial corrections were made:

Changes since the 19 June 2018 Recommendation

Changes since the 5 December 2017 Candidate Recommendation

Changes since the 2011 June 07 Recommendation

For changes in earlier drafts, see changes in previous Recommendation and previous versions linked therefrom.

Источник

HTML Code for Color Text

HTML color codes are in a two digit hexadecimal format for red, blue, and green (#RRBBGG). Hexadecimal color codes go from 00 to DD. For example, #FF0000 would be red and #40E0D0 would be turquoise. Hexadecimal color codes are used in HTML for everything from text to backgrounds.

Coding a website in HTML, or HyperText Markup Language, is one of the most fundamental skills every coder must master. This markup language is how we organize, arrange, and format text and documents for use on websites. In this article, we’ll take a close look at HTML code for color text, an important design element for any website. Later, you can take what you’ve learned in this article and experiment in an HTML editor.

Find Your Bootcamp Match

Select your interest
First name

Last name

Email

Phone number

By continuing you agree to our Terms of Service and Privacy Policy, and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

Methods of Coding Color Text with HTML

There are actually 4 different methods for coding text color with HTML. Let’s go over the 4 methods and take a look at some examples of each.

1. Color HTML Text with Hex Color Codes

The most common method of changing the color of the text is by using hexadecimal color codes, also known as Hex color codes. These codes are comprised of combinations of the integers 0, 1, 2, 3, 4, 5, 6, 7, 8, and 9; and the letters A, B, C, D, E, and F. So, a hex color code might be something like #FF0000 or #33DDFF.

Each hex color code corresponds to a specific color. For instance, our two examples above correspond to the following colors:

HTML Hex Color Code Examples

To find the hex color code you wish to use for your HTML text, you can use a site like HTML Color Codes, which offers interactive color charts and sliding scales. You can also use an eyedropper tool to match the hex color code of an element on your screen with a browser extension like ColorZilla.

Once you know your hex color code, adding a style attribute to change the color of your HTML text is simple. Just use the following code:

That code should produce the following colored text:

Источник

Applying color to HTML elements using CSS

This article is a primer introducing each of the ways CSS color can be used in HTML.

The use of color is a fundamental form of human expression. Children experiment with color before they even have the manual dexterity to draw. Maybe that’s why color is one of the first things people often want to experiment with when learning to develop websites. With CSS, there are lots of ways to add color to your HTML elements to create just the look you want.

We’re going to touch on most of what you’ll need to know when using color, including a list of what you can color and what CSS properties are involved, how you describe colors, and how to actually use colors both in stylesheets and in scripts. We’ll also take a look at how to let the user pick a color.

Then we’ll wrap things up with a brief discussion of how to use color wisely: how to select appropriate colors, keeping in mind the needs of people with differing visual capabilities.

Things that can have color

At the element level, everything in HTML can have color applied to it. Instead, let’s look at things in terms of the kinds of things that are drawn in the elements, such as text and borders and so forth. For each, we’ll see a list of the CSS properties that apply color to them.

At a fundamental level, the color property defines the foreground color of an HTML element’s content and the background-color property defines the element’s background color. These can be used on just about any element.

Whenever an element is rendered, these properties are used to determine the color of the text, its background, and any decorations on the text.

The color to use when drawing the text and any text decorations (such as the addition of under- or overlines, strike-through lines, and so forth.

The text’s background color.

Configures a shadow effect to apply to text. Among the options for the shadow is the shadow’s base color (which is then blurred and blended with the background based on the other parameters). See Text drop shadows in Fundamental text and font styling to learn more.

By default, text decorations (such as underlines, strikethroughs, etc.) use the color property as their colors. However, you can override that behavior and use a different color for them with the text-decoration-color property.

The color to use when drawing emphasis symbols adjacent to each character in the text. This is used primarily when drawing text for East Asian languages.

The color to use when drawing the caret (sometimes referred to as the text input cursor) within the element. This is only useful in elements that are editable, such as and

or elements whose HTML contenteditable attribute is set.

Boxes

Every element is a box with some sort of content, and has a background and a border in addition to whatever contents the box may have.

See the section Borders for a list of the CSS properties you can use to set the colors of a box’s borders.

The background color to use in areas of the element that have no foreground content.

The color to use when drawing the line separating columns of text.

The color to use when drawing an outline around the outside of the element. This outline is different from the border in that it doesn’t get space set aside for it in the document (so it may overlap other content). It’s generally used as a focus indicator, to show which element will receive input events.

Borders

Any element can have a border drawn around it. A basic element border is a line drawn around the edges of the element’s content. See Box properties in The box model to learn about the relationship between elements and their borders, and the article Styling borders using CSS to learn more about applying styles to borders.

You can use the border shorthand property, which lets you configure everything about the border in one shot (including non-color features of borders, such as its width, style (solid, dashed, etc.), and so forth.

Specifies a single color to use for every side of the element’s border.

Lets you set the color of the corresponding side of the element’s border.

With these, you can set the color used to draw the borders which are closest to the start and end of the block the border surrounds. In a left-to-right writing mode (such as the way English is written), the block start border is the top edge and the block end is the bottom. This differs from the inline start and end, which are the left and right edges (corresponding to where each line of text in the box begins and ends).

Other ways to use color

CSS isn’t the only web technology that supports color. There are graphics technologies that are available on the web which also support color.

Lets you draw 2D bitmapped graphics in a element. See our Canvas tutorial to learn more.

SVG (Scalable Vector Graphics)

Lets you draw images using commands that draw specific shapes, patterns, and lines to produce an image. SVG commands are formatted as XML, and can be embedded directly into a web page or can be placed in the page using the element, just like any other type of image.

The Web Graphics Library is an OpenGL ES-based API for drawing high-performance 2D and 3D graphics on the Web. See our WebGL tutorial to find out more.

How to describe a color

In order to represent a color in CSS, you have to find a way to translate the analog concept of «color» into a digital form that a computer can use. This is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or how bright to make the color. As such, there are several ways you can describe color in CSS.

For more detailed discussion of each of the color value types, see the reference for the CSS unit.

Keywords

See Color keywords in for a list of all available color keywords.

RGB values

There are three ways to represent an RGB color in CSS.

Hexadecimal string notation

Hexadecimal string notation represents a color using hexadecimal digits to represent each of the color components (red, green, and blue). It may also include a fourth component: the alpha channel (or opacity). Each color component can be represented as a number between 0 and 255 (0x00 and 0xFF) or, optionally, as a number between 0 and 15 (0x0 and 0xF). All components must be specified using the same number of digits. If you use the single-digit notation, the final color is computed by using each component’s digit twice; that is, «#D» becomes «#DD» when drawing.

RGB functional notation

Legal values for each of these parameters are:

Each must be an value between 0 and 255 (inclusive), or a

The alpha channel is a number between 0.0 (fully transparent) and 1.0 (fully opaque). You can also specify a percentage where 0% is the same as 0.0 and 100% is the same as 1.0.

HSL functional notation

Designers and artists often prefer to work using the HSL (Hue/Saturation/Luminosity) color method. On the web, HSL colors are represented using HSL functional notation. The hsl() CSS function is very similar to the rgb() function in usage otherwise.

The diagram below shows an HSL color cylinder. Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). Image courtesy of user SharkD on Wikipedia, distributed under the CC BY-SA 3.0 license.

The value of the hue (H) component of an HSL color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. The value can be specified in any unit supported by CSS, including degrees ( deg ), radians ( rad ), gradians ( grad ), or turns ( turn ). But this doesn’t control how vivid or dull, or how bright or dark the color is.

The saturation (S) component of the color specifies what percentage of the final color is comprised of the specified hue. The rest is defined by the grey level provided by the luminance (L) component.

Think of it like creating the perfect paint color:

You can also optionally include an alpha channel, to make the color less than 100% opaque.

Here are some sample colors in HSL notation:

Note: When you omit the hue’s unit, it’s assumed to be in degrees ( deg ).

HWB functional notation

Much like the HSL functional notation above, the hwb() function uses the same hue value. But instead of lightness and saturation you specify whiteness and blackness values in percentages. Values are not separated with a comma and an optional alpha value can be included (it must be preceded by a forward slash / ).

Here are some examples of using HWB notation:

Using color

Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under Things that can have color, there are plenty of things you can color with CSS. Let’s look at this from two sides: using color within a stylesheet, and adding and changing color using JavaScript code to alter the styles of elements.

Specifying colors in stylesheets

The easiest way to apply color to elements—and the way you’ll usually do it—is to specify colors in the CSS that’s used when rendering elements. While we won’t use every single property mentioned previously, we’ll look at a couple of examples. The concept is the same anywhere you use color.

Let’s take a look at an example, starting by looking at the results we’re trying to achieve:

The HTML responsible for creating the above example is shown here:

This is pretty simple, using a

The magic happens, as usual, in the CSS, where we’ll apply colors define the layout for the HTML above.

We’ll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one.

Letting the user pick a color

There are many situations in which your website may need to let the user select a color. Perhaps you have a customizable user interface, or you’re implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it’s been necessary to implement your own color picker, HTML now provides support for browsers to provide one for your use through the element, by using «color» as the value of its type attribute.

The element represents a color only in the hexadecimal string notation covered above.

Example: Picking a color

Let’s look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker’s value is displayed.

Note: On macOS, you indicate that you’ve finalized selection of the color by closing the color picker window.

The HTML here creates a box that contains a color picker control (with a label created using the element) and an empty paragraph element (

) into which we’ll output some text from our JavaScript code.

The CSS establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color.

JavaScript

The script here handles the task of updating the starting color of the border to match the color picker’s value. Then two event handlers are added to deal with input from the element.

The input event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box’s border color to match the color picker’s current value.

The change event is received when the color picker’s value is finalized. We respond by setting the contents of the

element with the ID «output» to a string describing the finally selected color.

Using color wisely

Making the right choices when selecting colors when designing a website can be a tricky process, especially if you aren’t well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people with certain vision problems, particularly color blindness.

Finding the right colors

Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can’t replace having a good designer helping you make these decisions, they can definitely get you started.

Base color

The first step is to choose your base color. This is the color that in some way defines your website or the subject matter of the site. Just as we associate green with the beverage Mountain Dew and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:

When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the website ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.

Note: The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.

Fleshing out the palette

Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See Color and accessibility for a brief explanation of why this matters.

A few examples (all free to use as of the time this list was last revised):

When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you’ll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.

Note: Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.

Color theory resources

A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:

An online course which introduces concepts such as what color is, how it’s perceived, and how to use colors to express ideas. Presented by Pixar artists and designers.

Wikipedia’s entry on color theory, which has a lot of great information from a technical perspective. It’s not really a resource for helping you with the color selection process, but is still full of useful information.

Color and accessibility

There are several ways color can be an accessibility problem. Improper or careless use of color can result in a website or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it’s important to consider your use of color carefully.

You should do at least basic research into color blindness. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.

Note: The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won’t be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what’s happening.

For more information about color blindness, see the following articles:

Palette design example

Let’s consider a quick example of selecting an appropriate color palette for a site. Imagine that you’re building a website for a new game that takes place on the planet Mars. So let’s do a Google search for photos of Mars. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet’s surface. We use a color picker tool to select a sample of the color we choose.

Having selected our base color, we need to build out our palette. We decide to use Paletton to come up with the other colors we need. Upon opening Paletton, we see:

Next, we enter our color’s hex code ( D79C7A ) into the «Base RGB» box at the bottom-left corner of the tool:

If you’re unhappy with the color that’s proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don’t like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:

Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.

Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there’s just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It’s easy to go too far in one way or another so be sure to get feedback on your colors once you’ve selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.

Color, backgrounds, contrast, and printing

What looks good on screen may look very different on paper. In addition, ink can be expensive, and if a user is printing your page, they don’t necessarily need all the backgrounds and such using up their precious ink when all that matters is the text itself. Most browsers, by default, remove background images when printing documents.

If your background colors and images have been selected carefully and/or are crucial to the usefulness of the content, you can use the CSS print-color-adjust property to tell the browser that it should not make adjustments to the appearance of content.

You can set print-color-adjust to exact to tell the browser that the element or elements on which you use it have been designed specifically to best work with the colors and images left as they are. With this set, the browser won’t tamper with the appearance of the element, and will draw it as indicated by your CSS.

Источник

HTML Colors: How to add Color to your Web Page

Colors are applied to an HTML element using CSS. You can also pick which part of the element to apply color to.

We’ve just seen the various ways of applying styles to an HTML document. Some of those examples included adding color to the document. Seeing as color is a major part of any website design, let’s look more closely at applying color to a web page.

Foreground Color

Foreground color is used to change the color of an element’s text.

Foreground color can also (indirectly) affect the color of other parts of the element, including its border.

This may or may not be the desired effect. However, it can always be overridden by explicitly specifying a color for the affected property.

Try this

Below is an example where a border is specified, along with its color.

Remove border-color:olivedrab; from the styles, then click Run to see how it changes the color of the border.

Background Color

Background color is specified like this: background-color:yellow

Border Color

We’ve already seen an example of specifying a color for an element’s border (above). That’s one way of specifying the various border properties.

You can also specify several border properties in one go (rather than separating them into different declarations). You can do this using the border shortcut property, which allows you to specify the border’s width, style, and color in one place.

Embedded and External Styles

The examples on this page use inline styles. As with all styles, you can also use the embedded method or the external method.

Color Names

In the above examples, I used color names to specify the colors.

You can specify a color by its name (eg, blue ), its hexadecimal value (eg, #0000ff ), RGB value (eg rgb(0,0,255) ), or its HSL value (eg hsl(240,100%,100%) ).

Beginners may find it easier to specify colors by their color name, as color names are probably a lot easier to remember than the other options. Although color names are easier to remember, the hexadecimal, RGB, and HSL notations provide you with more color options.

Hexadecimal color codes are a combination of letters and numbers. The numbers go from 0 to 9 and the letters go from A to F. When using hexadecimal color values in your HTML/CSS, you precede the value with a hash (#). Although hexadecimal values may look a little weird at first, you’ll soon get used to them.

If you use graphics software, such as Adobe Photoshop or GIMP, you might be used to the RGB or HSL methods.

The chart below shows some examples of color names, along with their corresponding hexadecimal and RGB values.

This table is a small sample of the enormous range of colors available in HTML. To see more, check out HTML Color Codes.

You can make up your own colors by simply entering any six digit hexadecimal value (preceded by a hash).

In the following example, we specify the same color using three different methods. The resulting color is the same.

If we wanted to change to a different shade of blue, we could change our value slightly like this:

Transparency

Here’s an example of using RGBA to change the opacity.

Here’s an example of using HSLA to change the opacity.

But don’t worry — you won’t need to remember every single hexadecimal color value! The HTML color picker and color chart make it easy for you to choose colors for your website.

Источник