1. В Хроме при подборе цвета через devTools появляется инструмент пипетка. С ее помощью можно взять цвет с изображения (кликните на квадрат цвета).
2. В верстке не силен, ждем других пользователей. =)
Николай, потому что это не консоль. Консоль находится правее вкладки Elements и называется Console.
Вынесите скрипт из канваса и исправьте то, что у вас в 13 строке на скриншоте: опечатку в gatElementById.
Думаю, стоит понять, что логически означают эти product_subgroup. Возможно, тип этого поля можно поменять на int, а букву выводить в шаблоне в зависимости от значения product_subgroup. В таком случае вам не придется морочиться со строковой сортировкой.
