Почти никто не набирает «цветной текст». Набирают синий текст, или розовый, или красный. Цвет здесь не настройка, которую поправят потом: это то, за чем человек пришёл, и за ним обычно стоит причина, которую он сам не смог бы толком назвать.

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

Цвет сам по себе не читается. Цвет на фоне читается.

Те же четыре слова на двух панелях: на белой слово БЕЛЫЙ исчезло полностью, а ЖЁЛТЫЙ едва держится, тогда как СИНИЙ и КРАСНЫЙ остаются чёткими; на чёрной панели читаются все четыре, включая БЕЛЫЙ

Посмотрите на верхнюю панель. Слово БЕЛЫЙ там есть. Оно набрано ровно тем же кеглем и той же насыщенностью, что и остальные, и оно невидимо, потому что белое на белом не даёт вообще ничего. Жёлтому чуть легче, но ненамного.

На этом построена почти любая нечитаемая вёрстка: цвет выбирают сам по себе, в пипетке, на том фоне, который эта пипетка случайно показывает. Собственной читаемости у цвета нет. У него есть только отношение с тем, что лежит сзади, и вся игра идёт там.

Отсюда практическое правило: сначала решите, каким будет фон. Потом берите цвет, которому есть куда деться на этом фоне. Жёлтый великолепен на чёрном и безнадёжен на белом, у белого всё наоборот. В самом цвете не изменилось ничего, изменилось только то, что снизу.

1. Синий

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

Слово СИНИЙ синими заглавными буквами с мягким голубым свечением по всему контуру, на чёрном фоне: тёмная заливка держится только за счёт ореола

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

2. Розовый

Розовый давно не просто «для девочек» и не был им уже лет десять. Он читается как тепло, игра и уверенность, и стал цветом по умолчанию в бьюти, музыке и всём, что адресовано молодой аудитории.

Слово РОЗОВЫЙ жирными розовыми заглавными с засечками, белой вырубной каймой и тёмно-розовой тенью, на розово-персиковом градиенте

Это один из самых лёгких цветов в работе, потому что он держится и на светлом, и на тёмном. Ловушка здесь обратная: розовое на розовом, а именно так и выходит, когда фон берут с той же доски настроения, что и текст.

3. Красный

Самый громкий цвет, какой есть. Красный означает «стоп», распродажу, тревогу, любовь и аппетит разом, а читатель выбирает то значение, которое подсказывает контекст. Он выступает вперёд сильнее любого другого: красное слово выглядит физически ближе, чем синее того же размера.

Слово КРАСНЫЙ жирными красными заглавными с ярким серебристым краем и мягкой тенью, на сплошном чёрном фоне: буквы выглядят объёмными и выступают вперёд

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

4. Зелёный

Природа, деньги, здоровье и разрешающий сигнал. Зелёный единственный несёт сильное «да», поэтому кнопка подтверждения во всём мире зелёная, и он спокойно живёт в середине диапазона между светлым и тёмным.

Слово ЗЕЛЁНЫЙ яркими зелёными заглавными с более тёмным контуром и лёгкой текстурой, в стиле видеоигры, на светло-сером фоне

Следите за оттенком. Жёлто-зелёный читается как свежий и весёлый, сине-зелёный как медицинский и дорогой. Название цвета одно, сообщения два совершенно разных.

5. Жёлтый

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

Слово ЖЁЛТЫЙ золотисто-жёлтыми заглавными с белым резом и тёмно-синим контуром, на тёплом жёлтом фоне: именно край отделяет буквы от близкого по светлоте фона

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

6. Оранжевый

Тепло без агрессии красного. Оранжевый читается как дружелюбный, энергичный и слегка дешёвый, в том смысле, в каком дешёва табличка «скидки», и это цвет осени, спорта и еды.

Слово ОРАНЖЕВЫЙ оранжевыми заглавными с белым контуром и объёмной гранью, на оранжевом фоне с расходящимися лучами

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

7. Белый

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

Слово БЕЛЫЙ крупными белыми заглавными антиквы с выраженными засечками и тонкими соединительными штрихами, на совершенно чёрной панели

Правило у него простое и абсолютное: белому нужно что-то тёмное сзади. На светлой фотографии он исчезает начисто, и никакая тень его не спасёт. Двигайте текст, затемняйте фото или меняйте цвет.

8. Много цветов сразу

Один цвет на букву, радужная обработка. Читается как весело, по-детски и празднично, и именно это большинство и имеет в виду, когда набирает «цветной текст».

Слово ЦВЕТНОЙ заглавными с засечками, где каждая буква своего цвета: синяя, фиолетовая, розовая, оранжевая, жёлтая, снова синяя и фиолетовая, на белом фоне

Он ещё и стоит вам читаемости, причём дороже, чем принято думать. Это заслуживает отдельной демонстрации, она ниже.

Все восемь, каждый написан своим цветом

Восемь эффектов, каждое слово написано своим цветом: СИНИЙ со свечением, РОЗОВЫЙ с белой каймой, КРАСНЫЙ с серебряным краем, ЗЕЛЁНЫЙ в игровом стиле, ЖЁЛТЫЙ с белым резом, ОРАНЖЕВЫЙ на лучах, БЕЛЫЙ антиквой и ЦВЕТНОЙ по цвету на букву

Трёх цветов в этом списке нет, потому что у каждого уже есть свой гид: золотые текстовые эффекты, фиолетовые текстовые эффекты и неоновые шрифты. Про серебро и хром смотрите металлические шрифты.

Что говорит каждый цвет ещё до чтения

Восемь цветов, разобранных на три группы: тёплые КРАСНЫЙ, ОРАНЖЕВЫЙ и ЖЁЛТЫЙ, которые выступают вперёд, холодные СИНИЙ и ЗЕЛЁНЫЙ, которые отступают назад, и мягкие РОЗОВЫЙ и БЕЛЫЙ

Цвет прочитывают раньше слова. К тому моменту, когда ваши буквы расшифровали, человеку уже сообщили, срочное это или спокойное, дешёвое или дорогое, для детей или для взрослых. Отказаться от этого сообщения нельзя, поэтому его стоит выбирать осознанно.

Тёплые выступают вперёд и требуют внимания. Холодные отходят назад и дают читателю выдохнуть. Мягкие говорят о нежности и празднике. Ничто из этого не правило, которому обязаны подчиняться, но если вы его нарушаете, нарушайте сознательно.

Сколько цветов, пока слово ещё читается

Одно и то же слово ЦВЕТНОЙ трижды на тёмной панели: в одном цвете, где оно читается мгновенно, в трёх, где оно ещё держится вместе, и в семи, где глаз начинает читать отдельные буквы вместо слова

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

На праздничной растяжке это нормально, там никто никуда не спешит, и это смертельно для превью, где у вас меньше секунды. Радуга работает как украшение, а не как способ писать.

Выбор в три шага

  1. Смотрите на фон раньше, чем на цвет. Светлый или тёмный сразу отсекает половину вариантов. Жёлтый и белый живут по разные стороны этой границы.
  2. Выбирайте под сообщение, а не под доску настроения. Красный говорит «срочно», синий «спокойно», зелёный «можно». Если цвет и сообщение спорят, побеждает цвет, потому что приходит первым.
  3. Дайте яркому цвету край, если фон непростой. Жёлтому, оранжевому и белому нужна граница, как только вместо ровной плашки под ними оказывается фотография.

Все эффекты здесь бесплатны и не требуют регистрации. Откройте TextStudio и напишите свои слова любым из этих цветов.

Вопросы, которые задают

Какой цвет текста самый читаемый? Без фона ответа не существует. Две самые читаемые пары: чёрное на белом и белое на чёрном. Жёлтое на чёрном идёт следом, а жёлтое на белом входит в число худших сочетаний.

Каким цветом делать заголовок? Тем, который контрастирует с тем, что сзади, и только потом тем, который совпадает с вашим сообщением. Именно в таком порядке. Заголовок, попавший в настроение, но нечитаемый, провалил единственную свою задачу.

Можно ли раскрасить одно слово в несколько цветов? Да, и примерно до трёх оно остаётся читаемым. Дальше вы уже украшаете, а не пишете, и это верный выбор для праздничной растяжки и неверный для всего, что нужно прочесть быстро.

Почему мой цветной текст выглядит тускло? Обычно потому, что цвет и фон слишком близки по светлоте. Два цвета могут выглядеть совершенно разными и при этом иметь почти одинаковую яркость, а буквы выделяет именно яркость, а не тон.

Нужно ли знать hex-код? Нет. В каждом эффекте здесь цвет уже подобран и сбалансирован со своим контуром и тенью. Взять готовый эффект быстрее, чем крутить значение, и обычно лучше.