Важная информация
Показано с 1 по 9 из 9

Тема: HTML CSS Палитра цветов

  1. #1 HTML CSS Палитра цветов 
    Модератор Аватар для pingvin
    Регистрация
    11.02.2011
    Сообщений
    389
    Сказал(а) спасибо
    80
    Поблагодарили 75 раз(а) в 48 сообщениях
    Пожалуй, мой единственный проект доведённый до ума.
    Это обычная палитра, где можно выбрать цвет с помощью мышки, или ввести с клавиатуры. Её можно использовать как в качестве палитры, так и чтобы посмотреть цвет по его коду, или в качестве конвертора между HSV, RGB и HEX кодами цветов. Код сайта состовляет 904 строки (а в мобильной версии 1050), и поэтому я не буду приводить его с пояснениями. Если кому-то будет интересно, могу объяснить что да как.
    [Ссылки могут видеть только зарегистрированные пользователи. ]
    [Ссылки могут видеть только зарегистрированные пользователи. ]
    На этом месте могло быть Ваше "Спасибо"
    Ответить с цитированием  
     

  2. 3 пользователя(ей) сказали cпасибо:

    >Quiet Snow< (13.11.2014), Free Admin (12.11.2014), nik_1 (11.11.2014)

  3. #2  
    Супер модератор Аватар для >Quiet Snow<
    Регистрация
    11.04.2011
    Адрес
    Планета земля
    Сообщений
    3,846
    Сказал(а) спасибо
    1,815
    Поблагодарили 945 раз(а) в 807 сообщениях
    Записей в блоге
    1
    Гуд, мне интересны формулы конверсии между HSV и RGB, в будущем пригодится для такого же пикера в своих редакторах.
    Наверняка есть в вики, но если не сложно напиши тут, так найти будет быстрее потом.
    Обучение прикладному программированию(по skype), качественно, недорого, 18+, вопросы в личку.
    «Если вы ничего не сделаете, я уверяю вас, ничего и не произойдёт» © Жак Фреско
    Ограниченно модерирую.
    Ответить с цитированием  
     

  4. #3  
    Модератор Аватар для pingvin
    Регистрация
    11.02.2011
    Сообщений
    389
    Сказал(а) спасибо
    80
    Поблагодарили 75 раз(а) в 48 сообщениях
    Вот, держите:
    JavaScript Code:
    1.  
    2. // Функция переводит HSV в RGB
    3. function hsvToRgb(h, s, v) {
    4. var r, g, b;
    5. var i;
    6. var f, p, q, t;
    7.  
    8. h = Math.max(0, Math.min(360, h));
    9. s = Math.max(0, Math.min(100, s));
    10. v = Math.max(0, Math.min(100, v));
    11.  
    12. s /= 100;
    13. v /= 100;
    14.  
    15. if(s == 0) {
    16.  
    17. r = g = b = v;
    18. return {r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255)};
    19. }
    20.  
    21. h /= 60;
    22. i = Math.floor(h);
    23. f = h - i;
    24. p = v * (1 - s);
    25. q = v * (1 - s * f);
    26. t = v * (1 - s * (1 - f));
    27.  
    28. switch(i) {
    29. case 0:
    30. r = v;
    31. g = t;
    32. b = p;
    33. break;
    34.  
    35. case 1:
    36. r = q;
    37. g = v;
    38. b = p;
    39. break;
    40.  
    41. case 2:
    42. r = p;
    43. g = v;
    44. b = t;
    45. break;
    46.  
    47. case 3:
    48. r = p;
    49. g = q;
    50. b = v;
    51. break;
    52.  
    53. case 4:
    54. r = t;
    55. g = p;
    56. b = v;
    57. break;
    58.  
    59. default: // case 5:
    60. r = v;
    61. g = p;
    62. b = q;
    63. }
    64.  
    65. return {r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255)};
    66. }
    67.  
    68. // Фукнция переводит RGB в HSV
    69. function rgbToHsv(r, g, b)
    70. {
    71. r = r/255;
    72. g = g/255;
    73. b = b/255;
    74.  
    75. var max = Math.max(r, g, b);
    76. var min = Math.min(r, g, b);
    77. var h, v = max;
    78.  
    79. var d = max - min;
    80. var s = (max == 0) ? 0 : d / max;
    81.  
    82. if(max == min){
    83.     h = 0;
    84. }else{
    85.     switch(max){
    86. case r: h = (g - b) / d + ((g < b) ? 6 : 0); break;
    87. case g: h = (b - r) / d + 2; break;
    88. case b: h = (r - g) / d + 4; break;
    89.     }
    90.     h = h / 6;
    91. }
    92.  
    93. h = Math.floor(h*360);
    94. s = Math.floor(s*100);
    95. v = Math.floor(v*100);
    96.  
    97. return {h: h, s: s, v: v};
    98. }
    На этом месте могло быть Ваше "Спасибо"
    Ответить с цитированием  
     

  5. 2 пользователя(ей) сказали cпасибо:

    >Quiet Snow< (15.11.2014), Free Admin (15.11.2014)

  6. #4  
    Супер модератор Аватар для >Quiet Snow<
    Регистрация
    11.04.2011
    Адрес
    Планета земля
    Сообщений
    3,846
    Сказал(а) спасибо
    1,815
    Поблагодарили 945 раз(а) в 807 сообщениях
    Записей в блоге
    1
    pingvin, ага спасибо.
    Обучение прикладному программированию(по skype), качественно, недорого, 18+, вопросы в личку.
    «Если вы ничего не сделаете, я уверяю вас, ничего и не произойдёт» © Жак Фреско
    Ограниченно модерирую.
    Ответить с цитированием  
     

  7. #5  
    Модератор Аватар для pingvin
    Регистрация
    11.02.2011
    Сообщений
    389
    Сказал(а) спасибо
    80
    Поблагодарили 75 раз(а) в 48 сообщениях
    Добавил возможность выбора полупрозрачных цветов.
    [Ссылки могут видеть только зарегистрированные пользователи. ]
    На этом месте могло быть Ваше "Спасибо"
    Ответить с цитированием  
     

  8. 2 пользователя(ей) сказали cпасибо:

    >Quiet Snow< (16.03.2015), vladkristsun (25.01.2018)

  9. #6  
    Супер модератор Аватар для >Quiet Snow<
    Регистрация
    11.04.2011
    Адрес
    Планета земля
    Сообщений
    3,846
    Сказал(а) спасибо
    1,815
    Поблагодарили 945 раз(а) в 807 сообщениях
    Записей в блоге
    1
    Думаю сам буду юзать. Удобная штука. Да и браузер загрузить быстрее, чем GIMP.
    Обучение прикладному программированию(по skype), качественно, недорого, 18+, вопросы в личку.
    «Если вы ничего не сделаете, я уверяю вас, ничего и не произойдёт» © Жак Фреско
    Ограниченно модерирую.
    Ответить с цитированием  
     

  10. Пользователь сказал cпасибо:

    pingvin (16.03.2015)

  11. #7  
    Модератор Аватар для pingvin
    Регистрация
    11.02.2011
    Сообщений
    389
    Сказал(а) спасибо
    80
    Поблагодарили 75 раз(а) в 48 сообщениях
    Всем привет! С последнего обновления этой темы прошло уже больше года, а за это время сайт был переписан с чистого листа, поменял дизайн и обрел новую функцию - возможность скачать цвет.
    Но я поднимаю эту тему не только по этой причине: недавно он покорил отметку в 200 уникальных посетителей в сутки! 00

    А теперь небольшой обзор
    Сайт по прежнему доступен по адресу [Ссылки могут видеть только зарегистрированные пользователи. ]. Дизайн стал приятен глазу, посмотрите сами:
    [Ссылки могут видеть только зарегистрированные пользователи. ]

    Месяц назад один из посетителей сайта предложил добавить новую функцию - скачать цвет. И вот наступили каникулы Сейчас функция находится в бета-тестировании, прошу отозваться, хорошо ли она работает, и может быть что-то стоит подточить?
    При нажатии на кнопку появляется поле с параметрами для скачивания:
    [Ссылки могут видеть только зарегистрированные пользователи. ]

    Можно скачивать квадратные картинки залитые выбранным цветом в форматах SVG, PNG, JPEG, GIF со стороной от 1 до 1024 пикселей.

    Недавно мой сайт попал на ютуб: [Ссылки могут видеть только зарегистрированные пользователи. ]
    После этого его стали советовать на форумах, использовать ссылку на сайт в статьях. В общем, очень приятно

    Спасибо за внимание!
    На этом месте могло быть Ваше "Спасибо"
    Ответить с цитированием  
     

  12. Пользователь сказал cпасибо:

    Free Admin (25.03.2016)

  13. #8  
    Admin
    Регистрация
    09.04.2014
    Сообщений
    1,215
    Сказал(а) спасибо
    776
    Поблагодарили 490 раз(а) в 402 сообщениях
    Удобно и понятно работает...!)
    Ответить с цитированием  
     

  14. Пользователь сказал cпасибо:

    pingvin (25.03.2016)

  15. #9  
    Супер модератор Аватар для >Quiet Snow<
    Регистрация
    11.04.2011
    Адрес
    Планета земля
    Сообщений
    3,846
    Сказал(а) спасибо
    1,815
    Поблагодарили 945 раз(а) в 807 сообщениях
    Записей в блоге
    1
    Очень крутой пикер, ничего лишнего, даже понятно зачем функция скачивания цвета.
    Потестировал, всё работает без нареканий.
    Сам тоже хотел примерно такой сделать в виде отдельной проги(чтобы не грузить ни GIMP ни браузер),
    руки никак не дойдут.

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

    Из пожеланий, раз уж скачивание картинки, то может быть по стандартным разрешениям логичнее,
    т.е. в комбо боксе выбор из 640x480, 800x600, 1280×960, 1600×1200, 1680×1050, 1920×1080, 3840×2160 и т.п.
    Последний раз редактировалось >Quiet Snow<; 25.03.2016 в 14:51.
    Обучение прикладному программированию(по skype), качественно, недорого, 18+, вопросы в личку.
    «Если вы ничего не сделаете, я уверяю вас, ничего и не произойдёт» © Жак Фреско
    Ограниченно модерирую.
    Ответить с цитированием  
     

  16. Пользователь сказал cпасибо:

    pingvin (25.03.2016)

Информация о теме
Пользователи, просматривающие эту тему

Эту тему просматривают: 1 (пользователей: 0 , гостей: 1)

Похожие темы

  1. Обучения HTML и CSS с нуля.
    от sergei123 в разделе HTML, CSS
    Ответов: 6
    Последнее сообщение: 19.05.2015, 20:52
  2. Спецсимволы в html
    от Sergik в разделе Web-проекты
    Ответов: 0
    Последнее сообщение: 28.09.2014, 12:10
  3. Парс данных из html
    от frankie в разделе HTML, CSS
    Ответов: 1
    Последнее сообщение: 04.10.2013, 21:08
  4. psd, html шаблоны
    от LittleStar в разделе Общие вопросы web-разработки
    Ответов: 0
    Последнее сообщение: 24.10.2012, 23:33
  5. HTML 5
    от Konstantin Shcherba в разделе HTML, CSS
    Ответов: 3
    Последнее сообщение: 05.09.2012, 15:57
Ваши права
  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •