Все цвета RGB

Магия CSS. Глава 4. Цвет

Цвет не является цветом…

…для компьютеров

  • Цвета отображаются по разному в разных браузерах. Link.
  • На скриншоте не всегда будут те же цвета, что и на мониторе в момент снимка. Link.
  • В браузерах найдется ворох всевозможных проблем, связанных с цветопередачей. Link.

…и для человеческого глаза

  • Тип устройства (ноутбук, ПК, мобильный телефон)
  • Расстояние и угол зрения
  • Качество дисплея (количество цветов, которое он может отобразить, точность воспроизведения, доступный угол обзора, максимальный контраст и т.д.)
  • Условия освещения (внутри или снаружи, день или ночь, возле окна или нет и т.д.)
  • Зрение смотрящего (корректирующие линзы, нарушения зрения, дальтонизм)
  • Выбирайте цвет, подходящий для текста (и для фона текста)
  • Используйте прием имитации объекта, чтобы помочь людям опознать предмет из реального мира
  • Используйте контраст для увеличения читабельности (никто не может читать белый текст на бежевом фоне)
  • Применяйте паттерны (когда это необходимо) в качестве запасного варианта для людей с дальтонизмом (пример Trello)

Перспективы цвета

Инструменты цвета

Чувства

Брендинг

Ответ 1. Ответ 2. Ответ 3. Ответ 4.

Статус

Движение, внимание

Просто так

Цветовые схемы

  • Codrops: Build a Color Scheme: The Fundamentals — Отличный обзор разных типов цветовых комбинаций (монохромные, добавочные, триады, аналоговые).
  • Color Scheme Designer — Хороший инструмент для построения цветовых схем с разными типами комбинаций цветов.
  • Adobe Kuler: Color Wheel —Еще один инструмент для составления схем.

Какой цвет вы имели в виду?

Пример

Хороший цвет для текста

  • Резкий контраст черного цвета на белом может создавать визуальные артефакты и увеличить нагрузку на глаз. (Обратная ситуация тоже нежелательна. Это довольно субъективно, но все же помните об этом.)
  • Вы “припасаете” черный #000 для акцентов. (Это, пожалуй, более весомый аргумент.)
  1. При настройке цвета со значением альфа-канала от 0 до 1, в браузерах на движке WebKit свойство по умолчанию -webkit-font-smoothing: subpixel-antialiased больше не будет срабатывать и вы не добьетесь сглаживания. (Будто у этого текста установлено свойство -webkit-font-smoothing: antialiasedyourself.) Какой тип сглаживания “лучше” — субъективное мнение и зависит от контекста. Но с межпиксельным сглаживанием связаны и другие, более серьезные проблемы, о чем сигнализирует следующее: 1) WebKit на Mac с дисплеями retina не используют межпиксельное сглаживание (вполне вероятно, что не будут и следующие поколения дисплеев) и 2) Популярная блоггинговая платформа Medium.com (известна своей красивой типографикой) использует -webkit-font-smoothing: antialiased во всех документах.
  2. Внешний вид может слегка отличаться. Помните, что теперь вы просите браузер компоновать текст с тем, что позади него. Это может выглядеть неплохо в WebKit, но я не надеялся бы на одинаково хороший результат везде.

Заключение

Несколько сайтов со смелым выбором цветов

Внеклассное чтение

Цитирование

  1. Joco: All RGB colors in one image
  2. StackOverflow: Chrome renders colours differently from Safari and Firefox
  3. Apple Support Communities: Why is a Screenshot a different color when dropped back in to iWeb in Safari
  4. Chromium Issues: Inaccurate color profile rendering in Chrome for Mac
  5. Little Big Details: Trello — Color Blind Friendly Mode makes labels distinguishable by pattern.
  6. NPR: Edward Tufte Wants You to See Better
  7. ColorSchemer (via Archive.org): Why food companies use red colors
  8. Bootstrap
  9. Bootstrap: CSS Helper Classes
  10. Codrops: Build a Color Scheme: The Fundamentals
  11. Color Scheme Designer
  12. Adobe Kuler: Color Wheel
  13. Fonts In Use: Medium

--

--

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Workafrolic (±∞)

Workafrolic (±∞)

3.6K Followers

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC