Вибір та конвертер кольорів

Моделі кольорів

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

RGB / RGBA

Формат

RGB визначає кольори шляхом змішування червоного, зеленого та синього світла. Кожен канал від 0 до 255. rgb(255, 0, 0) - це чистий червоний. rgb(255, 255, 255) - це білий. Канал A (альфа) додає прозорість від 0 (повністю прозорий) до 1 (повністю непрозорий). Наприклад, rgba(255, 0, 0, 0.5) - це напівпрозорий червоний. RGB є рідною моделлю кольорів для екранів та цифрових дисплеїв.

Історія

Модель RGB ґрунтується на теорії трихроматичного кольорового зору Юнга-Гельмгольца з XIX століття. Джеймс Клерк Максвелл провів перші експерименти з RGB кольоровою фотографією у 1861 році. RGB став стандартом для електронних дисплеїв з розвитком кольорових телевізорів з ЕПТ у 1930-х та 1940-х роках. Кольоровий простір sRGB був офіційно прийнятий як веб-стандарт у HTML 3.2 у січні 1997 року.

HEX / HEXA

Формат

HEX - це компактний запис для значень RGB у шістнадцятковому форматі. #FF0000 - це те саме, що rgb(255, 0, 0). Кожна пара шістнадцяткових цифр представляє один канал: #RRGGBB. 8-значний формат #RRGGBBAA додає альфа-канал, де 00 - повністю прозорий, а FF - повністю непрозорий. Наприклад, #FF000080 - це червоний з 50% непрозорості. Скорочені форми на кшталт #F00 розгортаються у #FF0000.

Історія

Шістнадцяткова нотація кольорів виникла у ранніх веб-браузерах середини 1990-х років. Перші версії Mosaic та Netscape Navigator успадкували систему іменування кольорів X11. CSS Level 1, опублікований у грудні 1996 року Хоконом Віумом Лі та Бертом Босом, офіційно стандартизував шістнадцяткові триплети як основний спосіб задання кольорів у вебі.

HSL / HSLA

Формат

HSL описує колір як відтінок, насиченість та світлість. Відтінок - це градус на колірному колі (0-360): 0 - червоний, 120 - зелений, 240 - синій. Насиченість (0-100%) контролює інтенсивність кольору. Світлість (0-100%) контролює яскравість, де 0% - чорний, а 100% - білий. HSL часто інтуїтивніший за RGB для вибору кольорів, оскільки дозволяє окремо налаштовувати яскравість та насиченість.

Історія

HSL вперше описали Джордж Х. Джоблов та Дональд Грінберг у статті 1978 року в Computer Graphics. Він був створений для вирішення фундаментальної проблеми RGB: змішування червоних, зелених та синіх значень неінтуїтивне для людей. HSL переставляє колірний простір RGB так, щоб художники та дизайнери могли мислити в термінах кольору (відтінок), яскравості кольору (насиченість) та яскравості (світлість), що ближче відповідає тому, як люди природно описують кольори.

HSV / HSB

Формат

HSV (відтінок, насиченість, значення) подібний до HSL, але використовує "значення" (яскравість) замість світлості. При 100% значенні повністю насичені кольори є чистими та яскравими. HSV природніше відображається на роботу палітр кольорів: панель насиченості/яскравості регулює S та V, тоді як повзунок відтінку регулює H.

Історія

HSV був описаний Алві Реєм Смітом у серпні 1978 року під час роботи в лабораторії комп'ютерної графіки Нью-Йоркського інституту технологій. Він був опублікований у тому ж випуску Computer Graphics, що й HSL. Сміт розробив HSV для ранньої програми цифрового малювання, де художникам потрібен був інтуїтивний спосіб вибору кольорів на екрані. Циліндрична модель HSV зробила природним його впровадження як палітри кольорів з повзунком відтінку та панеллю насиченості/яскравості.

CMYK

Формат

CMYK (блакитний, пурпурний, жовтий, ключовий/чорний) використовується у друку. У той час як RGB є адитивним (світло), CMYK є субтрактивним (чорнило). Кожне значення представляє відсоток нанесеного чорнила. cmyk(0, 100, 100, 0) створює червоний. Конвертація між RGB та CMYK є приблизною, оскільки вони покривають різні діапазони кольорів (гамути).

Історія

Основи CMYK сягають часів Якоба Крістофа Ле Блона, який винайшов напівтонову кольорову печатку з використанням окремих мідних пластин близько 1710 року. Спочатку він використовував червону, жовту та синю пластини, а пізніше додав чорну пластину для чіткіших контурів та тексту. Сучасний чотирикольоровий процес CMYK вперше був реалізований у 1890-х роках для кольорових газетних ілюстрацій. Чорна пластина називається "ключовою" (key) пластиною, оскільки вона несе дрібні деталі, за якими вирівнюються (прив'язуються) інші пластини.

Формати кольорів CSS

Сучасний CSS підтримує кілька нотацій кольорів:

• #FF5733 або #ff5733 (HEX)
• rgb(255, 87, 51) або rgba(255, 87, 51, 0.5)
• hsl(14, 100%, 60%) або hsla(14, 100%, 60%, 0.5)
• Іменовані кольори: red, cornflowerblue, rebeccapurple (148 іменованих кольорів)