Конвертер кольорів

За допомогою універсального конвертер кольорів ви можете легко перевести колір з однієї колірної моделі до ряду інших.

Насамперед, калькулятор служить для зручної роботи із сучасними форматами 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 - чорної. Це можна позначити наступним чином: C9M83Y100K46, або (9%, 83%, 100%, 46%), або (0,09/0,83/1,0/0,46).

HSB/HSV

HSB (також відома як HSV) схожа на HSL, але це дві різні колірні моделі. Художники часто вважають за краще використовувати цю модель, прийнято вважати, що пристрій HSB/HSV ближче до природного сприйняття кольорів. HSB застосовується в Adobe Photoshop.

HSB/HSV розшифровується як Hue (колір/відтінок), Saturation (насиченість), Brightness/Value (яскравість/значення).

Hue задає положення кольору на колірному колі (від 0 до 360).

XYZ

Колірна модель XYZ (CIE 1931 XYZ) є суто математичним простором. квітів для змішування.XYZ є майстер-моделлю майже всіх інших колірних моделей, які у технічних областях.

LAB

Колірна модель LAB (CIELAB, CIE 1976 L*a*b*) обчислюється з простору CIE XYZ. При розробці Lab переслідувалася мета створення колірного простору, зміна кольору в якому буде більш лінійною з точки зору людського сприйняття (порівняно з XYZ), тобто для того, щоб однакова зміна значень координат кольору в різних областях колірного простору виробляло однакове відчуття зміни кольору.

Як зробити жовтий колір

Жовтий колір – один з основних кольорів, який відіграє важливу роль у дизайні, мистецтві, моді та багатьох інших областях.

1. Змішування фарб:

• Основні кольори: Жовтий є одним із основних кольорів, тому його не можна отримати шляхом змішування інших кольорів.
• Створення відтінків жовтого:
  • Додавання білого до жовтого освітлює його, створюючи пастельні відтінки, такі як лимонно-жовтий, кремовий та солом'яний.
  • Додавання чорного до жовтого затемняє його, створюючи глибші відтінки, такі як гірчичний, охру та оливковий.
  • Додавання червоного до жовтого створює більш теплі відтінки, такі як помаранчевий та бурштиновий.
  • Додавання синього до жовтого створює більш холодні відтінки, такі як лаймовий та салатовий.

  2. Одержання жовтого кольору із натуральних матеріалів:

  3. Одержання жовтого кольору у цифрових інструментах:

  • Колірні моделі:
    • RGB: У моделі RGB жовтий колір можна отримати за допомогою комбінації червоних, зелених і синіх значень. Наприклад, HTML-код для чистого жовтого кольору — #ffff00.
    • CMYK: У моделі CMYK жовтий колір виходить шляхом змішування пурпурового, блакитного та чорного.
    • У таких програмах, як Photoshop, Illustrator, GIMP, можна вибрати жовтий колір із палітри або створити його за допомогою інструментів змішування.

    4. Поради:

    • Використовуйте якісні фарби та матеріали для досягнення найкращих результатів.
    • Перед змішуванням фарб завжди експериментуйте на невеликій палітрі.
    • Записуйте пропорції кольорів, які Ви використовуєте, щоб відтворити потрібний відтінок.
    • Використовуйте колірне коло, щоб краще зрозуміти взаємозв'язок між кольорами.

    5. Приклади використання жовтого кольору:

    • Дизайн: Жовтий колір може використовуватися для створення почуття радості, оптимізму та енергії.
    • Мистецтво: Жовтий колір часто використовується для зображення сонця, світла та тепла.
    • Мода: Жовтий колір може додати яскравості та контрасту у ваш гардероб.