- Devoth‘s HEX 2 RGBA Color Calculator ver 1.3
- Like what I do? Check my other tools & scripts:
- calculate Temperature conversion
- PHP Dead Simple Gallery
- You might also like:
- Short info
- What‘s new?
- Конвертер цветов
- Справка по цветовым моделям
- HEX / HTML
- RGB
- RGBA
- HSL
- HSLA
- CMYK
- HSB / HSV
- XYZ
- LAB
- HTML color code ↔ RGB
- Color Converter
- About Color Converter
Devoth‘s HEX 2 RGBA Color Calculator ver 1.3
Let‘s you convert color value in HEX to RGBA and RGB, prepared for inclusion in CSS styles.
Like what I do? Check my other tools & scripts:
calculate Temperature conversion
Calculator for converting temperature between Celsius, Fahrenheit, Kelvin and other scales
Check it out →
PHP Dead Simple Gallery
Create a gallery in less than 5 min, with 1 line of code, then manage it through FTP. Thumbnails are generated on the fly and caching is done automatically for you.
Have a look →
jQuery imagineMenu() plugin
Allows you to create an image based menu with basic CSS and 1 line of code. It uses best practices and degrades gracefully. Have a look →
Follow me on Twitter: @Devoth
You might also like:
Short info
This CSS3 calculator was built for lazy people like myself. There are many great HEX to RGB color converters out there, but usually they give you result in three separate fields (R, G & B), which is annoying because 99% of times when I need an RGB value from HEX, I need to paste it to some CSS rule. So why copy/paste from three fields, when you can have it in one field — nicely baked for CSS inclusion.
What‘s new?
1.3.0 (2014/07/31) Added an input field for the opacity, for people who don’t like to work with sliders. Main HEX input is now autofocused when you enter the page. Sample HEX and HTML colors in HEX input label can now be clicked to autofill the input. 1.2.0 (2013/11/27) You can now copy converted color values from the form fields, straight to the clipboard, with one click (Flash required). 1.1.0 (2012/06/20) Added support for HTML color names (aqua, magenta, linen, black, etc.). Now you can type in red in five different ways: #ff0000, ff0000, #f00, f00 or just plain red You can invoke conversion by submitting the form (hitting enter ), no need to hit that big green submit button… unless you like it! Clicking on RGB & RGBA result fields will instantly select the whole result for you, so you just insta-copy the whole thing. You can now save a bizilion clicks per day! 1.0.0 (2010/08/20) Initial release
© Devoth Design 2010 — 2023. All rights reserved.
Follow me on Twitter here: @Devoth
Конвертер цветов
С помощью универсального конвертер цветов вы можете легко перевести цвет из одной цветовой модели в ряд других.
В первую очередь, калькулятор служит для удобной работы с современными форматами 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), то есть с тем, чтобы одинаковое изменение значений координат цвета в разных областях цветового пространства производило одинаковое ощущение изменения цвета.
HTML color code ↔ RGB
With this converter you can convert a hex color code (HTML) to RGB and vice versa.
The hex color code must always start with # and thereafter there must be six values from 0 — 9 or A — F (e.g. #F07AE3).
There is also the short notation with three values, for example #F12, which corresponds to the value #FF1122.
If you want to convert RGB into hex color code, you must type numbers from 0 — 255 in the fields of R, G and B.
HTML range of colors (216 colors):
| #FFFFFF | #FFFFCC | #FFFF99 | #FFFF66 | #FFFF33 | #FFFF00 |
| #FFCCFF | #FFCCCC | #FFCC99 | #FFCC66 | #FFCC33 | #FFCC00 |
| #FF99FF | #FF99CC | #FF9999 | #FF9966 | #FF9933 | #FF9900 |
| #FF66FF | #FF66CC | #FF6699 | #FF6666 | #FF6633 | #FF6600 |
| #FF33FF | #FF33CC | #FF3399 | #FF3366 | #FF3333 | #FF3300 |
| #FF00FF | #FF00CC | #FF0099 | #FF0066 | #FF0033 | #FF0000 |
| #CCFFFF | #CCFFCC | #CCFF99 | #CCFF66 | #CCFF33 | #CCFF00 |
| #CCCCFF | #CCCCCC | #CCCC99 | #CCCC66 | #CCCC33 | #CCCC00 |
| #CC99FF | #CC99CC | #CC9999 | #CC9966 | #CC9933 | #CC9900 |
| #CC66FF | #CC66CC | #CC6699 | #CC6666 | #CC6633 | #CC6600 |
| #CC33FF | #CC33CC | #CC3399 | #CC3366 | #CC3333 | #CC3300 |
| #CC00FF | #CC00CC | #CC0099 | #CC0066 | #CC0033 | #CC0000 |
| #99FFFF | #99FFCC | #99FF99 | #99FF66 | #99FF33 | #99FF00 |
| #99CCFF | #99CCCC | #99CC99 | #99CC66 | #99CC33 | #99CC00 |
| #9999FF | #9999CC | #999999 | #999966 | #999933 | #999900 |
| #9966FF | #9966CC | #996699 | #996666 | #996633 | #996600 |
| #9933FF | #9933CC | #993399 | #993366 | #993333 | #993300 |
| #9900FF | #9900CC | #990099 | #990066 | #990033 | #990000 |
| #66FFFF | #66FFCC | #66FF99 | #66FF66 | #66FF33 | #66FF00 |
| #66CCFF | #66CCCC | #66CC99 | #66CC66 | #66CC33 | #66CC00 |
| #6699FF | #6699CC | #669999 | #669966 | #669933 | #669900 |
| #6666FF | #6666CC | #666699 | #666666 | #666633 | #666600 |
| #6633FF | #6633CC | #663399 | #663366 | #663333 | #663300 |
| #6600FF | #6600CC | #660099 | #660066 | #660033 | #660000 |
| #33FFFF | #33FFCC | #33FF99 | #33FF66 | #33FF33 | #33FF00 |
| #33CCFF | #33CCCC | #33CC99 | #33CC66 | #33CC33 | #33CC00 |
| #3399FF | #3399CC | #339999 | #339966 | #339933 | #339900 |
| #3366FF | #3366CC | #336699 | #336666 | #336633 | #336600 |
| #3333FF | #3333CC | #333399 | #333366 | #333333 | #333300 |
| #3300FF | #3300CC | #330099 | #330066 | #330033 | #330000 |
| #00FFFF | #00FFCC | #00FF99 | #00FF66 | #00FF33 | #00FF00 |
| #00CCFF | #00CCCC | #00CC99 | #00CC66 | #00CC33 | #00CC00 |
| #0099FF | #0099CC | #009999 | #009966 | #009933 | #009900 |
| #0066FF | #0066CC | #006699 | #006666 | #006633 | #006600 |
| #0033FF | #0033CC | #003399 | #003366 | #003333 | #003300 |
| #0000FF | #0000CC | #000099 | #000066 | #000033 | #000000 |
Color Converter
This color converter tool will convert any color you enter into HEX, RGB, HSL, RGBA and ARGB, each color will also be visually displayed in the table below.
About Color Converter
This tool can provide color conversions between the following formats:
HEX to RGB
HEX to RGBA
HEX to ARGB
HEX to HSL
RGB to HEX
RGB to RGBA
RGB to ARGB
RGB to HSL
HSL to RGB
HSL to HEX
HSL to RGBA
HSL to ARGB
ARGB to HEX
ARGB to RGB
ARGB to RGBA
ARGB to HSL
RGBA to HEX
RGBA to RGB
RGBA to ARGB
RGBA to HSL
RGB
RGB color mode is a color standard in industry, which is used to obtain various colors by changing the three color channels of red (R), green (G) and blue (B) and superimposing them on each other. RGB is the color representing the three channels of red, green and blue, and this standard includes almost all the colors that human eyesight can perceive, and is one of the most widely used color systems.
RGBA
RGBA is the color space representing Red (red) Green (green) Blue (blue) and Alpha. Although it is sometimes described as a color space, it is really just the RGB model with additional information attached. The colors used are RGB, which can belong to any of the RGB color spaces, but Catmull and Smith proposed this indispensable alpha value between 1971 and 1972, making alpha rendering and alpha synthesis possible. The name alpha was derived from the Greek letter used in the classical linear interpolation equation alphaA + (1-alpha)B.
ARGB
ARGB is a color mode, which is the RGB color mode with an Alpha (transparency) channel attached to it, commonly used in 32-bit bitmap storage structures.
HSL
HSL is a representation of the points in the RGB color model in a cylindrical coordinate system. These two representations attempt to be more intuitive than the geometric structure of RGB based on a Cartesian coordinate system. It is one of the most widely used color systems.
HEX
HEX is a color represented by a 6-digit hexadecimal value starting with «#». 6 digits are divided into 3 groups of 2 digits each, which represent the intensity of red, green and blue colors in turn