#BADA55-цвета для веб-дизайна

Original author: Jim Crowley
  • Translation
  • Tutorial
Я потратил несколько лет на изучение архитектуры компьютеров, и уж если одну вещь я выучил крепко, так это любовь компьютерных проектировщиков к изящным именам, используемым при инициализации или другой работе с памятью. Долгие часы своей жизни я истратил на придумывание забавно выглядящих адресов памяти для употребления в домашней работе или тестировании. Из подобных названий лучше других известен 0xDEADBEEF, а список некоторых других вы можете видеть вон там и там. Можно даже предположить, что этакие названия (особенно с подстановкою символов: например, «1» вместо «i» или «5» вместо «s») стали предтечами псевдо-крутого интернетовского жаргона, известного как leetspeak.

Всё это напомнила мне недавно попавшаяся мне статья о веб-дизайне (извините, я не помню её в точности). Автор статьи приводил пример CSS-кода, и выбранный им для примера цвет был #BADA55. Оказалось, что это даёт несколько безобразный зелёный цвет, но всё равно он побудил меня призадуматься о том, какие ещё английские слова можно сделать шестнадцатеричными кодами цвета.

Набросав краткий PHP-скрипт, получаем довольно обширный список для подбора таких цветов. Разумеется, годятся все коды, полностью состоящие из букв, но я также дозволил подстановку «1» вместо «i», «5» вместо «s» и «0» вместо «o». Та статья Википедии, на которую я выше сослался, также предлагала использовать «7» вместо «t» и «9» вместо «g», но мне кажется, что при этом не получаются сколько-нибудь легко читаемые «шестнадцатеричные слова» (да к тому же тогда список слов, и без того длинный, оказался бы гораздо длиннее).

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

████████████████ #ABACA5 → abacas
████████████████ #ABA5ED → abased
████████████████ #ABA5E5 → abases
████████████████ #ABA51A → abasia
████████████████ #ABBE55 → abbess
████████████████ #AB1DED → abided
████████████████ #AB1DE5 → abides
████████████████ #AB0DED → aboded
████████████████ #AB0DE5 → abodes
████████████████ #ACAC1A → acacia
████████████████ #ACCEDE → accede
████████████████ #ACCE55 → access
████████████████ #ACED1A → acedia
████████████████ #AC1D1C → acidic
████████████████ #AD0BE5 → adobes
████████████████ #AD0B05 → adobos
████████████████ #A5D1C5 → asdics
████████████████ #A51DE5 → asides
████████████████ #A55A15 → assais
████████████████ #A55E55 → assess
████████████████ #BAA5E5 → baases
████████████████ #BAB1ED → babied
████████████████ #BAB1E5 → babies
████████████████ #BAB005 → baboos
████████████████ #BACCAE → baccae
████████████████ #BADA55 → badass
████████████████ #BADD1E → baddie
████████████████ #BAFFED → baffed
████████████████ #BA0BAB → baobab
████████████████ #BA51C5 → basics
████████████████ #BA55E5 → basses
████████████████ #BA5505 → bassos
████████████████ #BEADED → beaded
████████████████ #BEDDED → bedded
████████████████ #BEEBEE → beebee
████████████████ #BEEFED → beefed
████████████████ #BE51DE → beside
████████████████ #B1A5ED → biased
████████████████ #B1A5E5 → biases
████████████████ #B1BBED → bibbed
████████████████ #B1FACE → biface
████████████████ #B1FFED → biffed
████████████████ #B0BBED → bobbed
████████████████ #B0CCE5 → bocces
████████████████ #B0CC1A → boccia
████████████████ #B0CC1E → boccie
████████████████ #B0CC15 → boccis
████████████████ #B0D1CE → bodice
████████████████ #B0D1ED → bodied
████████████████ #B0D1E5 → bodies
████████████████ #B0FFED → boffed
████████████████ #B0FF05 → boffos
████████████████ #B00BED → boobed
████████████████ #B00B1E → boobie
████████████████ #B00B00 → booboo
████████████████ #B00C00 → boocoo
████████████████ #B055ED → bossed
████████████████ #B055E5 → bosses
████████████████ #CABBED → cabbed
████████████████ #CABB1E → cabbie
████████████████ #CAB0B5 → cabobs
████████████████ #CACA05 → cacaos
████████████████ #CADD1E → caddie
████████████████ #CADD15 → caddis
████████████████ #CA5ABA → casaba
████████████████ #CA5E1C → caseic
████████████████ #CA551A → cassia
████████████████ #CA5515 → cassis
████████████████ #CEA5ED → ceased
████████████████ #CEA5E5 → ceases
████████████████ #CEB1D5 → cebids
████████████████ #CEB01D → ceboid
████████████████ #CE1BA5 → ceibas
████████████████ #CE55ED → cessed
████████████████ #CE55E5 → cesses
████████████████ #C1CADA → cicada
████████████████ #C15C05 → ciscos
████████████████ #C0B1A5 → cobias
████████████████ #C0CC1C → coccic
████████████████ #C0CC1D → coccid
████████████████ #C0C0A5 → cocoas
████████████████ #C0DDED → codded
████████████████ #C0DEC5 → codecs
████████████████ #C0DE1A → codeia
████████████████ #C0FFEE → coffee
████████████████ #C01FED → coifed
████████████████ #C01FFE → coiffe
████████████████ #C00C00 → coocoo
████████████████ #C00EED → cooeed
████████████████ #C00EE5 → cooees
████████████████ #C05EC5 → cosecs
████████████████ #C051ED → cosied
████████████████ #C051E5 → cosies
████████████████ #DABBED → dabbed
████████████████ #DAD0ED → dadoed
████████████████ #DAD0E5 → dadoes
████████████████ #DAFFED → daffed
████████████████ #DA15E5 → daises
████████████████ #DA551E → dassie
████████████████ #DEBA5E → debase
████████████████ #DECADE → decade
████████████████ #DECAF5 → decafs
████████████████ #DEC1DE → decide
████████████████ #DEC0DE → decode
████████████████ #DEEDED → deeded
████████████████ #DEFACE → deface
████████████████ #DEF1ED → defied
████████████████ #DEF1E5 → defies
████████████████ #DE1CED → deiced
████████████████ #DE1CE5 → deices
████████████████ #DE1F1C → deific
████████████████ #D1AC1D → diacid
████████████████ #D1BBED → dibbed
████████████████ #D1D1E5 → didies
████████████████ #D1D0E5 → didoes
████████████████ #D1E0FF → dieoff
████████████████ #D1E5E5 → dieses
████████████████ #D1E515 → diesis
████████████████ #D10DE5 → diodes
████████████████ #D15CED → disced
████████████████ #D15C05 → discos
████████████████ #D155ED → dissed
████████████████ #D155E5 → disses
████████████████ #D0B1E5 → dobies
████████████████ #D0D0E5 → dodoes
████████████████ #D0FFED → doffed
████████████████ #D00B1E → doobie
████████████████ #D00DAD → doodad
████████████████ #D00D00 → doodoo
████████████████ #D055ED → dossed
████████████████ #D055E5 → dosses
████████████████ #EA51E5 → easies
████████████████ #ECE51C → ecesic
████████████████ #ECE515 → ecesis
████████████████ #EDD1ED → eddied
████████████████ #EDD1E5 → eddies
████████████████ #EDD0E5 → eddoes
████████████████ #EFFACE → efface
████████████████ #FACADE → facade
████████████████ #FAC1AE → faciae
████████████████ #FAC1A5 → facias
████████████████ #FAC1E5 → facies
████████████████ #FAECE5 → faeces
████████████████ #FA5CE5 → fasces
████████████████ #FA5C1A → fascia
████████████████ #FEA5ED → feased
████████████████ #FEA5E5 → feases
████████████████ #FE0FF5 → feoffs
████████████████ #FE55ED → fessed
████████████████ #FE55E5 → fesses
████████████████ #F1A5C0 → fiasco
████████████████ #F1BBED → fibbed
████████████████ #F1C0E5 → ficoes
████████████████ #F0BBED → fobbed
████████████████ #F00D1E → foodie
████████████████ #F055AE → fossae
████████████████ #F055A5 → fossas
████████████████ #F055E5 → fosses
████████████████ #1B1CE5 → ibices
████████████████ #1B15E5 → ibises
████████████████ #10D1DE → iodide
████████████████ #10D1D5 → iodids
████████████████ #10D15E → iodise
████████████████ #155E15 → isseis
████████████████ #0B5E55 → obsess
████████████████ #0FF1CE → office
████████████████ #5ABBED → sabbed
████████████████ #5A1CE5 → saices
████████████████ #5A55ED → sassed
████████████████ #5A55E5 → sasses
████████████████ #5C0FF5 → scoffs
████████████████ #5EABED → seabed
████████████████ #5ECC05 → seccos
████████████████ #5ECEDE → secede
████████████████ #5EEDED → seeded
████████████████ #5E15ED → seised
████████████████ #5E15E5 → seises
████████████████ #51CCED → sicced
████████████████ #5155E5 → sisses
████████████████ #50BBED → sobbed
████████████████ #50DDED → sodded

Примечания переводчика:

1. Перевод жаргонного слова «badass» можете самостоятельно подобрать по вкусу (в Lingvo, например); я не настаиваю ни на каком, чтобы не разводить флейма.

2. Хабрахабр не позволяет задать цвет фона ячеек таблицы, так что пришлось отказаться от таблицы и создавать цветные полоски из раскрашенных символов «прямоугольный блок» (шестнадцатеричный номер 2588 в Unicode). В шрифте Verdana эти символы сливаются.
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 42

    +5
    Некоторые неплохо получились… sisses :)
      +21
      Некоторые цвета и по смыслу соответствуют «названию»:

      — «access» зелёный (а не красный или другой такой цвет, который означал бы «access denied»);

      — «cocoas» отчасти смахивает на кокосовый;

      — «fascia» напоминает об алых знамёнах национальных социалистов;

      — «seabed» имеет синенький морской цвет.
      +1
      Еще бы отсортировать по цвету…
        +46
        xxx: дай hex значение телесного цвета.
        yyy: #FACE8D
        xxx: издеваешься?
        yyy: попробуй
        xxx: шойтан 8D
        © bash.im/quote/395746
          +5
          #DEFACE
          Понравился )
          Жаль ваш скриптец только по обычному словарю… Еще бы по жаргонам и аббревиатурам типа:
          #DDO5ED

          А вообще автору зачет. На разметку статьи наверное больше времени ушло чем на сам скрипт :D
            +1
            Еще 5-10 минут на скрипт для написания разметки статьи 8)
              +2
              Это перевод ;)
                +1
                Если кому интересно, то таблицу первоисточника я перевёл на язык хабраразметки за несколько минут, методом проб и ошибок подобрав по своему вкусу регулярное выражение.
                  +1
                  Вот черт, опять не заметил!
                  0
                  Алгоритм довольно простой, по крайней мере на Leet транслятор с API и украшательствами для 4-х языков у меня ушло не больше 4-х часов, а в это случае все еще проще, обычный ассоциативный массив с ключ/значение и один цикл (5 минут).
                    0
                    Помимо скрипта потребуется ещё тот сколько-нибудь полный словарь английской речи, на совпадение с которым будут проверяться итоги перебора шестнадцатеричных кодов.

                    Словари эти бывают весьма различны друг от друга — этим-то и объясняется то обстоятельство, что переведённый мною Jim Crowley получил один список, а упомянутый мною ниже Ned Batchelder получил другой список, причём списки их совпадают лишь частично.
                  0
                  Спасибо, но я лучше по кулеру буду продолжать выбирать.
                  +24
                  ████████████████

                  ████████████████ #AD1DA5

                  ████████████████

                  P.S. Не реклама :)
                    0
                    Только хотел предложить :)
                      0
                      Можно еще китайскую подделку #AB1BA5 до кучи предложить :)
                        +1
                        Упс, чуть ниже уже есть комент про это…
                      0
                      А где #DABA55?
                        +25
                        #EBACCA
                          +18
                          ████#3AEB15████
                            +4
                            #Bl9 #B00D00
                              +2
                              Кстати, да, список можно разбавить еще и сокращениями вроде #B19 или #DAD или #101
                            +1
                            +1
                            Любимый цвет Paul Irish :)
                              0
                              Что плавно подводит меня к мысли упомянуть тут же его блогозапись «Memorable hex colors» (2009 г.) и её более обширный первоисточник — «Hex color words» (Ned Batchelder, 2003 г.).
                              +2
                              desunote.ru/desu/CoolIPv6 (hexspik в контексте ipv6-адресов, большей частью к кодам тоже применим).
                                +3
                                Я помню, когда работал в одном интернет-провайдере — мы себе делали красивые MAC адреса ( своих компах + в биллинге провайдера )… Например c0fe.c0ca.c0fe или face.face.face или dead.dead.dead :)
                                  +1
                                  А где-же #ebebe1, мой любимый цвет?
                                    0
                                    А как же цвет выделения текста из h5bp — #fe57a1 — festal.

                                    ::-moz-selection {background: #fe57a1}
                                    ::selection {background: #fe57a1}
                                    


                                    Festal (adj): pertaining to or befitting a feast, festival, holiday, or gala occasion.
                                      0
                                      ████████████████ #FE57A1 → festal

                                      В списке его нет, потому что подстановка «7» → «t» не учитывалася.
                                        0
                                        От такого выделения уже отказались.
                                        +2
                                        #EBAEBA
                                          0
                                          ████████████████ #EBAEBA
                                            0
                                            ████████████████ #BOOOB5
                                            0
                                            Спасибо, теперь я знаю в какой цвет покрасить логотип студии #DEFACE
                                              +1
                                              Фирменные цвета Абибаса, вот они:

                                                0
                                                И правда.
                                                +4
                                                Трёхбуквенные слова дают более насыщенные цвета:

                                                ████████████████ #0A7 → OAT
                                                ████████████████ #0AF → OAF
                                                ████████████████ #0B1 → OBI
                                                ████████████████ #0B5 → OBS
                                                ████████████████ #0DD → ODD
                                                ████████████████ #0DE → ODE
                                                ████████████████ #0F7 → OFT
                                                ████████████████ #0FF → OFF
                                                ████████████████ #111 → III
                                                ████████████████ #175 → ITS
                                                ████████████████ #1CE → ICE
                                                ████████████████ #1D5 → IDS
                                                ████████████████ #1F5 → IFS
                                                ████████████████ #200 → ZOO
                                                ████████████████ #217 → ZIT
                                                ████████████████ #2ED → ZED
                                                ████████████████ #507 → SOT
                                                ████████████████ #50B → SOB
                                                ████████████████ #50C → SOC
                                                ████████████████ #50D → SOD
                                                ████████████████ #515 → SIS
                                                ████████████████ #517 → SIT
                                                ████████████████ #51C → SIC
                                                ████████████████ #57D → STD
                                                ████████████████ #5A6 → SAG
                                                ████████████████ #5A7 → SAT
                                                ████████████████ #5AC → SAC
                                                ████████████████ #5AD → SAD
                                                ████████████████ #5C1 → SCI
                                                ████████████████ #5E7 → SET
                                                ████████████████ #5EA → SEA
                                                ████████████████ #5EC → SEC
                                                ████████████████ #5EE → SEE
                                                ████████████████ #600 → GOO
                                                ████████████████ #605 → GOS
                                                ████████████████ #607 → GOT
                                                ████████████████ #60B → GOB
                                                ████████████████ #60D → GOD
                                                ████████████████ #616 → GIG
                                                ████████████████ #617 → GIT
                                                ████████████████ #6A5 → GAS
                                                ████████████████ #6A6 → GAG
                                                ████████████████ #6AB → GAB
                                                ████████████████ #6AD → GAD
                                                ████████████████ #6E7 → GET
                                                ████████████████ #6EE → GEE
                                                ████████████████ #700 → TOO
                                                ████████████████ #706 → TOG
                                                ████████████████ #707 → TOT
                                                ████████████████ #70E → TOE
                                                ████████████████ #717 → TIT
                                                ████████████████ #71C → TIC
                                                ████████████████ #71E → TIE
                                                ████████████████ #7A6 → TAG
                                                ████████████████ #7A7 → TAT
                                                ████████████████ #7AB → TAB
                                                ████████████████ #7AD → TAD
                                                ████████████████ #7B5 → TBS
                                                ████████████████ #7EA → TEA
                                                ████████████████ #7ED → TED
                                                ████████████████ #7EE → TEE
                                                ████████████████ #A1D → AID
                                                ████████████████ #A55 → ASS
                                                ████████████████ #A60 → AGO
                                                ████████████████ #A6E → AGE
                                                ████████████████ #A7E → ATE
                                                ████████████████ #AB5 → ABS
                                                ████████████████ #AC7 → ACT
                                                ████████████████ #ACE → ACE
                                                ████████████████ #AD0 → ADO
                                                ████████████████ #AD2 → ADZ
                                                ████████████████ #AD5 → ADS
                                                ████████████████ #ADD → ADD
                                                ████████████████ #AF7 → AFT
                                                ████████████████ #B00 → BOO
                                                ████████████████ #B06 → BOG
                                                ████████████████ #B07 → BOT
                                                ████████████████ #B0A → BOA
                                                ████████████████ #B0B → BOB
                                                ████████████████ #B0D → BOD
                                                ████████████████ #B10 → BIO
                                                ████████████████ #B12 → BIZ
                                                ████████████████ #B15 → BIS
                                                ████████████████ #B16 → BIG
                                                ████████████████ #B17 → BIT
                                                ████████████████ #B1B → BIB
                                                ████████████████ #B1D → BID
                                                ████████████████ #BA6 → BAG
                                                ████████████████ #BA7 → BAT
                                                ████████████████ #BAA → BAA
                                                ████████████████ #BAD → BAD
                                                ████████████████ #BE6 → BEG
                                                ████████████████ #BE7 → BET
                                                ████████████████ #BED → BED
                                                ████████████████ #BEE → BEE
                                                ████████████████ #C00 → COO
                                                ████████████████ #C05 → COS
                                                ████████████████ #C06 → COG
                                                ████████████████ #C07 → COT
                                                ████████████████ #C0B → COB
                                                ████████████████ #C0D → COD
                                                ████████████████ #C17 → CIT
                                                ████████████████ #CA7 → CAT
                                                ████████████████ #CAB → CAB
                                                ████████████████ #CAD → CAD
                                                ████████████████ #D02 → DOZ
                                                ████████████████ #D05 → DOS
                                                ████████████████ #D06 → DOG
                                                ████████████████ #D07 → DOT
                                                ████████████████ #D0B → DOB
                                                ████████████████ #D0C → DOC
                                                ████████████████ #D0E → DOE
                                                ████████████████ #D15 → DIS
                                                ████████████████ #D16 → DIG
                                                ████████████████ #D1D → DID
                                                ████████████████ #D1E → DIE
                                                ████████████████ #DA6 → DAG
                                                ████████████████ #DAB → DAB
                                                ████████████████ #DAD → DAD
                                                ████████████████ #DD5 → DDS
                                                ████████████████ #DE6 → DEG
                                                ████████████████ #DEB → DEB
                                                ████████████████ #DEF → DEF
                                                ████████████████ #E57 → EST
                                                ████████████████ #E60 → EGO
                                                ████████████████ #E66 → EGG
                                                ████████████████ #E7A → ETA
                                                ████████████████ #E7C → ETC
                                                ████████████████ #EA7 → EAT
                                                ████████████████ #EBB → EBB
                                                ████████████████ #ED5 → EDS
                                                ████████████████ #EFF → EFF
                                                ████████████████ #F00 → FOO
                                                ████████████████ #F06 → FOG
                                                ████████████████ #F0B → FOB
                                                ████████████████ #F0E → FOE
                                                ████████████████ #F16 → FIG
                                                ████████████████ #F17 → FIT
                                                ████████████████ #F1B → FIB
                                                ████████████████ #F1E → FIE
                                                ████████████████ #FA6 → FAG
                                                ████████████████ #FA7 → FAT
                                                ████████████████ #FAB → FAB
                                                ████████████████ #FAD → FAD
                                                ████████████████ #FE2 → FEZ
                                                ████████████████ #FED → FED
                                                ████████████████ #FEE → FEE

                                                Скрипт для получения этих полос — gist.github.com/2470601
                                                  +1
                                                  Первые восемь цветов должны быть такими:

                                                  ████████████████ #0A7 → OAT
                                                  ████████████████ #0AF → OAF
                                                  ████████████████ #0B1 → OBI
                                                  ████████████████ #0B5 → OBS
                                                  ████████████████ #0DD → ODD
                                                  ████████████████ #0DE → ODE
                                                  ████████████████ #0F7 → OFT
                                                  ████████████████ #0FF → OFF
                                                    0
                                                    Да, там похоже не все 6 на 3 исправили. (qq{)
                                                      0
                                                      Не понял.

                                                      printf
                                                              qq{<font color="#%06x">████████████████</font> #%03X → %s\n},
                                                              ($color & 0xF00) * 0x1100 + ($color & 0xF0) * 0x110 + ($color & 0xF) * 0x11,
                                                              $color, $word;
                                                      

                                                      Первое #%06x даёт привыводе цвет вида #RRGGBB (нужный цвет вычисляется из $color в следующей строке),
                                                      следующее за ним #%03X — трёхсимвольное шестнадцатеричное представление исходного цвета заглавными буквами,
                                                      %s — строку, где некоторые цифры заменены буквами.

                                                      Одной шестёрки в printf достаточно :-)

                                                Only users with full accounts can post comments. Log in, please.