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




Вы, наверное, никогда не обращали внимания на такую мелочь, но в вашем браузере есть заранее определённые цвета, которые являются не тем, чем кажутся. Если бы я сказал вам, что названия образцов выше это 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):

  1. mapron
    /#20272592 / +5

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

    в общем, понимание пришло только после просмотра таблички
    www.w3schools.com/colors/colors_shades.asp
    (очень надеюсь что всем все и так было понятно, и мой коммент — лишний).

    • Spaceoddity
      /#20272628

      Хм… Когда говорят про «процентный серый», я то как раз первым делом экспоненту яркости вспоминаю, а не проценты от 2^8 градаций.
      Ну это из той же оперы что и фотографический «18% серый» (среднесерый по факту) и «фотошоповские плашки» — 10%, 15%…

  2. vlad-yermolayev
    /#20272724 / -11

    Интересное наблюдение, можно добавить в список «неудобных» вопросов на собеседовании.

    • fireSparrow
      /#20272924 / +6

      Какие именно качества/знания кандидата вы собираетесь определить этим вопросом?

      • ogost
        /#20272948 / +1

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

        • vlad-yermolayev
          /#20272986 / -3

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

        • OnYourLips
          /#20274168 / +1

          А почему нельзя просто сказать «я вынужден на этом этапе прекратить собеседование, вы мне не подходите по <список объективных причин> и <список личных претензий>»?

          • MechanicZelenyy
            /#20274698 / +3

            Потому что это не законно, и не только в Штатах, но и В России.

            • sumanai
              /#20274714

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

              • MechanicZelenyy
                /#20274736

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

                С объективными тут тоже может быть интересно, например, кандидат не в зуб ногой, но у него есть диплом об профильном ВО (настоящий, не поддельный). Отказывая по объективным причинам вы ставите под сомненье работу ВУЗа, который выдает таким «ребятам» дипломы, фактически вы сомневаетесь в способностях государства проверять качество выпускников ВУЗов, этож почти гос. измена xD.

                • gohan
                  /#20274926 / +1

                  По такой логике любое недовольство чем угодно — гос. измена.

                  • sumanai
                    /#20274992 / +2

                    Вы начинаете что-то понимать.

                  • Fedorchik
                    /#20275466

                    Именно по такой логике сейчас законы и принимают…

                • RiseOfDeath
                  /#20275550

                  работа подразумевает деловые отношение, а не личные.


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

                  • MechanicZelenyy
                    /#20276342

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

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

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

                    • OnYourLips
                      /#20278730

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

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

                      • MechanicZelenyy
                        /#20278866 / +1

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


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

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

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

                        • RiseOfDeath
                          /#20280490

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

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

                          • MechanicZelenyy
                            /#20281290

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

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

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


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

            • Fenzales
              /#20275844

              и не только в Штатах
              В Штатах формальные причины для отказа принимать на работу как раз-таки не нужны.

              • MechanicZelenyy
                /#20276468

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

      • vlreshet
        /#20272950

        Этот вопрос покажет будет ли кандидат читать хабр в рабочее время </joke>

    • amarao
      /#20273068 / +1

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

    • psFitz
      /#20273176

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

      • vlad-yermolayev
        /#20273250

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

  3. ua30
    /#20272770

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

  4. freecoder_xx
    /#20272782

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

    • staticmain
      /#20272882

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

      • freecoder_xx
        /#20272916

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

        • greg123
          /#20273204

          Ну чтобы жизнь медом не казалась, Gray50 можно сделать как 50%, а Gray66 как rgb(66,66,66) :)

          • khim
            /#20273634

            Более того, в результате слияний что-нибудь подобное наверняка бы и получилось…

      • vics001
        /#20274936

        Уже даже в Android переходят к цветам как float от [0, 100[. В современных мониторах мощность белого колеблется от 0 до 10К нит, все остальные цвета относительны от белого.

  5. vlreshet
    /#20272878 / +1

    Кстати, кто-то вообще использует встроенные цвета (кроме black и white, разве что)? Частенько изучаю devtools-ом разные сайты (иногда находятся интересные решения), и практически всегда вижу только HEX цвета.

    • Source
      /#20273104 / +1

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

    • androidovshchik
      /#20273486 / +1

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

    • unwrecker
      /#20273498

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

      • unwrecker
        /#20273514 / +1

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

    • Shugich
      /#20275156

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

      • vlreshet
        /#20276634

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

  6. Sirion
    /#20273324 / +6

    Удивительно, как автор и переводчик удержались от каламбуров про 50 оттенков в заголовке. Я бы не смог.

    • Iv38
      /#20273534 / +10

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

    • DjPhoeniX
      /#20273624 / +3

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

      • PeterK
        /#20274474 / +3

        254. Два из них — белый и чёрный.

        • Sirion
          /#20275310

          252. Ещё светло-чёрный и тёмно-белый.

  7. PeterK
    /#20273734

    Есть еще три цвета: Grey, LightGrey, DarkGrey.

  8. red_andr
    /#20273832

    О эти названия, помню попался как то NavajoWhite с кодом #FFDEAD, тоже из X11. И который на самом деле ничуть не белый, а скорее что то между жёлтым и оранжевым.

  9. rboots
    /#20274018 / +1

    Интересная статья, но я не видел профессиональных фронтенд-разработчиков, которые пользовались бы именованными цветами. Шестнадцатеричная нотация гораздо нагляднее и прозрачнее.

    • dydyman
      /#20274592 / -2

      Бывает, использую в вебмордах на всяких еспшках — байты экономятся =)

    • YemSalat
      /#20275926

      Я бы не назвал шестнадцетиричную нотацию «наглядной и прозрачной». Под такое определение куда лучше подходит hsl.

      • Spaceoddity
        /#20276250

        Нет. Для этого надо помнить расположение на цветовом круге. Вот что вам скажет «290 градусов Hue»?
        А в RGB достаточно прикинуть соотношение компонент. ff0000 — насыщенный красный, ну и т.д.

        • YemSalat
          /#20277736

          Вот что вам скажет «290 градусов Hue»?

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

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

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

          • Hithroc
            /#20279144

            Ну вот RGB надо помнить только 3 цвета и их порядок, а в HSV 6 цветов, их порядок и интервал.

            По-моему мнению обе системы неудобны для восприятия на вскидку.

          • Spaceoddity
            /#20279594

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

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

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

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