Цвета для фона: Как подобрать лучшие цвета для сайта

Содержание

Как подобрать лучшие цвета для сайта

25 мая 2014 Интернет-маркетинг, Контент, Полезные советы, Продвижение сайтов

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

Выберите лучшие цвета для сайта, и ваши посылы обретут силу и ясность.

Вот основные значения в психологии цвета.

Первичные цвета:

красный – привлекает внимание;
желтый – несет бодрость и веселье, надежду и оптимизм;
синий – цвет честности и надежности.

Вторичные:

оранжевый – достижения, энергия, азарт, успех;
зеленый – отражает природу и чистоту, свежесть и здоровье;
фиолетовый – подчеркивает индивидуальность, творчество и изобретательность.

Третичные:

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

Если вы определились с лучшими цветами для сайта, то продумайте также цвет фона, текста, ссылок. Общие правила можно сформулировать так.

Используйте 2-3 цвета в оформлении сайта, не больше. Для усиления можно использовать оттенки основных цветов.

Белый фон обеспечит читаемость большинства цветов текста, кроме желтого и пастельного. Классика жанра – темный шрифт на белом фоне. Избыток ярких, бьющих по глазам, шрифтов не идет на пользу вашему сайту.
Темный фон тоже хорошо работает, если цвет текста очень яркий или белый.
Однако чтение большого объема мелкого текста на темном фоне затруднено. Нежелательно делать черный и другие темные цвета основным фоном сайта. Но можно использовать для отдельных элементов, например, кнопок меню.
Используйте контрастные цвета для кнопок, ссылок, мотиваторов. Красный цвет текста призывает к действиям и направляет. Зеленый помогает принять решение. Синий считается самым безопасным цветом, вызывает доверие.

Только не переборщите с контрастами. Все цветовые сочетания должны быть легкими для восприятия!

Чтобы успешно развивать бизнес, необходимо знать максимум о людях и компаниях, которые являются целевой аудиторией для ваших продуктов и услуг. Если вы знаете, как провести маркетинговое исследование самостоятельно, то сделайте это обязательно, или привлеките специалиста. Важно определить и понять цвета, которые привлекают именно вашу целевую аудиторию.

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

Детям нравятся более яркие и простые цвета, чем взрослым, подростки выбирают черный или сложные цвета. Мужчины предпочитают синий, а женщины – красный, желтый, оранжевый. Хорошо образованные люди любят третичные цвета с необычными названиями.

Люди в тропических странах выбирают яркие и теплые цвета. Те, кто живет в странах с более холодным климатом – холодные.

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

Красный – цвет удачи и празднования в Китае, но цвет траура в Южной Африке.
Желтый – священный и благоприятный в Китае и Индии, однако цвет траура в Египте.
Зеленый связан с богатством и престижем в Саудовской Аравии, но традиционно запрещен в Индонезии.
Голубой во всем мире считается цветом для новорожденных мальчиков, розовый – для девочек, а в Бельгии наоборот.

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

Психология – это не точная наука, поэтому можно подобрать несколько цветов, провести опрос или фокус-группу и посмотреть на какие из них будут лучше реагировать посетители.

/Автор статьи: Юлия Мураева/

В соцсети нас уже больше 20 тыс. Присоединяйтесь, чтобы получать советы по развитию бизнеса и полезные ссылки

* В случае упоминания в тексте социальных сетей Facebook, Instagram, уведомляем: деятельность компании Meta (Facebook, Instagram) признана экстремистской и на территории РФ запрещена.

Почему вы не должны использовать яркие и насыщенные цвета для фона сайта — Дизайн на vc.ru

Перевод подготовлен для сообщества Dui.

7314 просмотров

Источник uxmovement.

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

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

На какую колонку вы можете смотреть дольше?

Пример. Посмотрите внимательно на цвета в изображении сверху.

Левый столбец содержит цвета с максимальной яркостью и насыщенностью. Правый столбец содержит цвета с яркостью и насыщенностью равной 80%.

Ваше внимание к левому столбцу будет ниже, чем к правому, так как яркие цвета сильно давят на глаза.

Яркость против насыщенности

Яркость (Brightness) и насыщенность (Saturation) это разные цветовые свойства. Первое свойство означает, как много белого или чёрного смешивается с цветом. Второе свойство — какое количество серого содержится в цвете.

Увеличивая яркость — вы не снижаете насыщенность. Когда вы понижаете насыщенность, вы смешиваете цвет с оттенком серого. Когда вы повышаете яркость, то вы делаете цвет светлее, но не делаете его серым.

Сверху: увеличение яркости — больше белого. Снизу: уменьшение насыщенности — больше серого

Влияние цвета на внимание и возбуждение

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

Два других исследования — «Возбуждающий эффект цветовой насыщенности» и «Цвет и эмоции» показали, что насыщенные цвета связаны с наибольшим возбуждением. Оттенки (Hue) так же влияют на возбуждение, но насыщенность и яркость оказывают сильнейшее воздействие.

Используйте яркие и насыщенные цвета в кнопках

Яркие и насыщенные цвета привлекают внимание пользователя, но не задерживают его на себе долго. Использование таких цветов похоже на крик рядом с пользователем. Вы привлечёте их внимание лишь на некоторое время.

Поэтому вы должны использовать такие цвета только в элементах интерфейса, которые требуют действия от пользователя — например, кнопки. Эти цвета привлекут внимание пользователя к элементам управления и упростят их нахождение в нужный момент.

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

Используйте тёмный и менее насыщенный цвет для фона

Лучше делать цвет фона темнее и менее насыщенным. При затемнении цвета уменьшается содержание белого цвета. В то время как уменьшение насыщенности увеличивает количество серого цвета.

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

Слева: неприятно для глаз. Фон яркий и насыщенный. Максимальная яркость и насыщенность на изображении слева. Справа: приятно для глаз. Фон тёмный и менее насыщенный. Яркость и насыщенность ниже

Поиски оптимального цвета фона

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

Сначала выберите основной оттенок и установите на нём максимальную яркость и насыщенность. Значение оттенка сохраняется и служит контрольной точкой для регулирования яркости и насыщенности.

Продублируйте основной оттенок цвета (образец), что бы создать четыре новых образца цвета с пониженым уровнем насыщенности и яркости.

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

Поместите насыщенные образцы цвета слева от изначального оттенка с яркость и насыщенностью равной 100%. Справа разместите образцы цвета с минимальной и максимальной яркостью.

К сожалению, полученные цвета не рекомендуются для использования. Так как они до сих пор имеют 100% яркость или насыщенность. Поэтому они будут служить основой для поиска подходящих цветов.

Теперь создайте второй ряд образцов цвета. Уменьшите яркость и насыщенность относительно первого ряда цветов. При уменьшении значений используйте одно и то же значение для каждого набора образцов цвета.

В итоге ни один из цветов второго ряда не имеет 100% насыщенности и яркости. Значит, эти цвета наиболее подходящие для использования в работе.

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

Теперь у вас есть в общей сложности восемь оптимальных цветов с различными коэффициентами яркости и насыщенности.

Примеры хорошего и плохого цвета для использования в фоне сайта

Ниже приведены примеры страниц, которые приятны и неприятны для глаз. Обратите внимание, как долго вы можете смотреть на каждую из страниц в примерах.

Слева — плохой зелёный (Panic или Prismic). Справа — хороший зелёный (FreshDesk или Sigstr)

Слева — плохой красный (Telepath или Meat). Справа — хороший красный (AppFigures или Jackie)

Слева — плохой синий (Compose или DareIt). Справа — хороший синий (Republic или MailTag)

Эстетика и юзабилити

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

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

10 идеальных фоновых цветов для фотосъемки товаров

Покупателям нравятся не только бизнес-продукты, но и приятная общая визуальная презентация, привлекающая их внимание.

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

Источник изображения: www.anthropologie.com

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

Идеи фона для ваших фотографий продукта

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

1. Черный фон

Черный цвет в качестве фона обычно используется для предметов роскоши, таких как украшения, косметика и электроника. Он не только всегда привлекал внимание с первого взгляда, потому что имеет самые темные оттенки среди цветов, но и выделял продукт, делая каждую деталь хорошо заметной. В зависимости от продукта в качестве предмета, черный фон может подразумевать загадочность и стиль. 9№ 0003

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

2. Боке

Боке — это японское слово, которое буквально означает «размытие». В основном это не сфокусированные части изображения, которые были захвачены светосильным объективом камеры. Это эстетическое качество направляет наше внимание на определенную область изображения или продукта, что делает его визуально привлекательным. Это часто используемый метод для создания уникального фона для фотографии продукта.

Эффект боке обычно достигается с помощью источников света на заднем плане; и просто выделив аспект снимка продукта. Независимо от того, используете ли вы его в любом случае, боке способствует созданию отличного изображения продукта, которое приятно и обязательно привлечет внимание покупателя.

3. Контекстные фоны

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

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

4. Узоры

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

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

5. Нейтральные цвета

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

Источник изображения: www.lulus.com

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

6. Сплошные цвета

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

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

7. Текстуры

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

Источник изображения: www.jared.com

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

8. Плитка

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

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

9. Деревянные фоны

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

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

10. Белый

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

Источник изображения: www.tiffany.com

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

Белые призывают к превосходству, но добиться этого нетрудно. Есть много бесплатных инструментов для удаления фона, которые могут помочь вам в этом случае.

Психологическое влияние цвета на потребителей

Знаете ли вы, что цвет оказывает психологическое воздействие на поведение потребителей?

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

Значения цветов

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

Источник изображения: www.praxent.com

Теплые цвета

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

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

Желтый: Когда мы думаем о солнечном свете, мы связываем его с желтым цветом. Желтый — яркий и жизнерадостный цвет, который ассоциируется с надеждой. Он предлагает сложность, и поэтому его можно интерпретировать по-разному.

Прохладные цвета

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

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

Фиолетовый: Пурпурный цвет имеет богатую историю, связанную с богатством и королевской властью. Фиолетовый — редко используемый цвет, поэтому люди считают его загадочным и интригующим. Люди либо ненавидят, либо любят его, но другие находят его утешительным и полным мудрости.

Нейтральные

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

Белый: Поднятие белого флага призывает к миру. Белый, среди других цветов, приносит спокойствие и концентрацию. Это также признак чистоты и непорочности. Дизайнеры часто используют это для создания эффекта простора. 9№ 0003

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

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

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

Подводя итоги…

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

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

Ваша очередь…

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

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

Помощники по цвету | Bulma: Бесплатная современная CSS-инфраструктура с открытым исходным кодом на основе Flexbox

Помощники по цвету

Изменение цвета текста и/или фона

Цвет текста #

Вы можете установить любой элемент в один из 10 цветов или 9 оттенков серого :

Сорт	Цвет	Пример
`белый текст`	`hsl(0, 0%, 100%)`	Hello Bulma
`текст черный`	`hsl(0, 0%, 4%)`	Hello Bulma
`светлый текст`	`hsl(0, 0%, 96%)`	Hello Bulma
`имеет темный текст`	`hsl(0, 0%, 21%)`	Hello Bulma
`основной текст`	`hsl(171, 100%, 41%)`	Hello Bulma
`текстовая ссылка`	`hsl(217, 71%, 53%)`	Hello Bulma
`текстовая информация`	`hsl(204, 86%, 53%)`	Hello Bulma
`имеет-текст-успех`	`hsl(141, 71%, 48%)`	Hello Bulma
`текстовое предупреждение`	`hsl(48, 100%, 67%)`	Hello Bulma
`опасный текст`	`hsl(348, 100%, 61%)`	Привет Булма

Сорт	Оттенок	Пример
`имеет-текст-черный-бис`	`hsl(0, 0%, 7%)`	Hello Bulma
`черный текст`	`hsl(0, 0%, 14%)`	Hello Bulma
`текст серо-темнее`	`hsl(0, 0%, 21%)`	Hello Bulma
`текст серо-темный`	`hsl(0, 0%, 29%)`	Привет Булма
`серый текст`	`hsl(0, 0%, 48%)`	Hello Bulma
`серый текст`	`hsl(0, 0%, 71%)`	Hello Bulma
`серый текст с подсветкой`	`hsl(0, 0%, 86%)`	Hello Bulma
`белый текст`	`hsl(0, 0%, 96%)`	Привет Бульма
`имеет-текст-белый-бис`	`hsl(0, 0%, 98%)`	Привет Булма

С 0. 9.0

Вы можете использовать каждый цвет в своих светлых и темных версиях . Просто добавьте *-светлый или *-темный .

Сорт	Светлый/темный цвет	Пример
`основной свет`	`hsl(171, 100%, 96%)`	Hello Bulma
`свет с текстовой ссылкой`	`hsl(219, 70%, 96%)`	Hello Bulma
`имеет текстовый информационный свет`	`hsl(206, 70%, 96%)`	Hello Bulma
`has-text-success-light`	`hsl(142, 52%, 96%)`	Hello Bulma
`предупреждающий свет с текстом`	`hsl(48, 100%, 96%)`	Hello Bulma
`имеет текст опасности`	`hsl(347, 90%, 96%)`	Hello Bulma
`основной темный текст`	`hsl(171, 100%, 29%)`	Hello Bulma
`имеет текстовую ссылку темный`	`hsl(217, 71%, 45%)`	Hello Bulma
`has-text-info-dark`	`hsl(204, 71%, 39%)`	Hello Bulma
`has-text-success-dark`	`hsl(141, 53%, 31%)`	Hello Bulma
`текст с предупреждением о темноте`	`hsl(48, 100%, 29%)`	Привет Булма
`имеет-текст-опасность-темный`	`hsl(348, 86%, 43%)`	Привет Булма

Фоновый цвет #