Comments 24
А я заглядываю на colorscheme.ru и он мне дает вроде бы приемлемый набор оттенков, уж не знаю, замешивает по феншую или нет. Вот наборчик для цвета FB: colorscheme.ru/#3K11TlOszw0w0
У меня есть другое мнение на этот счёт: теория цвета бесполезна.Мне одному кажется, что сама статья в результате и приводит к теории цвета, только путём собственных исследований? :) А по сути — отлично!
Отличная статья) Поделитесь формулой, как высчитать цвет светлее (например на 20%) исходя из этого всего? Хочется SCSS функцию написать которая это будет делать.
lighten($color,25%)?
это стандартный способ, я имел ввиду – «сделать светлее» в контексте того, о чем рассказано в данной статье.
SCSS не использую, но, полагаю можно сделать как в одной из статей предлагалось:
habrahabr.ru/post/216839
@clr-base: hsl( 0, 100%, 50%);
@clr-header: spin(desaturate(darken(@clr-base, 2%), 10%), 8);
@clr-button: spin(lighten(@clr-base, 3%), 17);
@clr-link: spin(desaturate(darken(@clr-base, 2%), 10%), -30);
@clr-hover: spin(lighten(@clr-base, 3%), -60);
habrahabr.ru/post/216839
Давно это наблюдал, но не облекал в слова
Спасибо за статью, в закладки
Спасибо за статью, в закладки
Спасибо за статью!
Может кому то будет полезен еще такой вариант — использовать Color Tool в гайде по Material Design
Может кому то будет полезен еще такой вариант — использовать Color Tool в гайде по Material Design
Да, хороший ресурс. Есть ещё классная программа, Gpick, которая делает то же самое, но и гораздо больше. Не онлайн — минус, богатые возможности — плюс. Я сам создаю палитры новых дизайнов, начиная с неё.
«Cветимость» — это какой-то очень странный перевод, отсебятина.
Должно быть «светлота».
upd: википедия
В оригинале там использовано слово luminosity — и я не уверен, что корректно. По-моему, косячат оба — и автор, и переводчик.
Если не «светимость», то какой перевод вы бы предложили?
Это непростой вопрос. Я немного покопал источники и похоже получается, что формально перевод правильный — luminosity можно перевести как светимость. Но есть два «но».
1. В контексте колориметрии (в отличие от астрономической фотометрии) этот термин практически не используется, поскольку он завязан на физический поток излучения, а не человеческое восприятие. Есть luminosity function, которая на русский переводится длинно и неуклюже: «Спектральная световая эффективность монохроматического излучения» — ну то есть краткого термина просто нет.
2. Автор оригинала использовал слово luminosity неуместно. Судя по контексту, он скорее имел в виду lightness — светлоту.
Вообще, русский язык имеет проблемы к колориметрическими терминами — например, brightness и luminance обычно переводятся как «яркость», хотя изначально это разные термины. Но в русском не нашлось/не устоялось адекватной терминологии, поэтому всегда нужно внимательно смотреть на контекст.
Посмотрите (в порядке возрастания сложности):
— «Color FAQ» Чарльза Пойнтона;
— «Модели цветового восприятия» Марка Файрчайлда (есть русский перевод);
— «Color Science» Гюнтера Вышецкого.
1. В контексте колориметрии (в отличие от астрономической фотометрии) этот термин практически не используется, поскольку он завязан на физический поток излучения, а не человеческое восприятие. Есть luminosity function, которая на русский переводится длинно и неуклюже: «Спектральная световая эффективность монохроматического излучения» — ну то есть краткого термина просто нет.
2. Автор оригинала использовал слово luminosity неуместно. Судя по контексту, он скорее имел в виду lightness — светлоту.
Вообще, русский язык имеет проблемы к колориметрическими терминами — например, brightness и luminance обычно переводятся как «яркость», хотя изначально это разные термины. Но в русском не нашлось/не устоялось адекватной терминологии, поэтому всегда нужно внимательно смотреть на контекст.
Посмотрите (в порядке возрастания сложности):
— «Color FAQ» Чарльза Пойнтона;
— «Модели цветового восприятия» Марка Файрчайлда (есть русский перевод);
— «Color Science» Гюнтера Вышецкого.
Человек открыл для себя Tints & Shades… самоучке стоило бы посмотреть на что-то кроме Photoshop'a!
Статья очень плоха, хотя бы тем, что путает: «один цвет» у него это множество разных цветов, подобранных по самой простой гармонии.
Гармоничных сочетаний много, упомянутые «комплиментарные» — тоже очень простая гармония. Попробуйте любой бесплатный онлайн Color Wheel чтобы убедиться и поиграться с гармониями — от простого до более навороченного Adobe-овского или даже скачайте удобнейшую программу. Кстати, там есть и вот эти градации по яркости/насыщенности.
Но все подобранные по цветовому колесу гармонии довольно быстро начинают казаться слишком очевидными, и хочется чего-то более интересного. Для подбора интересных, но оригинальных давно разработаны алгоритмы преобразования фото-изображения в палитру.
Самые популярные — встроенный в Dribbble анализатор палитры и бесконечный источник вдохновения — ColourLovers.
Наслаждайтесь, и не тратьте время на очень примитивный велосипед.
Статья очень плоха, хотя бы тем, что путает: «один цвет» у него это множество разных цветов, подобранных по самой простой гармонии.
Гармоничных сочетаний много, упомянутые «комплиментарные» — тоже очень простая гармония. Попробуйте любой бесплатный онлайн Color Wheel чтобы убедиться и поиграться с гармониями — от простого до более навороченного Adobe-овского или даже скачайте удобнейшую программу. Кстати, там есть и вот эти градации по яркости/насыщенности.
Но все подобранные по цветовому колесу гармонии довольно быстро начинают казаться слишком очевидными, и хочется чего-то более интересного. Для подбора интересных, но оригинальных давно разработаны алгоритмы преобразования фото-изображения в палитру.
Самые популярные — встроенный в Dribbble анализатор палитры и бесконечный источник вдохновения — ColourLovers.
Наслаждайтесь, и не тратьте время на очень примитивный велосипед.
Собственно, в причина увеличения насыщенности в том что S в HSL/HSB и подобных — это процент от предельно-доступной насыщенности в sRGB. Если же смотреть насыщенность в модели CIECAM02, в которой шкалы обоснованы человеческим восприятием, то будет видно иную картину:
'hsb: 21*, 63%, 94%'
{ J: 62, C: 49, h: 49 }
'hsb: 16*, 79%, 49%'
{ J: 25, C: 45, h: 41 }Тут автор статьи поднял насыщенность для второго (темного варианта) цвета, но C — chroma — показывает, что воспринимаемая насыщенность все равно для второго цвета ниже, чем для первого. Те. насыщенности все ещё недостаточно.
'hsb: 194*, 47%, 77%'
{ J: 57, C: 36, h: 220 }
'hsb: 200*, 72%, 47%'
{ J: 26, C: 36, h: 234 }А вот здесь порядок, кстати другие величины: J — яркость, h — угол тона.
Прочитали? Воодушевились? Отлично. А теперь вспомните о своих бабушке\дедушке, да что там, можно даже просто о своих родителях и подумайте, каково будет им различить синюю кнопку на синем фоне с синим шрифтом. Да, именно так, без приставок светло-, темно- и пр.
Синее на синем с синими.
И теперь возвращайтесь в реальную жизнь с реальными пользователями и их реальными проблемами, далекими от дизайна :)
Синее на синем с синими.
И теперь возвращайтесь в реальную жизнь с реальными пользователями и их реальными проблемами, далекими от дизайна :)
Там наверху уже дали ссылку на гугловский Color Tool, в нем есть вкладка Accessibility, которая как раз показывает визуально и цифрами где ты накосячил при выборе цветов. Где-то написано «NOT LEGIBLE» — поздравляю, бабушка и дедушка тобой недовольны!
Работает, правда, только для черного и белого цвета шрифтов.
Работает, правда, только для черного и белого цвета шрифтов.
а я б просто разок еще всё прогнал всё через серый, выкрутив Saturation на 0. Если контраста достаточно и не сливается, то и с цветным вариантом проблем не должно быть
С тем же успехом: прочитали про фреймворк/язык/базу данных/паттерн/етц?
А пользователю на них ещё более похрен, чем на цвет иконки! На цвет иконки почти пофиг, а на фреймворк вообще пофиг.
Всё, закрываем Хабр.
А пользователю на них ещё более похрен, чем на цвет иконки! На цвет иконки почти пофиг, а на фреймворк вообще пофиг.
Всё, закрываем Хабр.
Господи, этот мужик шикарен, а топикстартер просто молодец что сделала перевод — большое спасибо ^_^
Sign up to leave a comment.
Цвет в дизайне интерфейсов: инструкция по применению