Из-за чего тёмно-серый светлее чем серый в CSS

Автор оригинала: Casper Beyer
  • Перевод


Вы, наверное, никогда не обращали внимания на такую мелочь, но в вашем браузере есть заранее определённые цвета, которые являются не тем, чем кажутся. Если бы я сказал вам, что названия образцов выше это LightGray, Gray и DarkGray, какому бы из цветов вы сопоставили каждое название?



Признаю, это был вопрос с подвохом, но почему всё-таки тёмно-серый это более светлый оттенок просто серого?


Всё сводится к небольшой исторической неурядице. Первые версии Mosaic и Netscape Navigator были X Applications, то есть они использовали систему X Window System в UNIX, которая определяет набор нормализованных имен цветов, унаследованный браузерами.


Позже, когда World Wide Web Consortium (W3C) перешел к стандартизации, он поглотил набор цветов X11, но не обошлось без конфликтов с тем, чего хотела спецификация.


В HTML цвет «Gray» был зарезервирован для триплета 128 (50% оттенок серого), в то время как X11 определял «Gray» как оттенок серого примерно в 75%, что означало, что, так как имя уже занято, «Gray» стал 50% серым, отбросив изначальное значение X11.


С другой стороны, цвет «DarkGray» никто не трогал, поскольку его на тот момент не существовало в HTML или CSS, а значит, он был перенесён без изменений из X11, где определен как 66% оттенок серого.


В конечном итоге, объединенный список цветов CSS, который сегодня преобладает в интернете, отображает «DarkGray» заметно светлее, чем «Gray», потому что «DarkGray» пришел из X11, а «Gray» пришел из HTML.


Даже сегодня в последней версии CSS цвет «DarkGray» это более светлый оттенок, чем «Gray», а ещё, как результат трудностей именования, как «Grey», так и «Gray» являются валидными именами.

Поддержать автора
Поделиться публикацией

Комментарии 61

    +13
    Для тех кто прочитал статью, прочитал оригинал, и все равно нихрена не понял как я:
    66% оттенок серого = серый, который имеет компоненты по 66% от 256, т.е. светлее чем «среднесерый» на 41.

    в общем, понимание пришло только после просмотра таблички
    www.w3schools.com/colors/colors_shades.asp
    (очень надеюсь что всем все и так было понятно, и мой коммент — лишний).
      +1
      Хм… Когда говорят про «процентный серый», я то как раз первым делом экспоненту яркости вспоминаю, а не проценты от 2^8 градаций.
      Ну это из той же оперы что и фотографический «18% серый» (среднесерый по факту) и «фотошоповские плашки» — 10%, 15%…
      –30
      Интересное наблюдение, можно добавить в список «неудобных» вопросов на собеседовании.
        +45
        Какие именно качества/знания кандидата вы собираетесь определить этим вопросом?
          +20
          видимо оратор выше подразумевает, что таким вопросом можно валить неугодных/непонравившихся кандидатов на собеседовании, а не определять уровень компетенции.
            –14
            Да, именно это и подразумевалось. Но к сожалению такие вопросы зачастую включены в обычное собеседования…
              +3
              А почему нельзя просто сказать «я вынужден на этом этапе прекратить собеседование, вы мне не подходите по <список объективных причин> и <список личных претензий>»?
                +1
                Потому что это не законно, и не только в Штатах, но и В России.
                  +2
                  Если человек не соответствует требованиям, то что в этом незаконного? Хотя если эти требования нигде не формализованы, то да, приходится выкручиваться.
                    –4
                    Ну <список личных претензий> это явная дискриминация, кроме того работа подразумевает деловые отношение, а не личные.

                    С объективными тут тоже может быть интересно, например, кандидат не в зуб ногой, но у него есть диплом об профильном ВО (настоящий, не поддельный). Отказывая по объективным причинам вы ставите под сомненье работу ВУЗа, который выдает таким «ребятам» дипломы, фактически вы сомневаетесь в способностях государства проверять качество выпускников ВУЗов, этож почти гос. измена xD.
                      +3
                      По такой логике любое недовольство чем угодно — гос. измена.
                        +12
                        Вы начинаете что-то понимать.
                          +2
                          Именно по такой логике сейчас законы и принимают…
                          0
                          работа подразумевает деловые отношение, а не личные.


                          Вот ни разу с вами не соглашусь. Если человек, скажем так, «чудак» то работать с ним будет невозможно вне зависимости от его профессиональных качеств. И следовательно нахрен такой работник нужен?
                            0
                            Вы конечно можете не соглашаться, но юридически вы будете не правы.

                            Отказывая человеку в работе на основании его личных, а не профессиональных качеств вы нарушаете его право на труд.

                            ТК РФ Статья 64. Гарантии при заключении трудового договора
                            Запрещается необоснованный отказ в заключении трудового договора.
                            Какое бы то ни было прямое или косвенное ограничение прав или установление прямых или косвенных преимуществ при заключении трудового договора в зависимости от пола, расы, цвета кожи, национальности, языка, происхождения, имущественного, семейного, социального и должностного положения, возраста, места жительства (в том числе наличия или отсутствия регистрации по месту жительства или пребывания), отношения к религии, убеждений, принадлежности или непринадлежности к общественным объединениям или каким-либо социальным группам, а также других обстоятельств, не связанных с деловыми качествами работников, не допускается, за исключением случаев, в которых право или обязанность устанавливать такие ограничения или преимущества предусмотрены федеральными законами.


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

                              У меня есть хороший пример: я собеседовал человека в свою команду, по профессиональным навыкам он подходил, но его манера общения была ужасной (слишком высокомерный, на понтах).
                              По ТК выходит, что я должен его взять и повышать токсичность в команде, которая отрицательно скажется на производительности труда всей команды.
                                +1
                                ТК наполовину из таких отвлеченных от реальности законов состоит. Чего только стоит невозможность уволить беременную, даже если она ходит на работу только чтобы саботировать рабочие процессы.


                                Вот как раз этот пример и показывает, то что эти законы совершенно не отвлеченные — без них работники останутся совсем без соц. защиты.

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

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

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

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

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

                                    К стати, а имеет-ли право компания требовать от соискателя, например, умения работать в команде? Если да, то озвученные выше личностные качества можно трактовать как не соответствие этому пункту требований.


                                    Здесь основная трудность, это определить формальные требования. Например, давайте вывернем ситуацию наизнанку, пусть человек из этого приятного коллектива, весь такой командный, приходит на рабочее место, а там одни токсичные чудаки. Тут окажется, что о как раз не умеет работать в команде. Так что показатель это очень ситуативный.
                        0
                        и не только в Штатах
                        В Штатах формальные причины для отказа принимать на работу как раз-таки не нужны.
                          0
                          Ну тут речь не про формальные, а про личные. Если вы на собеседовании заявите, что не берете сотрудника потому что она беременная негритянка-феменистка и вам такие здесь не нужны, то сами рискуете остаться без работы.
                            0
                            Зависит от штата.
                    +8
                    Этот вопрос покажет будет ли кандидат читать хабр в рабочее время </joke>
                    +8

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

                      –5

                      Надеюсь это сарказм? image

                        0
                        видимо оратор выше подразумевает, что таким вопросом можно валить неугодных/непонравившихся кандидатов на собеседовании, а не определять уровень компетенции.
                      0
                      Прикольно, что сейчас попалась эта статья. Создавал веб-сайты с 2001. Но только буквально пару недель назад заметил этот прикол с DarkGray в CSS. Думал глюк какой то, переписал на HEX (мне так и привычней, и запись короче). И вот сразу статья. :)
                        0

                        Надо было Gray50, Gray66 и Gray75 назвать, тогда проблемы бы не было :)

                          0
                          А 50, 66 и 75 — это проценты или [0..255]? Неочевидно.
                            +1

                            Для определения того, какой из двух данных цветов светлее, это и не важно )

                              +18
                              Ну чтобы жизнь медом не казалась, Gray50 можно сделать как 50%, а Gray66 как rgb(66,66,66) :)
                                0
                                Более того, в результате слияний что-нибудь подобное наверняка бы и получилось…
                              0
                              Уже даже в Android переходят к цветам как float от [0, 100[. В современных мониторах мощность белого колеблется от 0 до 10К нит, все остальные цвета относительны от белого.
                            +4
                            Кстати, кто-то вообще использует встроенные цвета (кроме black и white, разве что)? Частенько изучаю devtools-ом разные сайты (иногда находятся интересные решения), и практически всегда вижу только HEX цвета.
                              –2
                              tomato!
                              0

                              Логично, в фотошопе то этих названий нет. А откуда берёт цвета верстальщик? Правильно, из того самого макета в фотошопе.

                                +1
                                +. Есть к тому же сомнения, что у разных браузеров отличаются цвета или их нет вовсе (ну может быть)
                                  0

                                  Ну как-то я по приколу сделал страницу, свёрстанную в именных цветах, причём недокументированных, которые находил словарным перебором. Сейчас вспомню только цвет "fuck"

                                    +1

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

                                  0
                                  HSL же удобнее.
                                    0

                                    Я использую (red, blue, green, silver) с целью подсветить блок, чтобы понять сколько он физически занимает. Удобно, когда делаешь сетку или любую другую подобного пошиба разметку.

                                      0
                                      А, это да. Я всегда использую red (как самое короткое название) чтобы быстро получить цвет, ткнуть по нему, и получить пипетку в Chrome Devtools.
                                    +8
                                    Удивительно, как автор и переводчик удержались от каламбуров про 50 оттенков в заголовке. Я бы не смог.
                                      +15

                                      Я за них: 50 процентов серого

                                        +3

                                        Настоящий программист знает, что их 256!

                                          +4
                                          254. Два из них — белый и чёрный.
                                            0
                                            252. Ещё светло-чёрный и тёмно-белый.
                                              0
                                              А это не оттенки серого?
                                          0
                                          Есть еще три цвета: Grey, LightGrey, DarkGrey.
                                            0
                                            О эти названия, помню попался как то NavajoWhite с кодом #FFDEAD, тоже из X11. И который на самом деле ничуть не белый, а скорее что то между жёлтым и оранжевым.
                                            +1
                                            Интересная статья, но я не видел профессиональных фронтенд-разработчиков, которые пользовались бы именованными цветами. Шестнадцатеричная нотация гораздо нагляднее и прозрачнее.
                                              –3
                                              Бывает, использую в вебмордах на всяких еспшках — байты экономятся =)
                                                0
                                                Я бы не назвал шестнадцетиричную нотацию «наглядной и прозрачной». Под такое определение куда лучше подходит hsl.
                                                  0
                                                  Нет. Для этого надо помнить расположение на цветовом круге. Вот что вам скажет «290 градусов Hue»?
                                                  А в RGB достаточно прикинуть соотношение компонент. ff0000 — насыщенный красный, ну и т.д.
                                                    0
                                                    Вот что вам скажет «290 градусов Hue»?

                                                    То что это что-то сине-фиолетовое. Достаточно запомнить что цвета на hsl круге идут в порядке цветов радуги и 0 — это красный. Насыщенность и яркость вообще указаны в процентах.

                                                    А в RGB достаточно прикинуть соотношение компонент. ff0000

                                                    Сможете прикинуть какого цвета будет #98739b или #918c0е?
                                                    А насколько эти цвета яркие/темные? :)
                                                      0
                                                      Ну вот RGB надо помнить только 3 цвета и их порядок, а в HSV 6 цветов, их порядок и интервал.

                                                      По-моему мнению обе системы неудобны для восприятия на вскидку.
                                                        0
                                                        Сможете прикинуть какого цвета будет #98739b или #918c0е?
                                                        А насколько эти цвета яркие/темные? :)

                                                        Да. Разбиваем на компоненты, лучше даже сокращенной записью (опуская каждую вторую цифру): 979 и 980. В первом случае это будет почти средне-серый (чуть поярче и с немного просаженным зелёным каналом, значит оттенок будет смещён в фиолетовый — красный+синий). Во втором жёлто-коричневый (красный + зелёный на максимальной яркости дают жёлтый, на средней — коричневый).

                                                        Насыщенность легко прикинуть по числовой разнице между компонентами (если хоть один из них сильно отличается от двух других — насыщенность будет высокой).
                                                        Яркость — по «максимальному» компоненту (от 0 до F).

                                                        В HSL вам помимо цветового круга надо ещё в уме оперировать числовыми понятиями яркости и насыщенности. Если с яркостью ещё нормально, то с числовым представлением насыщенности (из-за особенностей физиологии) вообще беда. 0 — серый, 100- максимально насыщенный. Всё. Всё что между ними это будет «средней насыщенности» — так что смысла делить эту шкалу на 100 нет.
                                                        На самом деле есть гораздо более неудобные для человека модели. Lab (и его производные) вообще без палитры под рукой не разберёшь))

                                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                Самое читаемое