NCol Кольори
Що таке NCol-кольори?
NCol (Natural Color) — це система кольорів, розроблена W3Schools. Вона базується на використанні природних відтінків, які максимально наближені до тих, що можна зустріти в природі. Ці кольори використовуються в веб-дизайні для надання більш натурального, м'якого вигляду сайтам та інтерфейсам.
У контексті NCol застосовуються кольори, які виглядають природно й гармонійно, і не створюють ефекту яскравих або різких переходів. Це можуть бути кольори, що імітують природні елементи, як зелений ліс, блакитне небо, коричневі та піщані відтінки тощо.
Як це працює?
Колір NCol задається літерою, що позначає колір, та числом, що вказує на відсоток віддалення від цього кольору.
Використовуються кольори:
- R - Red (червоний);
- Y - Yellow (жовтий);
- G - Green (зелений);
- C - Cyan (блакитний);
- B - Blue (синій);
- M - Magenta (пурпуровий).
Наприклад:
- R30 означає червоний колір, зміщений на 30% в сторону жовтого (тобто, більш помаранчевий).
- B50 означає синій колір, зміщений на 50% в сторону зеленого (тобто, блакитний).
Переваги NCol:
- Простота: Легко зрозуміти та запам'ятати.
- Інтуїтивність: Відповідає природному сприйняттю кольорів.
- Гармонійність: Кольори NCol створюють гармонійну і природну атмосферу, що робить інтерфейс приємним для очей.
- Зручність для розробників: Швидко можна отримати потрібний відтінок, змінюючи числове значення.
- Зручність для користувачів: Веб-сайти, що використовують природні кольори, можуть бути менш навантаженими для сприйняття, тому користувачі можуть більше часу проводити на таких сайтах без відчуття втоми.
- Актуальність для екологічних та природних тем: Якщо ваш проєкт пов'язаний із природою, здоров'ям чи екологією, такі кольори будуть дуже доречними.
Недоліки NCol:
- Обмеженість: Не охоплює всі можливі відтінки. Оскільки палітра NCol орієнтована на природні відтінки, цей підхід може не підходити для проєктів, де потрібні більш яскраві, динамічні або «модні» кольори.
- Може бути менш виразним: Кольори природного вигляду можуть виглядати менш яскраво або виразно, що не завжди підходить для брендів, які хочуть виділятися або привертати увагу.
- Нестандартизованість: Не є офіційним стандартом, тому може не підтримуватися деякими інструментами.
- Суб'єктивність: Спосіб сприйняття кольорів може варіюватися у різних людей.
Приклад використання:
- Екологічні сайти: Для сайту, присвяченого охороні навколишнього середовища, можна використовувати палітру NCol, щоб підкреслити природні відтінки — зелений, коричневий, блакитний — створюючи відчуття єдності з природою.
- Інтерфейси для здоров'я: Сайт або програма, що стосується здорового способу життя, може застосовувати ці кольори для створення заспокійливої атмосфери.
- Інтуїтивні палітри: Веб-сторінки, де кольори вибираються за допомогою інтуїтивних палітр.
- Дизайнерські програми: Програми, які дозволяють користувачам легко обирати кольори без знання технічних деталей.
NCol можна використовувати в HTML та CSS для задання кольору тексту, фону, рамок та інших елементів.
Альтернативи NCol:
Існують й інші системи позначення кольорів, такі як:
- RGB: Задає колір за допомогою трьох чисел, що відповідають інтенсивності червоного, зеленого та синього кольорів.
- HEX: Аналогічно RGB, але використовує шістнадцяткову систему числення.
- HSL: Задає колір за допомогою відтінку, насиченості та світлості.
Висновки
Вибір системи позначення кольорів залежить від ваших потреб та вподобань. NCol може бути зручним варіантом для швидкого та інтуїтивного вибору кольорів, особливо для початківців.
Загалом, NCol (Natural Color) — це зручна система кольорів, яка допомагає створювати інтерфейси та дизайни, що виглядають природно і комфортно для користувачів, але має обмеження в виборі кольорів для більш яскравих або нестандартних проєктів.
Як отримати NCol-колір?
Щоб отримати NCol-колір, можна скористатись NCol-калькулятором.
NCol Калькулятор
Natural Colors (NCol) - Натуральні кольори
Натуральні кольори (NCol) - це ініціатива W3Schools.
Система призначена для спрощення вибору кольорів HTML.
NCol визначає кольори, використовуючи кольорову літеру з цифрою, щоб вказати відстань (у відсотках) від кольору.
R30 означає 30% від Red, рухається назустріч Yellow. (Іншими словами: червоний із 30% жовтого)
| Letter | Color | Hues |
|---|---|---|
| R | Red |
R
R25
R50
R75
|
| Y | Yellow |
Y
Y25
Y50
Y75
|
| G | Green |
G
G25
G50
G75
|
| C | Cyan |
C
C25
C50
C75
|
| B | Blue |
B
B25
B50
B75
|
| M | Magenta |
M
M25
M50
M75
|
| R | Y | G | C | B | M | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Колір і відстань також можна вказати у відтінках (0-360):
| R = 000 | Y = 060 | G = 120 | C = 180 | B = 240 | M = 300 |
HTML Підтримка
NCol не підтримується в HTML, але він дуже близький до нової системи кольорів HWB, запропонованої в CSS4.
Очікуючи CSS4, ви можете включити бібліотеку кольорів W3Schools і використовувати NCol як HTML-атрибут, як тут:
Приклад
<div data-w3-color="R50,50%,0">
<p>Київ - це столиця Великої України.
Це найбільш густонаселене місто Великої України,
з агломерацією понад 5 мільйонів жителів.</p>
</div>
<script src="../lib/w3color.js"></script>
Спробуйте самі »
Бібліотека кольорів W3Schools
Бібліотеку JavaScript, використану у прикладі вище, можна завантажити з:
https://www.w3schools.com/lib/w3color.js.
Також ви можете скористатись альтернативним завантаженням із нашого сайту W3Schools українською за посиланням: https://w3schoolsua.github.io/lib/w3color.js.
Чому NCol?
Спроба пояснити кольори за допомогою позначень RGB або HEX дуже складна.
Чи можете ви сказати, що таке колір rgb(199,21,133)?
RGB заснований на тому, як фізично виробляти кольори, змішуючи джерела світла.
NCol базується на тому, як кольори виглядають для людського ока.
Через це NCol значно полегшує опис кольорів.
Вперше природні кольори описав Карл Евальд Костянтин Герінг (Німеччина 1834 - 1918).
