Как сделать в css прозрачный и полупрозрачный фон

Как сделать прозрачный рисунок в PowerPoint

Для того чтобы сделать картинку прозрачной в PowerPoint нужно выделить ее мышкой и перейти на вкладку «Формат рисунка».

На вкладке «Формат рисунка» нужно нажать на кнопку «Прозрачность» и выбрать один из предложенных уровней прозрачности для изображения.

Если стандартные уровни прозрачности изображения не подходят, то их можно настроить вручную. Для этого нужно нажать на кнопку «Параметры прозрачности рисунка».

В результате откроется боковое меню, в котором можно будет указать любое значение прозрачности от 0 до 100%.

Также в данном меню можно изменить и другие параметры картинки, например, настроить резкость, яркость, контрастность и насыщенность изображения.

Use Hex Values to Create a Transparent Color in CSS

We often use hex values with six characters followed by to give a specific color to an HTML element. For example, . We can make the color transparent by adding two numeric values at the end of the hex value and making it an eight-character hex value. For example, . Here, denotes the color, and at the end denotes the opacity of the color. If you want a 50% transparent color, you can use the value at the end of the hex code. Since the scale is in RGB Colors, the half would be , which converted to hex becomes . The child element does not get transparent, unlike that of the property.

For example, create an HTML document with heading and class , i.e . Give background color to the class. Add at the end of the hex code to make it 50% transparent. Such that the hex code becomes .

The example below shows that the background color of the heading gets 50% transparent as we add at the end of the hex code.

Example Code:

Contribute
DelftStack is a collective effort contributed by software geeks like you. If you like the article and would like to contribute to DelftStack by writing paid articles, you can check the write for us page.

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-weightgapgridgrid-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-eventspositionquotesresizerightrow-gapscroll-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

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

Способ 5: Paint

Если возможности использовать Paint 3D нет или вы считаете, что в этом нет необходимости, рассмотрите как альтернативу стандартный Paint. В нем есть функция обрезки, однако прозрачный фон сохраняется только в том случае, если вы копируете вырезанный объект и вставляете его на другую картинку, так же открытую в отдельном окне программы. Если же вы планируете сохранить изображение с прозрачным фоном, этого сделать не получится — он заменится на белый и понадобится дополнительное редактирование. С наложением же функциональность Paint поможет справиться без надобности обращения к другим программам. Заранее подготовьте два изображения для наложения и выполните такие действия:

1. Откройте меню «Пуск», найдите там «Paint» и запустите данное приложение.

Разверните меню «Файл» и выберите вариант «Открыть».

Откройте ту картинку, которая должна наложиться на другую, разверните инструмент «Выделить» и используйте функцию «Выделить все». Вместо этого можно зажать горячую клавишу Ctrl + A.

Используйте комбинацию Ctrl + C для копирования выделенного.

Запустите Paint в новом окне, где откройте изображение для наложения подготовленной картинки с прозрачным фоном. Разверните блок с инструментами «Выделить» и активируйте галочку возле пункта «Прозрачное выделение».

Нажмите «Вставить» или примените стандартную горячую клавишу Ctrl + V.

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

Снова откройте меню «Файл», наведите курсор на «Сохранить как» и выберите вариант «Изображение в формате PNG».

Выберите название для файла и сохраните его в удобном месте на компьютере.

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

Подробнее: Создание прозрачного фона для картинки онлайн

Опишите, что у вас не получилось.
Наши специалисты постараются ответить максимально быстро.

background-size

С помощью свойства можно осуществить изменение величины фоновой картинки, то есть использовать ее масштабирование. Размер можно изменять используя любые единицы, которые допустимы в таблицах CSS – проценты, пиксели, em (величина применяемого в блоке шрифта).

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

Значение по умолчанию – .

На примере мы взяли квадрат размером 200×200 и фоновую картинку меньшим размером – 100×100, которой заполнили заполнили всю область фона с помощью .

See the Pen
background-size by Андрей (@adlibi)
on CodePen.

Пример c использованием фона для текста:

Еще один вариант сделать текст прозрачным — это наложить на него такой же фон, как и в блоке под ним (см.: Background для текста).

Прозрачный текст

HTML данного варианта:

<div class=»background»>
<div class=»background-text»><span>Прозрачный текст</span></div>
</div>

CSS данного варианта:

.background {
text-align: center;
padding: 120px 10px;
background: url(«background.jpg») top center;
}
.background-text {
padding: 10px 20px;
background: #BFE2FF;
display: inline-block;
}
.background-text span {
font-family: Tahoma, sans-serif;
font-weight: bold;
font-size: 48px;
line-height: 48px;
text-transform: uppercase;
background: url(«background.jpg») top -130px center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

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

А минус в том, что текст с заданным ему фоном должен умещаться в 1 строку.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

RGBA

Современный подход гораздо проще и нагляднее вышеприведенных методов и состоит в использовании для цвета и фона формат RGBA. Первые три буквы знакомы многим и расшифровываются как red, green, blue (красный, зеленый, синий), последняя символизирует собой альфа-канал и задает прозрачность элемента. Формат записи такой.

background-color: rgba(r, g, b, a);

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

Не все браузеры поддерживают такой формат: Internet Explorer начиная с версии 9, Opera с версии 10, Firefox с 3, Safari с 3.2. Но в целом, современные браузеры корректно отображают прозрачность. Для старых версий IE можно отдельно указать цвет в привычном для него формате, при этом, естественно, никакой прозрачности не будет. Или опять воспользоваться свойством filter, но тогда придется мириться, что прозрачность также затронет и текст (пример 3). Чтобы соблюсти валидный код CSS, я воспользовался условными комментариями.

Пример 3. Использование RGBA

HTML5CSS3IECrOpSaFx

Результат примера можно посмотреть на рис. 6.

Рис. 6. Полупрозрачный фон с непрозрачным текстом

Сравните картинку с предыдущей, буквы стали ярче и четче.

В браузере Internet Explorer 7 обнаружился баг при сочетании background-color с разными значениями. К примеру, если задать цвет фона красным, как показано ниже, то фон в IE7 вообще не отобразится.

Решается это заменой свойства background-color на background.

backgroundbackground-color

Background Image Transparency in HTML and CSS

CSS offers a way to set the background image for a container element with the property, so you don’t necessarily have to do it with the CSS. This means you can also place text in the container as well.

The downside of this approach is that the opacity is set for the container where the image and text are. So, the opacity affects the text as well, not only the image. This is probably not what you want!

The solution

By default, when you apply an opacity to a container, the descendants inherit it as well.

A workaround in this situation is to set the background image in the HTML. This makes it easy to apply the opacity to the image only, instead of setting the background image for the container in the CSS.

This time around, the image and the text will be separated, so the text will not inherit the value set for the .

This means you also have to use CSS positioning to align the text within the image.

In the CSS code snippet above, I use to center everything on the page.

The container element with the class of is positioned , so you can position the text within it. This will push the text to the top-left corner of the image. The and properties are then used to push the text to the bottom-left corner of the image.

If you are wondering what the and properties are, they are the properties you get access to when you use the display property.

In addition to these two, you also get access to the and properties. They let you position an element anywhere.

In the end, the image is opaque and the text is not affected:

Use the rgba() Function to Create Transparent Color in CSS

The function defines colors using the red-green-blue-alpha model. The in the function signifies color values for red, green, and blue, while signifies the opacity of the color. Each parameter (red, blue, green) defines the intensity of color between . Whereas the value of has to be between . For example . The lesser the value of , the more transparent the color will be. The child element does not get transparent, unlike that of the property. If the value of is , the color will be semi-transparent or 50% transparent.

For example, create an HTML document with heading and class . Write the text between the heading tag. Use the function to give them background color to the class. Put the value as . Decrease the value of to make it more transparent and increase the value of to make it more opaque.

The example below shows that the background color of the heading gets transparent as we put the value of as . However, the child element does not get transparent.

Example Code:

Способ 2. Не замороченный

В редких случаях разработчики решают проблему с внедрением полупрозрачной картинки путем вставки…уже готовой полупрозрачной картинки! Для этого используются изображения, сохраненные в формате PNG-24. Данный графический формат позволяет задавать 256 уровней полупрозрачности.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head> 
  <meta charset=utf-8" />
  <title>Пример 1</title>
  <style type="text/css">
  BODY {
  background: url(https://i75.mindmix.ru/50/90/349050/42/6073342/hhhttttttttt.png);
  background-size:100%;
  }
  div {
 width: 65%;
text-align:center;
 margin-top: 35px;
margin-left: 15%;
}
  </style>
  </head>
  <body>
  <div>
   Текст на рисунке в формате png.
</div>
  </body>
</html>

Однако такой способ не удобен по нескольким причинам:

1. Internet Explorer 6 не работает с такой технологией, для него нужно писать скриптовый код;
2. Нельзя видоизменять цвета фона в css;

Эффект прозрачности фона (HTML и CSS)

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

Такой эффект достигается разными способами, включая старомодные методы, как использование рисунка PNG в качестве фона, создание клетчатого изображения и свойство opacity. Но как только возникает необходимость сделать в блоке полупрозрачный фон, у этих методов оказываются неприятные оборотные стороны.

Рассмотрим полупрозрачность текста и фона — как правильно ее использовать в дизайне сайта:

opacity

Основная особенность этого свойства состоит в том, что значение прозрачности действует на все дочерние элементы внутри, а не только на фон. Это значит, что и фон и текст станут полупрозрачными. Увеличить уровень прозрачности можно изменяя команду opacity от 0.1 до 1.

HTML 5 CSS 3 IE 9

RGBA

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

Обычно в дизайне полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba, затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1, при этом 0 означает полную прозрачность, а 1 непрозрачность цвета — синтаксис применения rgba.

Полупрозрачный фон

HTML 5 CSS 3 IE 9

Значение непрозрачности для фона установлено 90% — полупрозрачный фон и непрозрачный текст.

• < Назад
• Вперёд >

Повторение изображения

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

Стиль:

#div4
  {
  width: 1100px;
  height: 800px;
  border: 1px solid Red;
  background-image: url("image.jpg");
  }

HTML код:

<div id="div4"></div>

Чтобы изменить повторение изображения, используется свойство background-repeat.
Оно принимает такие значения:

background-repeat: repeat — повторяется по горизонтали и по вертикали
(по умолчанию)

background-repeat: repeat-x — повторяется только по горизонтали

background-repeat: repeat-y — повторяется только по вертикали

background-repeat: no-repeat — не повторяется

background-repeat: inherit — значение принимается от родительского элемента

Изменим фон блока так, чтобы изображение не повторялось.

background-repeat: no-repeat;

В такой ситуации тоже можно использовать позиционирование изображения. Значением свойства
background-position могут быть не только слова, но и два числа в
единицах измерения CSS,
указанные через пробел. Это отступы изображения от левого верхнего угла блока.

Попробуйте разные способы повторения изображения.

Use the opacity Property to Create a Transparent Color in CSS

The is one of the properties used in CSS, especially with the colors. We can use values between to to show the opacity of color or an element. If the value is , it means the color is 100% opaque. It means the color is not transparent at all. If we decrease the value initially, the element will get more transparent. If the value is , the color will get semi-transparent or 50% transparent. However, while using , the child element also gets transparent.

For example, create an HTML document with a heading and a class . Set the as and value after selecting the class in CSS. If we want the heading and its background color to get more transparent, we can decrease opacity value.

The example below shows that the background color and the heading get transparent as we keep the value, i.e. .

Example Code:

Как сделать изображение фоном страницы в HTML

Свойство, используемое для указания фонового изображения (в каком-то смысле его можно назвать тегом фона html-страницы) — background-image. В качестве значения необходимо указать url(«nom_de_l_image.png»). Например:

body
{
background-image: url("snow.png");
}

В результате мы получим:

Фоновое изображение страницы

Адрес, указывающий местоположение фонового изображения, может быть записан как абсолютный адрес (http: // …) или как относительный (fond.png).

Будьте внимательны при указании относительных адресов в файле CSS. Адрес изображения должен быть указан относительно файла .css, а не относительно файла .html. Чтобы упростить ситуацию, советую размещать фоновое изображение в той же папке, что и файл .css.

Управление позицией фонового изображения

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

Значение	Описание
left topleft centerleft bottomright topright centerright bottomcenter topcenter centercenter bottom	Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет «center»
x% y%	Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0% 0% (это значение по умолчанию). В правом нижнем углу 100% 100%. Если указано только одно значение, то другое значение будет 50%.
x y	Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения.

Рассмотрим пример использования этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Пример позиционирования фонового изображения</title>
<style> 
div {
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
background-image: url("smile_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /**/
width: 100px; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */
margin: 10px; /* устанавливаем внешние отступы со всех сторон */
text-align: center; /* выравниваем текст по центру */
line-height: 60px; /* указываем высоту строки */
background-color: azure; /* задаем цвет заднего фона */
}
.leftTop {background-position: left top;} /* задаем позицию ключевыми словами */
.leftCenter {background-position: left center;} /* задаем позицию ключевыми словами */
.leftBottom {background-position: left bottom;} /* задаем позицию ключевыми словами */
.rightTop {background-position: right top;} /* задаем позицию ключевыми словами */
.rightCenter {background-position: right center;} /* задаем позицию ключевыми словами */
.rightBottom {background-position: right bottom;} /* задаем позицию ключевыми словами */
.centerTop {background-position: center top;} /* задаем позицию ключевыми словами */
.centerCenter {background-position: center center;} /* задаем позицию ключевыми словами */
.centerBottom {background-position: center bottom;} /* задаем позицию ключевыми словами */
.userPosition {background-position: 20px 75%;} /* задаем позицию по горизонтали в пикселях, а по вертикали в процентах */
</style>
</head>
	<body>
		<div class = "leftTop">left top</div>
		<div class = "leftCenter">left center</div>
		<div class = "leftBottom">left bottom</div>
		<div class = "rightTop">right top</div>
		<div class = "rightCenter">right center</div>
		<div class = "rightBottom">right bottom</div>
		<div class = "centerTop">center top</div>
		<div class = "centerCenter">center center</div>
		<div class = "centerBottom">center bottom</div>
		<div class = "userPosition">20px 75%</div>
	</body>
</html>

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

Результат нашего примера:

Рис. 117 Пример позиционирования фонового изображения.

Метод RGB

Red-Green-Blue, сокращенно обозначаемый как «RGB». Как и в шестнадцатеричном коде, чтобы выбрать цвет, необходимо определить количество красного, зеленого и синего.

Это намного практичнее, и с помощью простой программы для рисования, такой как Paint, можно найти нужный цвет. Вот действия, которые необходимо выполнить:

Зайдите в меню «Пуск», найдите в нем программу Paint и запустите ее.
Перейдите в раздел «Редактировать цвета», как показано на рисунке, приведенном ниже.
Откроется окно. В поле справа переместите ползунки, чтобы выбрать нужный цвет. Предположим, нужно вывести заголовки

розовым цветомВыберите цвет в окне, как показано на рисунке, приведенном ниже.

Обратите внимание на соответствующие значения Red-Green-Blue, указанные в правом нижнем углу окна. Введите эти значения в том же порядке в CSS.

p
{
color: rgb(240,96,204);
}

Изменение цвета в Paint

Выбор цвета в Paint

Чтобы использовать метод RGB, нужно ввести rgb (Red, Green, Blue), заменив «Red, Green, Blue» соответствующими числами в диапазоне от до 255.