getColor.ru — online color picker, позволяющий обмениваться цветами

    image
    Наверное не ошибусь, если скажу, что большинство полезных решений появляется только благодаря возникновению каких-либо трудностей. О паре таких трудностей и одном замечательном сервисе, который может избавить вас от них, прямо сейчас.

    Color picker


    Многим должна быть до боли знакома ситуация, когда внезапно требуется HEX-цвет на полтона темнее или, скажем, бирюзовее, чем есть сейчас.
    Если вы до сих пор не умеете представлять точный RGB-цвет в голове — вам не обойтись без color picker’а, который сделает эту работу за вас.

    Лично я знаю только три вменяемых варианта, где можно взять color picker:
    1. Отдельная программа, специально предназначенная для этого;
    2. Практически любой графический редактор;
    3. Online-сервис

    Надеюсь, утверждение, что онлайн-сервис является самым простым решением, не вызовет ни у кого сомнений — количество символов в каждом пункте тому свидетель.

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

    Знакомьтесь, getColor.ru — online color picker для нетрадиционного способа передачи цвета, использующий HTML5, CSS3, jQuery и Farbtastic для отображения color picker’а.

    Обмен цветами


    Вы никогда не пытались объяснить блондинке (не в обиду немногочисленным блондинкам на хабре), какого цвета, скажем, футболку вы бы хотели носить?
    Недостаточно будет просто скинуть цвет а-ля #FF7F50, нужно ещё будет объяснить, что с этим «шифром» делать.
    Однако ситуация значительно упрощается, если вы сможете этот цвет показать, дать на него прямую ссылку. Что, собственно, и можно делать с помощью getColor.ru.
    Вот, например, Коралловый. Именно такого цвета футболка появилась в моём гардеробе полгода назад. Не без участия блондинки, надо сказать.

    Проект собирается развиваться и уже есть список улучшений, которые будут появляться со временем. Следите за twitter'ом проекта и узнавайте о нововведениях первыми.

    Буду рад услышать о найденных ошибках и предложениях по улучшению проекта.

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 55

      +7
      yandex.ru/yandsearch?text=%23FF7F50&lr=213
      Хотя это не отрицает возможность создать специальный сервис.
          +2
          kuler.adobe.com
          colourlovers.com
          colorschemedesigner.com
          и это только так по-памяти))
            0
            тоже про kulerхотел написать
              +1
              colorpicker.com но там обмена цветом нет.
            0
            Пытался привыкнуть к этому сервису, потому что это действительно удобнее и быстрее, чем использование нескольких программ. Но работает сервис грубо и неказисто.
            Нашел более удобный — виджет для яндекса. Хотя в идеале бы иметь виджет для ОС.
            +5
            Улучшения:
            1. Справочник Pantone
            2. Сочетания цветов
            3. Конструктор цветовых схем для бренд-буков
            4. Фирменные цвета других компаний, с рубрикотором
            Давайте мозговой штурм устроим, поможем парню)
              0
              Уже делается, причём скоро, причём больше ;)
              +1
              имхо для 72 точек kuler.adobe.com лучше решает такие вопросы, а для 300 точек myPantone решает вопросы по полиграфии.
                +6
                в углах
                  0
                  Это не просто в углах, а если увести мышь за пределы color picker’а.
                  Всё равно баг, поправлю, спасибо!
                    0
                    Самая последняя строчка на скриншоте применительно к Хабру звучит забавно.
                    Только я бы исправил: настоящий Ализариновый — жёлтый. Ну вы меня понимаете…
                    +2
                    сервис то что надо, очень удобно то что можно легко изменять фон, это мощное преимущество над подобными сервисами и плагинами для браузеров. Уже в закладках, спасибо.
                      +2


                      Розовый, ага :)

                      Сделайте ограничение для инпута в 6 символов :)
                        –4
                        и еще, в логотипе, в слове Color, буква «o» больше похожа на ноль, нежели на «о» :)
                        0
                        а что в вашем сайте от html5 кроме доктайпа?
                          +7
                          А что, для html5 что-то ещё нужно? =)
                            +2
                            а w3c разрабатывали столько лет только доктайп? :-)
                          0
                          А где нужен более точный цвет, если не в графических редакторах?
                            0
                            несмотря на огрехи, сделано добротно и очень хорошо. верю, что с любовью :) однозначно плюс во все поля
                              –6
                              А HTML5+CSS3 использованы специально для уменьшения аудитории пользователей?
                                +2
                                1) чтоб можно было двигать точку стрелками на клавиатуре
                                2) кроме hex еще неплохо было бы выводить в десятичном виде. еще hsv не помешало бы
                                  0
                                  1) Записано.
                                  2) Про HSV думал, но вот как показывать, чтобы не мешалось, не решил.
                                    0
                                    Насчет HSV — очень было бы здорово. Особенно иметь такие три слайдера.
                                  +1
                                  Отличная вещь! Кстати, хорошо бы иметь возможность описывать словами цвет и искать его по базе (а если его нет в базе — пусть неотвеченные запросы складируются очередь для пополнения) + возможность добавлять свои цвета в базу.

                                  Например — хочу я найти РГБ для оранжевого — красивого такого оранжевого цвета — задаю поиск и вижу несколько классных, подобранных кем-то оттенков
                                    0
                                    Про поиск цвета уже есть запись в ту ду листе.
                                    А вот про возможность сохранения своих цветов — навскидку, слишком много проблем, касающихся опечаток или просто вредоносных пользователей.

                                    Цветовые схемы и обмен ими тоже уже есть в листе.
                                      0
                                      Да, и тут очень важно не отойти от концепции простоты и легковесности решения. Возможно, что-то придётся вычеркнуть.
                                    +1
                                    Отличный проект, Вы молодец! Плодитесь и развивайтесь.
                                      0
                                      А по какой метрике у вас находится ближайший цвет? Расстояние в RGB? Как-то он иногда оказывается не сильно похож, если нажать на линк внизу. Может нужно искать, например, в HSV и задать веса по осям, скажем, самый главный — это, мне кажется, hue. А вообще должна быть какая-то метрика, которая вычисляет расстояние в «пространстве восприятия».
                                        +1
                                        По поводу поиска ближайшего RGB цвета в есть лаконичный мануал на coderlife.
                                        На момент написания каммента coderlife плюется 502 ошибкой, так что даю ссылку на хистори гугла.
                                          0
                                          Когда делал, казалось, что среднее расстояние цветов друг от друга будет оптимальным способом вычисления похожести.
                                          0
                                          Сделайте пожалуйста, чтобы можно было ввести адрес картинки и выбрать на ней пиксель с нуженым цветом.
                                            0
                                            Думаю, это будет уже менее удобно, чем сделать скриншот и открыть в графическом редакторе.
                                              0
                                              Мне на нетбуке неудобно каждый раз открывать тяжеловесный графический редактор.
                                                0
                                                А ваш нетбук Flash потянет?
                                                  0
                                                  Конечно потянет.
                                                    0
                                                    В таком случае обязательно что-нибудь придумаю.
                                            0

                                            Зачем в таком состоянии ссылка активная? На нее кликаешь и ничего не происходит… Ну, у меня в Мозилле по крайней мере не работает.

                                            Что делать в такой ситуации? Если я, например, выбрала цвет «Очень похоже на Джинсовый синий», кликнула на «Джинсовый синий», перешла на «настоящий Джинсовый синий» и он мне не понравился… а ссылки назад нет, надо до панели тянутся. :( По-моему было бы удобнее, если бы рядом с фразой «Очень похоже на Джинсовый синий» был показан небольшой образец этого цвета (может, при наведении ПопАпом показать), чтобы пользователь мог решить, надо туда кликать или нет. Ну, и ссылочку назад тоже хорошо бы заиметь. ИМХО
                                              0
                                              Придумаю что-нибудь с этим делом, спасибо!
                                                0
                                                вам поможет управление жестами браузером. В опере и фф это «нажать правую кнопку мыши, отвести мышь влево, отпустить кнопку». И никуда тянуться не надо.
                                                Хотя проблему это не решает ;)
                                                0
                                                И почему у 100% Magenta называется «очень похоже на Баклажанный»? Где такие баклажаны растут? :) Это ярко-розовый или hot pink (как в каталогах женской одежды любят называть) или цвет фуксии в крайнем случае…
                                                  0
                                                  Чувствую, градации похожести цветов нужно по-другому называть :)
                                                • UFO just landed and posted this here
                                                    +1
                                                    Выражаю огромную благодарность за сервис, мне как человеку плохо разбираещему цвета, очень полезны подсказки о цвете.
                                                      +3
                                                      По порядку, если хотите сохранить минималистичный интерфейс и при этом расширить функционал:
                                                      — Насчет переходов на «настоящие» цвета и обратно. Сделайте внизу текстовую ссылку со стрелкой History, а при нажатии разворачивайте на всю длину квадраты или круги с выбранными цветами. Если добавить иконку закрепления, закрытия и существующую выбрать цвет — освободиться место слева.
                                                      — При такой палитре снизу справа можно ввести переключатель, который отвечает за реакцию при наведении на ячейку цвета. Нажал выбирается фон, нажал еще раз выбирается текущий цвет.
                                                      — Кстати лучше ввести единообразие в отображении ячейки с цветом. Если хотите разделить по значению, то добавьте границу или еще что-то. Кубик — текущий цвет, кружочки с границей — цвета палитры/истории.
                                                      — Добавляем справа ссылки на созданные пользователями палитры как в Kuler'е. Не надо ограничивать палитру 5 цветами, кому-то хочется 3-4, кому-то 8. Отображать можно максимум 10, а выводить при выборе в историю можно вообще все.
                                                      — Добавьте HSV, RGB, CMYK, LAB. Добавьте различные варианты wheel'ов, градиентный выбор, спектральный выбор, миксер, выбор с картинки, опционально можно отображать все цвета с палитры на selector'е или только текущий цвет, и т.д. и т.п.
                                                      — Самый главный вопрос, как же все это отобразить на одном листе? Никак! Вот вам и ответ, сделайте widget'ы (или visualizer'ы кому как нравится) и сохраняемые рабочие пространства, вы не сможете удовлетворить потребности всех пользователей, так дайте им возможность выбрать что они хотят видеть. Сосредоточьтесь на одном виджете и только основательно проработав его переходите к другому, соберите опыт различных сайтов — может получиться очень гибко, мощно и удобно.
                                                      — У вас 3 раза на странице дублируется код цвета, избегайте этого. Вынесете ссылку, текущий цвет и «настоящие» цвета вверх, туду же может перекочевать логотип (слева вверху все же лучше чем снизу справа). Объедините все эти элементы (тут возможны варианты), при наведении на «настоящий» цвет может всплывать панель с «очень похожими» и «похожими» цветами (как у яндекса только лучше).
                                                      — Добавьте опциональности в каждый виджет, делается это не сложно (микро иконки сверху при наведении на виджет или сверху справа если хотите вывести подсказку команды). Пример с RGB, кто-то хочет видеть только цифры, кто-то scroll-полоски для цифр, кто-то еще и цвета на каждой полоске. Пример с wheel, можно отображать цвет, можно блоки цветов (colorschemedesigner.com), можно выбор комплиментарных и т.д. цветов (там же и kuler). Если wheel становиться слишком непохож сам на себя сделайте различные виджеты, например спектральный или блочный wheel (colourlovers.com/store/software).
                                                      — Соберите мнения окружающих, а лучше профессиональных дизайнеров об удобных рабочих пространствах в данном контексте, создайте и протестируйте их на проектах (сайт, буклет, лого, палитра для рисования и т.д.) Добавьте созданные пространства на сайт, чтобы было из чего выбрать. Минимальный формат тестовой группы 5 человек по 3 раза.
                                                      — Переведите на английский язык и домен, сделайте видео с объяснением всех фишек (youtube), напишите и отправьте статью (и видео) в smashing magazine и похожие издания.
                                                      Итог: если не забросите, то судя по тому что сделано у Вас может получится. Мне понравилось :)
                                                        0
                                                        Огромное спасибо за такое количество внимания, уделённого сервису и искреннему желанию его улучшить!
                                                        Но, боюсь, бо́льшую часть из того, что вы описали, очень хорошо делает Adobe Kuler. И меня нет ни ресурсов, ни желания составлять ему конкуренцию. Задача getColor.ru — покрывать аудиторию, для которой загрузка Kuler’а является, по каким-либо причинам, недостаточно приемлемой.
                                                        +2
                                                        хотелось бы возможность сравнивать цвета
                                                          0
                                                          Вот для этого цвет фона и можно менять. Или это не то?
                                                            0
                                                            Да, как раз это. Я сначала не заметил что можно сделать произвольный цвет фона
                                                          0
                                                          Честно говоря не вдохновило. Kuler от Adobe намного удобнее, имхо.
                                                            0
                                                            Громоздкий чересчур для того, чтобы просто цвет найти и кинуть на него ссылку.
                                                            0
                                                            Как-то смущает меня…
                                                            Он правда напоминает Ярко-розовый?
                                                            getcolor.ru/660AC2
                                                              0
                                                              Поправил границы похожести цветов, сейчас должно быть лучше.
                                                              0

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