Статьи о цвете
Практические статьи о цвете для дизайнеров и SMM: как получить палитру из фото, HEX/RGB/HSL, градиенты, контраст, гармонии и оформление соцсетей.
Основы цвета
- 6 цветовых гармоний: схемы сочетания цветовМонохромная, аналоговая, комплементарная, расщеплённая, триада и тетрада: как устроены цветовые гармонии, когда их применять и примеры HEX-кодов.2 мин чтения
- Названия цветов на русском с HEX-кодами: таблицаТаблица названий цветов и оттенков на русском языке с HEX и RGB: красные, оранжевые, жёлтые, зелёные, синие, фиолетовые, коричневые и нейтральные.2 мин чтения
- Психология цвета в маркетинге и дизайнеКакие ассоциации вызывают красный, синий, зелёный, жёлтый, чёрный и другие цвета, как это учитывать в бренде и рекламе и где проходят границы мифов.2 мин чтения
- Теория цвета для начинающих: главное за 10 минутОсновы теории цвета: цветовой круг, тон, насыщенность и светлота, тёплые и холодные цвета, контраст и гармонии. Простые правила для дизайна и фото.2 мин чтения
- Тёплые и холодные цвета: как отличить и сочетатьКакие цвета тёплые, а какие холодные, как температура цвета влияет на восприятие, почему бывает тёплый синий и холодный красный. Таблица с HEX.2 мин чтения
- Что такое HEX-код цвета и как его читатьHEX-код цвета простыми словами: из чего состоит #RRGGBB, как перевести HEX в RGB, короткая запись #RGB, прозрачность #RRGGBBAA и частые ошибки.2 мин чтения
- RGB, HEX и HSL: в чём разница и что выбратьСравниваем форматы цвета RGB, HEX и HSL: как устроены, чем отличаются, когда какой удобнее, как переводить один в другой. Таблица и примеры CSS.2 мин чтения
Цвет в веб-дизайне
- Дальтонизм и дизайн: как сделать доступную палитруКак люди с нарушениями цветового зрения видят палитру, какие сочетания опасны (красный-зелёный), как проверить дизайн и сделать цвета доступными.2 мин чтения
- Как выбрать цветовую палитру для сайта: 7 шаговПошаговый способ подобрать цвета для сайта: роли цветов, источник палитры, фон, текст, акцент, состояния интерфейса, контраст и тёмная тема.2 мин чтения
- Контраст текста и фона по WCAG: нормы и проверкаКакой контраст текста нужен по WCAG 2.1 (4,5:1 и 3:1), как он считается, как проверить и исправить цвета палитры, чтобы текст читался.2 мин чтения
- Правило 60-30-10 в дизайне: как распределить цветаЧто такое правило 60-30-10, как применять его на сайте, в презентации, соцсетях и интерьере, примеры палитр и когда правило можно нарушать.2 мин чтения
- Цвета в CSS: переменные, hsl() и темыКак хранить палитру в CSS-переменных, называть цвета по ролям, строить оттенки через hsl() и color-mix(), делать светлую и тёмную тему.2 мин чтения
- Цвета для тёмной темы: как подобрать палитруКак сделать тёмную тему сайта или приложения: фон не чисто чёрный, уровни поверхностей, светлые акценты, контраст текста и перенос палитры из светлой темы.2 мин чтения
Инструкции
- Как алгоритм извлекает доминантные цвета из фотоПростым языком о квантовании цвета: гистограмма, median cut, k-means, пространство Lab и ΔE. Почему палитра из фото выглядит именно так.3 мин чтения
- Как перенести палитру из фото в Figma и CanvaПошагово переносим цвета, извлечённые из фото, в Figma (Color styles и переменные) и Canva (бренд-набор): HEX-коды, названия, порядок.2 мин чтения
- Как получить палитру цветов из фото: инструкцияПошагово показываем, как извлечь 5–8 доминантных цветов из любого фото и получить HEX, RGB, HSL и CSS-градиент бесплатно и без регистрации.2 мин чтения
- Как узнать цвет на фото: HEX-код по картинке онлайнСпособы определить цвет на фотографии и получить его HEX-код: онлайн-генератор, пипетка в браузере, Photoshop, Figma и телефон.2 мин чтения
- Палитра для интерьера по фото: как перенести цветаКак подобрать цвета интерьера по фотографии: извлечь палитру, распределить по правилу 60-30-10, подобрать краску по HEX и проверить при реальном свете.2 мин чтения
- CSS-градиент из фото: как сделать и вставить на сайтКак превратить цвета фотографии в CSS-градиент linear-gradient: генерация в один клик, синтаксис, углы, точки остановки и примеры кода.2 мин чтения
Соцсети и бренд
- Как оформить ленту соцсетей в едином стиле и цветеКак сделать визуально цельную ленту во ВКонтакте, Telegram и других соцсетях: фирменная палитра из фото, правила обработки, шаблоны и чередование.2 мин чтения
- Оформление Telegram-канала и сообщества VK в цветах фотоРазмеры обложки VK, аватара и картинок для Telegram, как подобрать цвета оформления по фото и сделать картинки к постам в единой палитре.2 мин чтения
- Фирменные цвета бренда по фото: пошаговый методКак подобрать фирменную палитру бренда из фотографий продукта, места или материалов: выбор снимков, отбор цветов, роли, проверка и оформление в гайдлайн.2 мин чтения
- Цвет в фотографии: как палитра снимка помогает обработкеКак анализ палитры помогает фотографу: проверка баланса белого, единый стиль серии, цветовые схемы в кадре, подбор фона и одежды для съёмки.2 мин чтения
- Цветовая палитра для сторис: как подобрать и оформитьКак подобрать цвета для сторис по фото, оформить фон, текст и стикеры в одной палитре, какие размеры использовать и как сделать PNG-карточку 1080×1920.2 мин чтения
Готовые палитры
- Нейтральные цвета: бежевый, серый, тауп — HEX-кодыКакие цвета нейтральные, чем отличаются тёплые и холодные нейтральные, готовые наборы с HEX и как подобрать нейтральные к любой палитре.2 мин чтения
- Осенняя палитра: цвета осени с HEX-кодамиГотовые осенние палитры с HEX: осенний лес, тыквенный, туманный ноябрь. Сочетания для дизайна, соцсетей, интерьера и одежды.2 мин чтения
- Пастельные цвета: палитры с HEX-кодами и сочетанияЧто такое пастельные цвета, готовые пастельные палитры с HEX (весенняя, детская, нюдовая), сочетания и как не потерять контраст текста.2 мин чтения
- Цвета заката: палитра с HEX-кодами и CSS-градиентГотовые палитры заката с HEX-кодами: золотой час, морской закат, сумерки. Градиенты для CSS и советы, где использовать закатные цвета.2 мин чтения