calcal.ru
Комплексный инструмент для работы с цветом

Калькулятор теории цвета

Цветовые гармонии, конвертер форматов, генератор палитр, смешивание цветов, симулятор дальтонизма и анализ цветовой температуры -- все в одном инструменте.

16.7M+
Цветов RGB
Полный 24-битный диапазон
6
Инструментов
Гармония, конвертер, палитры и др.
5
Форматов
HEX, RGB, HSL, HSV, CMYK
3
Типа дальтонизма
Протанопия, дейтеранопия, тританопия

Что такое теория цвета

Теория цвета -- это система принципов и правил, описывающих взаимодействие цветов, их восприятие человеком и эффективное использование в дизайне, искусстве и коммуникации. Она объединяет физику света, биологию зрения и психологию восприятия.

🎨

Цветовой круг (Color Wheel)

Основа теории цвета, предложенная Иттеном. 12 цветов расположены по кругу: 3 первичных (красный, желтый, синий), 3 вторичных и 6 третичных. Геометрические фигуры на круге определяют гармоничные сочетания.

📊

Цветовые модели

RGB (экраны), CMYK (печать), HSL/HSV (дизайн) -- разные способы описать один и тот же цвет. Каждая модель удобна для своих задач: RGB для веба, CMYK для полиграфии, HSL для интуитивного подбора оттенков.

🧠

Психология цвета

Каждый цвет вызывает определенные эмоции и ассоциации. Красный -- энергия и страсть, синий -- доверие и покой, зеленый -- природа и рост. Понимание этих связей критично для брендинга и UX-дизайна.

Возможности калькулятора

Шесть профессиональных инструментов для полного контроля над цветом в ваших проектах.

🌈

Цветовые гармонии

Комплементарная, аналогичная, триадная, расщепленная комплементарная и тетрадная схемы. Визуализация на цветовом круге с автоматическим расчетом.

🔄

Конвертер форматов

Мгновенное преобразование между HEX, RGB, HSL, HSV и CMYK. Живой предпросмотр и готовый CSS-код для копирования.

🎨

Генератор палитр

Монохроматические палитры, затемнения (shades), осветления (tints) и тона (tones) из любого базового цвета с настройкой количества шагов.

🧪

Смешивание цветов

Субтрактивное (как краски) и аддитивное (как свет) смешивание двух цветов с регулируемой пропорцией и визуализацией градиента.

👁

Симулятор дальтонизма

Проверка доступности цвета при протанопии, дейтеранопии и тританопии. Тестирование палитры из 8 цветов для проверки различимости.

🌡

Цветовая температура

Шкала Кельвина для освещения, классификация теплых и холодных цветов, гид по эмоциональным ассоциациям для брендинга и UX.

Цветовые гармонии/ подробное руководство

Цветовая гармония -- это принцип сочетания цветов, при котором они создают приятное для глаза визуальное впечатление. Все основные схемы основаны на геометрических фигурах, вписанных в цветовой круг.

Комплементарная (дополнительная)

Два цвета, расположенных напротив друг друга на цветовом круге (разница 180°). Создает максимальный контраст и визуальное напряжение. Идеально для привлечения внимания к CTA-элементам. Примеры: синий + оранжевый, красный + зеленый, фиолетовый + желтый.

Аналогичная

Три цвета, расположенных рядом на цветовом круге (±30°). Самая естественная и спокойная схема, часто встречающаяся в природе (осенние листья, закат). Один цвет доминирует, второй поддерживает, третий акцентирует.

Триадная

Три цвета, равномерно расположенных по кругу (120° друг от друга). Яркая, динамичная палитра с хорошим балансом. Рекомендуется использовать один доминирующий цвет и два акцентных в меньших пропорциях (60-30-10).

Расщепленная комплементарная

Базовый цвет + два соседних к его комплементарному (±30° от 180°). Сохраняет контраст комплементарной схемы, но мягче и легче в применении. Популярна в веб-дизайне для создания визуально интересных, но не перегруженных интерфейсов.

Правило 60-30-10: Основной цвет занимает 60% площади, дополнительный -- 30%, акцентный -- 10%. Это создает визуальный баланс и иерархию.

Совет: начните с монохроматической палитры для фона и текста, затем добавьте один акцентный цвет из комплементарной или триадной схемы для интерактивных элементов.

Практические советы по работе с цветом

Рекомендации от профессиональных дизайнеров для создания гармоничных и доступных цветовых решений.

1Начните с ограничений

Не используйте более 3-5 цветов в одном дизайне. Выберите один основной, один акцентный и 2-3 нейтральных (серые, белый, черный). Это создаст чистый, профессиональный вид без хаоса.

2Учитывайте доступность (a11y)

Контрастность текста должна соответствовать WCAG AA (минимум 4.5:1 для обычного текста, 3:1 для крупного). Не передавайте информацию только цветом -- используйте иконки, подписи, паттерны для пользователей с дальтонизмом.

3Тестируйте на реальных устройствах

Цвета выглядят по-разному на IPS, OLED и TN матрицах. Яркие оттенки могут «выгорать» на дешевых мониторах. Всегда проверяйте дизайн на смартфоне, ноутбуке и внешнем мониторе перед финализацией.

4Используйте HSL для подбора

Модель HSL интуитивнее RGB: меняя H (оттенок), вы перемещаетесь по спектру; S (насыщенность) делает цвет ярче или приглушеннее; L (яркость) -- светлее или темнее. Это позволяет быстро создавать варианты одного цвета.

5Учитывайте контекст

Один и тот же цвет воспринимается по-разному в зависимости от окружения (эффект одновременного контраста). Серый квадрат на белом фоне кажется темнее, чем на черном. Всегда проверяйте цвет в контексте всего макета.

6Создайте дизайн-токены

Определите семантические имена для цветов (primary, secondary, success, error, warning) вместо прямых значений. Это упростит поддержку темной темы, ребрендинг и обеспечит консистентность во всем продукте.

Как пользоваться калькулятором

Пошаговая инструкция для максимально эффективной работы с инструментами теории цвета.

1

Выберите инструмент

Переключайтесь между 6 вкладками: Гармония, Конвертер, Палитры, Смешивание, Дальтонизм и Температура. Каждая вкладка -- самостоятельный инструмент.

2

Задайте базовый цвет

Используйте цветовой пикер или введите HEX-код вручную. Все расчеты обновляются мгновенно при изменении входных данных.

3

Изучите результаты

Нажмите на любой цвет в палитре, чтобы скопировать его HEX-код в буфер обмена. Используйте готовые CSS-значения в своих проектах.

Часто задаваемые вопросы

Цветовая гармония -- это сочетание цветов, которое воспринимается как приятное и сбалансированное. Основные схемы гармоний определяются геометрическими фигурами на цветовом круге: комплементарная (180°), аналогичная (±30°), триадная (120°), расщепленная комплементарная и тетрадная (прямоугольник). Наш калькулятор автоматически рассчитывает все пять схем из любого базового цвета.
RGB (Red, Green, Blue) -- аддитивная модель для экранов, каждый канал от 0 до 255. HSL (Hue, Saturation, Lightness) -- описывает цвет через оттенок, насыщенность и яркость, удобна для подбора палитр. HSV (Hue, Saturation, Value) -- похожа на HSL, но используется в графических редакторах (Photoshop, Illustrator). CMYK (Cyan, Magenta, Yellow, Key/Black) -- субтрактивная модель для печати. HEX -- шестнадцатеричная запись RGB, стандарт в CSS.
Субтрактивное смешивание (как краски) -- линейная интерполяция в RGB-пространстве. При 50/50 результат -- среднее арифметическое каналов. Аддитивное смешивание (как свет) использует формулу screen blending: результат всегда светлее исходных цветов. В реальном мире краски смешиваются субтрактивно (поглощают свет), а световые лучи -- аддитивно (складывают яркость).
Дальтонизм -- нарушение цветовосприятия, затрагивающее ~8% мужчин и ~0.5% женщин. Протанопия -- слабое восприятие красного, дейтеранопия -- зеленого (самый частый тип), тританопия -- синего (редкий). Наш симулятор показывает, как ваши цвета выглядят для людей с каждым типом. Главное правило: не полагайтесь только на цвет для передачи информации.
Цветовая температура описывает оттенок света, испускаемого абсолютно черным телом при нагреве. Измеряется в Кельвинах (K). Свеча -- ~1800K (теплый оранжевый), лампа накаливания -- ~2700K, дневной свет -- ~5500K, облачное небо -- ~6500K, синее небо -- ~10000K. Более низкие значения -- теплые (оранжевые) тона, высокие -- холодные (голубые).
Начните с определения цели: корпоративный сайт лучше смотрится с аналогичной или монохроматической палитрой, а промо-лендинг -- с комплементарной или триадной для привлечения внимания. Используйте правило 60-30-10: 60% основной цвет, 30% вторичный, 10% акцентный. Обязательно проверьте контрастность (WCAG) и доступность при дальтонизме.
Да. Кликните на любой цвет -- его HEX-код копируется в буфер обмена. Вкладка 'Конвертер' показывает цвет во всех форматах: HEX для CSS/HTML, RGB для программирования, HSL для CSS3, HSV для Photoshop/Illustrator, CMYK для подготовки к печати. Все значения можно вставить напрямую в ваш инструмент.
HSL и HSV оба описывают цвет через оттенок (H), но по-разному работают с яркостью. В HSL максимальная яркость (L=100%) всегда дает белый, а в HSV максимальное значение (V=100%) дает чистый цвет максимальной яркости. HSL более интуитивна для веб-дизайна и поддерживается в CSS (hsl()), а HSV используется в графических редакторах (Photoshop Color Picker).
Монохроматическая палитра использует один оттенок (Hue) с вариациями по яркости и насыщенности. В нашем калькуляторе на вкладке 'Палитры' вы получите 4 типа: монохроматическая (разная яркость), shades (добавление черного), tints (добавление белого) и tones (добавление серого). Количество шагов настраивается от 3 до 15.
Наш конвертер дает математически точный результат перевода RGB -> CMYK, но на практике печатные цвета могут отличаться из-за профиля принтера, типа бумаги и чернил. Для профессиональной полиграфии рекомендуется использовать ICC-профили. Как правило, яркие RGB-цвета (особенно неоновые) не имеют точного эквивалента в CMYK.
Лиана Арифметова
Создатель

Лиана Арифметова

Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».

Был ли этот калькулятор полезен?

⚖️

Отказ от ответственности

Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.

Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.

Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.

Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.

Похожие инструменты

🏥

Калькулятор NIHSS (инсульт)

Оценка тяжести ишемического инсульта по 11 категориям. Баллы от 0 до 42. Критерий для тромболизиса. Для неврологов.

🏠

Калькулятор объёмного веса (Dimensional Weight)

Рассчитайте объемный вес груза для отправки (DHL, FedEx, UPS). Сравнение с фактическим весом, расчет стоимости доставки.

💻

Diff-инструмент для сравнения текстов

Сравнение двух текстов с подсветкой различий. Построчный и пословный diff, режимы отображения side-by-side и unified.

🏥

Калькулятор иммунологии

Титр антител, анализ ELISA, субпопуляции лимфоцитов CD4/CD8, эффективность вакцин, комплемент CH50, цитокины.

💻

ETL Калькулятор: тайминг, ресурсы, Incremental vs Full, SLA, ошибки

Комплексный калькулятор ETL (Extract-Transform-Load). Оценка времени извлечения, трансформации и загрузки, подбор CPU/RAM/диска, сравнение Incremental и Full Load, расчёт SLA, анализ ошибок и Dead Letter Queue.

💰

Калькулятор компенсации при увольнении

Расчёт компенсации за неиспользованный отпуск и выходного пособия при увольнении.

💻

Калькулятор размера Docker-образа

Оценка размера Docker-образа по базовому образу и зависимостям. Сравнение base images, советы по оптимизации и multi-stage сборке.

🧮

Калькулятор себестоимости изделия

Расчёт себестоимости: материалы, работа, накладные расходы. Наценка, маржа, рекомендуемая цена.

🏥

Калькулятор QTc (коррекция интервала QT)

Рассчитайте корригированный интервал QT (QTc) по формулам Базетта, Фредерика, Фрамингема и Ходжеса. Оценка риска аритмии.

⚗️

Калькулятор электрохимии

Расчёты по уравнению Нернста, законам Фарадея, ЭДС гальванического элемента, электролиз и электроосаждение.

🏗️

Калькулятор потолочного плинтуса

Расчёт погонных метров потолочного плинтуса (галтели), углов и клея. Пенопласт, полиуретан, ПВХ, гипс, дерево.

🏠

Калькулятор стоимости владения автомобилем (TCO)

Рассчитайте полную стоимость содержания автомобиля: топливо, ОСАГО, КАСКО, транспортный налог, ТО, шины, парковка, мойка, амортизация. Итого за месяц, год и за 1 км.

💻

Калькулятор BI Dashboard: производительность, лицензии, KPI, adoption

Комплексный калькулятор BI-дашбордов. Производительность (виджеты, время загрузки, concurrent users), расписание обновления данных, сравнение стоимости Power BI/Tableau/DataLens/Metabase/Superset, подбор виджетов, KPI framework, метрики внедрения DAU/MAU.

🧮

Калькулятор скейтбординга: подбор деки, калории, экипировка

Калькулятор для скейтбордистов. Подбор ширины деки, калории, выбор колёс и подвесок, стоимость комплекта в России.

📐

Калькулятор комбинаторики

Перестановки P(n), сочетания C(n,k), размещения A(n,k) и вариации с повторениями. Факториал, биномиальные коэффициенты.