CSS rgb() — колір за червоним, зеленим і синім
Опис
Функція в CSS, відома як rgb(), використовується для створення кольору шляхом комбінування інтенсивностей червоного, зеленого та синього каналів. Ця функція є частиною основного інструментарію веб-дизайнера і забезпечує можливість створення багатого спектру кольорів.
rgb() пропонує простий і зручний спосіб керування кольорами на веб-сайті. Вона дозволяє вам налаштувати вигляд елементів, встановлюючи конкретні значення кольорових каналів. Наприклад, використання rgb(255, 0, 0) встановить чистий червоний колір, в той час як rgb(0, 255, 0) встановить зелений.
Функція rgb() приймає три аргументи: значення червоного каналу (від 0 до 255), значення зеленого каналу (від 0 до 255) та значення синього каналу (від 0 до 255). Кожне значення контролює інтенсивність кольору для відповідного каналу. Наприклад:
rgb(255, 0, 0)- червоний колір;rgb(0, 255, 0)- зелений колір;rgb(0, 0, 255)- синій колір.
Загальний опис
автор: NagarD
- Порада
-
Пам'ятайте, що в CSS також можна використовувати інші формати визначення кольорів, такі як HEX-коди та назви кольорів. Розгляньте всі доступні варіанти та виберіть найзручніший для своїх потреб.
автор: Bond - Нотатка
-
Важливо пам'ятати, що значення в
автор: Bondrgb()мають діапазон від0до255, де0представляє нульову інтенсивність, а255- повну інтенсивність. - Нотатка
-
Завдяки використанню функції
автор: Bondrgb(), ви можете точно контролювати кольори на вашому веб-сайті, створити власні палітри або забезпечити відповідність кольорів вашого бренду. Функціяrgb()є одним з основних способів визначення кольорів у CSS.
Синтаксис
rgb(<red>, <green>, <blue>);Функція rgb може отримувати єдине значення:
-
<red>/<green>/<blue> -
Числові значення від
автор: Bond0до255, які представляють інтенсивність червоного, зеленого та синього каналів відповідно.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Інструмент
Перекладає колір між HEX, RGB і HSL — кожне поле і вхід, і вихід.
Конвертер кольорів — окремою сторінкою, з поясненням пасток.
Наведіть курсор на квадрат, щоб змінити його кольору.
HTML
<div id="description">
<h2>Приклад 1: зміна кольору при наведенні</h2>
<p>Наведіть курсор на квадрат, щоб змінити його кольору.</p>
</div>
<div id="result">
<div class="square"></div>
</div>CSS
#description {
font-style: italic;
text-align: center;
line-height: 1.5;
margin-bottom: 50px;
padding: 12px 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
#result {
display: flex;
justify-content: center;
}
.square {
width: 200px;
height: 200px;
background-color: rgb(0, 0, 255);
transition: background-color 0.5s;
}
.square:hover {
background-color: rgb(255, 0, 0);
}Кожен квадрат має заданий фоновий колір за допомогою rgb().
HTML
<div id="description">
<h2>Приклад 2</h2>
<p>Кожен квадрат має заданий фоновий колір за допомогою rgb().</p>
</div>
<div id="result">
<div class="square"></div>
<div class="square custom-color"></div>
</div>CSS
#description {
font-style: italic;
text-align: center;
line-height: 1.5;
margin-bottom: 50px;
padding: 12px 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
#result {
display: flex;
justify-content: center;
}
.square {
width: 200px;
height: 200px;
display: inline-block;
}
.square:not(.custom-color) {
background-color: rgb(0, 0, 255);
}
.square.custom-color {
background-color: rgb(255, 0, 0);
}Верхній ряд — кольори й альфа-канал на клітчастому тлі. Нижній ряд показує різницю між прозорим ФОНОМ (rgb(0 0 0 / .4)) і прозорим ЕЛЕМЕНТОМ (opacity: .4): у першому випадку текст лишається чітким.
HTML
<div id="description">
<h2>rgb(): канали, альфа й чим це не opacity</h2>
<p>Клітчасте тло під плитками потрібне, щоб було видно прозорість.</p>
</div>
<div id="result">
<div class="row">
<figure><div class="sw black"></div><figcaption>rgb(0 0 0)</figcaption></figure>
<figure><div class="sw red"></div><figcaption>rgb(255 0 0)</figcaption></figure>
<figure><div class="sw red40"></div><figcaption>rgb(255 0 0 / 40%)</figcaption></figure>
<figure><div class="sw legacy"></div><figcaption>rgba(255, 0, 0, 0.4)</figcaption></figure>
</div>
<div class="row">
<figure><div class="card bg-alpha">Текст чіткий</div><figcaption>background-color: rgb(0 0 0 / .4)</figcaption></figure>
<figure><div class="card whole">Текст блідий</div><figcaption>background-color: rgb(0 0 0); opacity: .4</figcaption></figure>
</div>
</div>CSS
#result {
padding: 16px;
background-color: #fff;
background-image:
linear-gradient(45deg, #dee2e6 25%, transparent 25%, transparent 75%, #dee2e6 75%),
linear-gradient(45deg, #dee2e6 25%, transparent 25%, transparent 75%, #dee2e6 75%);
background-size: 24px 24px;
background-position: 0 0, 12px 12px;
}
.row {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 16px;
}
figure {
margin: 0;
text-align: center;
font: 12px/1.4 sans-serif;
}
figcaption {
margin-top: 6px;
}
.sw {
width: 110px;
height: 70px;
border-radius: 6px;
}
.black {
background-color: rgb(0 0 0);
}
.red {
background-color: rgb(255 0 0);
}
.red40 {
background-color: rgb(255 0 0 / 40%);
}
.legacy {
background-color: rgba(255, 0, 0, 0.4);
}
.card {
width: 180px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
color: #fff;
font: 16px/1 sans-serif;
}
.bg-alpha {
background-color: rgb(0 0 0 / 0.4);
}
.whole {
background-color: rgb(0 0 0);
opacity: 0.4;
}Коментарі
Коментарів ще немає — будьте першим!