Choose your colors, Learn and Create!
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.
HEX
RGB
HSL
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.
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 RGB Color Value, Red — Green — Blue, is based on mixing these 3 colors to get the full range. Each of the colors takes a value between 0 and 255, a total of 256, with which a total of 256 x 256 x 256 is achieved = 16,777,216 different colors. Mixing these three colors would give you a rgb color code represented like this RGB(23,34,255).
The RGBA Color Value, Red — Green — Blue — Alpha that add a new factor, the alpha channel, that is, the opacity or transparency that follows the same percentage scheme: 0% represents absolute transparency and 100% represents absolute opacity which is the way we traditionally see colors.
The HSL Color Value, This model includes two additional parameters to the hue or chroma to obtain the color, which are saturation or brightness or tone. Hence its acronym: HSL (H — hue or hue, S — saturation or saturation, L — luminosity or luminosity / tone).
The HSLA Color Value, (H — hue or hue, S — saturation or saturation, L — luminosity or luminosity / tone — A — ALPHA), is a system is not a system that has been commonly used in web design, but it is used in other areas such as photographic editing or design (in general).
The HSV Color Value includes two additional parameters to the hue or chroma to obtain the color, which are saturation and value. Hence its acronym: HSV (H — hue or hue, S — saturation or saturation, V — value or value).
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.
The CMYK Color Value is a subtractive model and is used in printing from pigments of three basic colors: C — cyan, M — magenta and Y — yellow. The K comes from the black, since the combination of the three previous ones produces a black little pure.
FOR MORE INFORMATION VISIT THE LINKS THAT ARE IN THE TEXT OR VISIT OUR COLOR THEORY.
| Color Name | Color Code | Color Name | Color Code |
|---|---|---|---|
| Red | #FF0000 | White | #FFFFFF |
| Cyan | #00FFFF | Silver | #C0C0C0 |
| Blue | #0000FF | Gray | #808080 |
| DarkBlue | #0000A0 | Black | #000000 |
| LightBlue | #ADD8E6 | Orange | #FFA500 |
| Purple | #800080 | Brown | #A52A2A |
| Yellow | #FFFF00 | Maroon | #800000 |
| Lime | #00FF00 | Green | #008000 |
| Magenta | #FF00FF | Olive | #808000 |
Common Colors
What better way to help you find your perfect color than giving you the common colors of this time . Take a look and good luck!
Конвертер цветов
С помощью универсального конвертер цветов вы можете легко перевести цвет из одной цветовой модели в ряд других.
В первую очередь, калькулятор служит для удобной работы с современными форматами CSS3-цветов. Поддерживается конвертация из HEX в RGB/RGBA и HSL/HSLA, RGB в CMYK, XYZ, LAB, и обратно.
А также специальный функционал для замещения альфа-канала при переводе цвета из RGBA в RGB (и HSLA в HSL).
Справка по цветовым моделям
Далее приводится краткое описание цветовых систем с которыми работает конвертер, разъяснение по форматам, а также примеры использования полученных цветов в CSS/HTML.
HEX / HTML
Цвет в формате HEX — это ни что иное, как шестнадцатеричное представление RGB.
Цвета представляются в виде трёх групп шестнадцатеричных цифр, где каждая группа отвечает за свой цвет: #112233, где 11 — красный, 22 — зелёный, 33 — синий. Все значения должны быть между 00 и FF.
Во многих приложениях допускается сокращённая форма записи шестнадцатеричных цветов. Если каждая из трёх групп содержит одинаковые символы, например #112233, то их можно записать как #123.
RGB
Цветовое пространство RGB (Red, Green, Blue) состоит из всех возможных цветов, которые могут быть получены путём смешивания красного, зелёного, и синего. Эта модель популярна в фотографии, телевидении, и компьютерной графике.
Значения RGB задаются целым числом от 0 до 255. Например, rgb(0,0,255) отображается как синий, так как синий параметр установлен в его самое высокое значение (255), а остальные установлены в 0.
Некоторые приложения (в частности веб-браузеры) поддерживают процентную запись значений RGB (от 0% до 100%).
Цветовые значения RGB поддерживаются во всех основных браузерах.
RGBA
С недавних пор современные браузеры научились работать с цветовой моделью RGBA — расширением RGB с поддержкой альфа-канала, который определяет непрозрачность объекта.
Значение цвета RGBA задается в виде: rgba(red, green, blue, alpha). Параметр alpha — это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
RGBA поддерживается в IE9+, Firefox 3+, Chrome, Safari, и в Opera 10+.
HSL
Цветовая модель HSL является представлением модели RGB в цилиндрической системе координат. HSL представляет цвета более интуитивным и понятным для восприятия образом, чем типичное RGB. Модель часто используется в графических приложениях, в палитрах цветов, и для анализа изображений.
HSL расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Lightness/Luminance (светлота/светлость/светимость, не путать с яркостью).
Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Lightness является процентным значением светлости (от 0% до 100%).
HSL поддерживается в IE9+, Firefox, Chrome, Safari, и в Opera 10+.
HSLA
По аналогии с RGB/RGBA, для HSL имеется режим HSLA с поддержкой альфа-канала для указания непрозрачности объекта.
Значение цвета HSLA задается в виде: hsla(hue, saturation, lightness, alpha). Параметр alpha — это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
CMYK
Цветовая модель CMYK часто ассоциируется с цветной печатью, с полиграфией. CMYK (в отличие от RGB) является субтрактивной моделью, это означает что более высокие значения связаны с более тёмными цветами.
Цвета определяются соотношением голубого (Cyan), пурпурного (Magenta), жёлтого (Yellow), с добавлением чёрного (Key/blacK).
Каждое из чисел, определяющее цвет в CMYK, представляет собой процент краски данного цвета, составляющей цветовую комбинацию, а точнее, размер точки растра, выводимой на фотонаборном аппарате на плёнке данного цвета (или прямо на печатной форме в случае с CTP).
Например, для получения цвета «PANTONE 7526» следует смешать 9 частей голубой краски, 83 частей пурпурной краски, 100 — жёлтой краски, и 46 — чёрной. Это можно обозначить следующим образом: (9,83,100,46). Иногда пользуются такими обозначениями: C9M83Y100K46, или (9%, 83%, 100%, 46%), или (0,09/0,83/1,0/0,46).
HSB / HSV
HSB (также известна как HSV) похожа на HSL, но это две разные цветовые модели. Они обе основаны на цилиндрической геометрии, но HSB/HSV основана на модели «hexcone», в то время как HSL основана на модели «bi-hexcone». Художники часто предпочитают использовать эту модель, принято считать что устройство HSB/HSV ближе к естественному восприятию цветов. В частности, цветовая модель HSB применяется в Adobe Photoshop.
HSB/HSV расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Brightness/Value (яркость/значение).
Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Brightness является процентным значением яркости (от 0% до 100%).
XYZ
Цветовая модель XYZ (CIE 1931 XYZ) является чисто математическим пространством. В отличие от RGB, CMYK, и других моделей, в XYZ основные компоненты являются «мнимыми», то есть вы не можете соотнести X, Y, и Z с каким-либо набором цветов для смешивания. XYZ является мастер-моделью практически всех остальных цветовых моделей, используемых в технических областях.
LAB
Цветовая модель LAB (CIELAB, «CIE 1976 L*a*b*») вычисляется из пространства CIE XYZ. При разработке Lab преследовалась цель создания цветового пространства, изменение цвета в котором будет более линейным с точки зрения человеческого восприятия (по сравнению с XYZ), то есть с тем, чтобы одинаковое изменение значений координат цвета в разных областях цветового пространства производило одинаковое ощущение изменения цвета.
Choose your colors, Learn and Create!
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.
HEX
RGB
HSL
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.
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 RGB Color Value, Red — Green — Blue, is based on mixing these 3 colors to get the full range. Each of the colors takes a value between 0 and 255, a total of 256, with which a total of 256 x 256 x 256 is achieved = 16,777,216 different colors. Mixing these three colors would give you a rgb color code represented like this RGB(23,34,255).
The RGBA Color Value, Red — Green — Blue — Alpha that add a new factor, the alpha channel, that is, the opacity or transparency that follows the same percentage scheme: 0% represents absolute transparency and 100% represents absolute opacity which is the way we traditionally see colors.
The HSL Color Value, This model includes two additional parameters to the hue or chroma to obtain the color, which are saturation or brightness or tone. Hence its acronym: HSL (H — hue or hue, S — saturation or saturation, L — luminosity or luminosity / tone).
The HSLA Color Value, (H — hue or hue, S — saturation or saturation, L — luminosity or luminosity / tone — A — ALPHA), is a system is not a system that has been commonly used in web design, but it is used in other areas such as photographic editing or design (in general).
The HSV Color Value includes two additional parameters to the hue or chroma to obtain the color, which are saturation and value. Hence its acronym: HSV (H — hue or hue, S — saturation or saturation, V — value or value).
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.
The CMYK Color Value is a subtractive model and is used in printing from pigments of three basic colors: C — cyan, M — magenta and Y — yellow. The K comes from the black, since the combination of the three previous ones produces a black little pure.
FOR MORE INFORMATION VISIT THE LINKS THAT ARE IN THE TEXT OR VISIT OUR COLOR THEORY.
| Color Name | Color Code | Color Name | Color Code |
|---|---|---|---|
| Red | #FF0000 | White | #FFFFFF |
| Cyan | #00FFFF | Silver | #C0C0C0 |
| Blue | #0000FF | Gray | #808080 |
| DarkBlue | #0000A0 | Black | #000000 |
| LightBlue | #ADD8E6 | Orange | #FFA500 |
| Purple | #800080 | Brown | #A52A2A |
| Yellow | #FFFF00 | Maroon | #800000 |
| Lime | #00FF00 | Green | #008000 |
| Magenta | #FF00FF | Olive | #808000 |
Common Colors
What better way to help you find your perfect color than giving you the common colors of this time . Take a look and good luck!