Что такое rgb и как используется?

HSL

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

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

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

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

Применение RGB светодиодной ленты

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

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

Отличие светодиодной ленты RGB от обычной LED ленты

Отличие светодиодной лент RGB от обычной LED ленты сразу видно еще из названия. В обычных LED лентах применяются монохромные светодиоды, для подключения которых нужно только два контакта. В RGB лентах устанавливают многоцветные RGB светодиоды, которые в одном корпусе содержат сразу три кристалла, отвечающие за три разных цвета: красный, синий и зеленый (red, green, blue). Подключается такая лента с помощью четырех контактов, где три из них управляют конкретным каналом цвета и один контакт общий.

Такая лента позволяет получить любой цвет и оттенок регулировкой яркости каналов из трех основных цветов.

CSS свойства

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-shadowbox-sizingcaption-sideclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weighthanging-punctuationheightjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthnav-downnav-indexnav-leftnav-rightnav-upopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpositionquotesresizerighttab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidivertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapz-index

Определение

Ограничение sRGB по возможности передачи цветов

Цветовая модель RGB является зависимой от устройства. Поскольку мониторы разных моделей и производителей различаются, было предложено несколько стандартов цветовых пространств для этой модели. Например, sRGB является стандартом для изображения на мониторе (профиль «по умолчанию» для компьютерной графики). Также распространён Adobe RGB, а при редактировании используется ProPhoto.

Цветовая модель RGB может использовать разные базовые цвета (в том числе, цвета не реализуемые физически), разную цветовую температуру для «белой точки», и разный показатель гамма-коррекции.

HSLA

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

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Цвета</title>
<style>
body { background-color: #F9F2E3; }
h2 {
background-color: rgb(214,86,43);
color: rgba(255,255,255,.9);
padding: 10px;
}
p { color: green; }
div {
background-color: hsl(60,100%,25%);
color: hsla(120,100%,50%,0.1);
}
</style>
</head>
<body>
<h2>Предупреждение</h2>
<p>Все перечисленные на сайте методы ловли льва являются теоретическими
и базируются на вычислительных методах. Авторы не гарантируют вашей
безопасности при их использовании и снимают с себя всякую
ответственность за результат. Помните, лев это хищник и
опасное животное!</p>
<div>Арррргх!</div>
</body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Цвета на веб-странице

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Блок питания для RGB светодиодной ленты

Светодиодные ленты с RGB светодиодами работают от источника постоянного тока и их нельзя подключать напрямую к сети 220В. Для подключения светодиодных лент применяют специальные блоки питания, которые еще называют драйверами LED лент.

Драйвер светодиодной ленты чаще всего представляет собой импульсный блок питания, который преобразует входное переменное напряжение из сети 220 В, в постоянное напряжение 12 В или 24 В. Такие блоки питания могут иметь самое разное исполнение, и в зависимости от корпуса имеют разную степень защиты от внешнего воздействия.

Степень защиты блока питания подбирается в зависимости от места его установки. При установке в помещении применяются драйверы со степенью защиты IP20. Они не имеют защиты от влаги и вполне могут быть вообще без корпуса в виде платы с радиодеталями.

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

При подборе блока питания кроме выходного напряжения нужно подбирать еще его мощность, причем выбирать нужно с запасом. На светодиодных лентах должна указываться потребляемая максимальная мощность, а мощность светодиодного драйвера нужно подбирать на 20%, а лучше на все 30% больше. Это обеспечит его долгую работу без перегрева.

RGBW и RGBWW светодиодные ленты

Для достижения лучшего качества белого цвета цветной светодиодной лентой помимо трехцветных светодиодов на ленты стали устанавливать дополнительные белые светодиоды, который управлялись по отдельному каналу. Такие светодиодные ленты маркируются как RGBW. Белый светодиод в таких лентах имеет цветовую температуру порядка 6000К. Причем остается возможность включения белого света путем комбинации всех цветов или отдельным каналом белыми светодиодами.

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

Но на этом не остановились, и добавили еще один светодиод с теплым белым светом с цветовой температурой в пределах 2900K. Такую светодиодную ленту маркируют RGBWW. Самый простой способ реализации заключается в установке помимо отдельного холодного белого светодиода еще одного теплого белого светодиода. Сейчас встречаются даже комбинированные белые светодиоды, способные излучать как белый, так и теплый белый свет, и комбинированные светодиоды с пятью кристаллами.

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

Что такое RGB светодиодная лент?

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

Чем отличаются RGB светодиодные ленты от обычных светодиодных лент?

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

Где используются RGB светодиодные ленты?

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

Что такое RGBW и RGBWW светодиодные ленты?

RGBW и RGBWW светодиодные ленты – это все те же RGB светодиодные ленты, но с некоторыми модификациями. В RGBW светодиодных лентах имеется дополнительные белые светодиоды с цветовой температурой около 6000К, которые управляются по отдельному каналу. RGBWW светодиодные ленты помимо белого холодного светодиода имеют еще и теплый белый светодиоды с цветовой температурой около 2900К.

HSV (HSB) и HSL

Эти две цветовые модели я объединил, т.к. они схожи по своему принципу.

Трехмерная реализация HSL (слева) и HSV (справа) моделей представлена в виде цилиндра ниже, но на практике в ПО (программном обеспечении) не используется, ибо.. ибо трехмерная 🙂

HSV (или HSB) означает Hue, Saturation, Value (еще может именоваться Brightness), где:

• Hue — цветовой тон, т.е. оттенок цвета.
• Saturation — насыщенность. Чем выше этот параметр, тем «чище» будет цвет, а чем ниже, тем ближе он будет к серому.
• Value (Brightness) — значение (яркость) цвета. Чем выше значение, тем ярче будет цвет (но не белее). А чем ниже, тем темнее (0% — черный)

HSL — Hue, Saturation, Lightness

• Hue — Вы уже знаете
• Saturation — аналогично
• Lightness — это светлота цвета (не путать с яркостью). Чем выше параметр, тем светлее цвет (100% — белый), а чем ниже, тем темнее (0% — черный).

Более распространенная модель — HSV, она часто используется вместе с моделью RGB, где HSV показана в визуальном виде, а числовые значения задаются в RGB. Например в Paint.NET:

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

Такая модель чаще всего используется в простой (или непрофессиональной) обработке изображений, т.к. при помощи неё удобно регулировать основные параметры фотографий, не прибегая к куче различных фильтров или отдельных настроек.
Например во всеми любимом (или проклинаемом) фотошопе присутствуют обе модели, только одна из них находится в редакторе выбора цвета, а другая — в окне настроек Hue/Saturation

Здесь красным показа RGB-модель, синим — HSB, зеленым — CMYK и голубым Lab (о ней чуть позже), что видно на картинке 🙂
А HSL-модель находится в таком вот окошке:

Недостаток HSB-модели в том, что она также зависит от аппаратной части. Она просто не соответствуют восприятию человеческого глаза, т.к. оный воспринимает цвета с разной яркостью (например, синий воспринимается нами более темным, чем красный), а в этой модели у всех цветов одинаковая яркость. У HSL аналогичные проблемы 🙂

Таких недостатков хотели избежать, поэтому одна небезызвестная компания CIE (Международная комиссия по освещению — Commission Internationale de l’Eclairage) придумала новую модель, призванную не зависеть от аппаратной части. И назвали её Lab (нет, это не сокращение от Laboratory).

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

По названию

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

CSS Справка

CSS СправкаCSS СелекторыCSS функцииCSS Ссылка AuralCSS Веб-Safe шрифтыCSS AnimatableCSS ЕдиницыCSS PX-EM конвертерCSS ЦветаCSS цвет ЗначенияCSS3 Поддержка браузеров

CSS свойства

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-shadow
box-sizing

caption-side
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
hanging-punctuation
height
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width

nav-down
nav-index
nav-left
nav-right
nav-up

opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
position
quotes

resize
right

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap

z-index

Светодиодные ленты RGB, RGBW и RGBWW

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

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

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

Выбор оттенков в светодиодных лентах огромен – более 15 миллионов вариантов.

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

Расшифровка

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

1. RGB – самое простое решение, которое появилось первым и используется до сих пор. В нем три цвета R – красный, G – зеленый и B – синий. Полноцветная система, которая состоит из трех монохромных каналов, подключаемых независимо друг от друга, что обеспечивает широкие настройки и большое количество возможных оттенков.
2. RGBW – усовершенствованная лента, в которой к трем стандартным цветам добавлен холодный белый (White) с цветовой температурой в 6000 К. Если сравнивать RGB и RGBW разница в одном диоде, но за счет него количество оттенков становится еще больше, также при необходимости можно включить чистый белый свет.
3. Что значит RGBWW. Тут есть еще один белый светодиод, но в отличие от первого он имеет теплый белый свет с температурой 2700-2900 К.

Дополнительные элементы позволяют получить новые оттенки, которые невозможно настроить на стандартной ленте.