eip · May 6, 2020 23:57
diff --git a/Color Sorting.ipynb b/Color Sorting.ipynb
 {
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Color sorting examples"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Additional packages\n",
    "# pip install hilbertcurve\n",
    "# pip install tsp_solver2\n",
    "\n",
    "import colorsys\n",
    "import math\n",
    "import random\n",
    "\n",
    "import numpy as np\n",
    "from hilbertcurve.hilbertcurve import HilbertCurve\n",
    "from IPython.display import HTML\n",
    "from scipy.spatial import distance\n",
    "from skimage import color as cc\n",
    "from tsp_solver.greedy import solve_tsp\n",
    "\n",
    "paletteTmpl = '<div style=\"display: flex; flex-direction: row; width: {w}; height: {h};\">{c}</div>'\n",
    "swatchTmpl = '<b style=\"flex: auto; background-color: {};\"></b>'\n",
    "colorTmpl = \"#{:02x}{:02x}{:02x}\"\n",
    "\n",
    "\n",
    "def toHTML(colors):\n",
    "    if type(colors) == list and type(colors[0]) == tuple:\n",
    "        return paletteTmpl.format(c=\"\".join(toHTML(c) for c in colors), w=\"100%\", h=\"32px\")\n",
    "\n",
    "    hex = colorTmpl.format(*[int(c * 255 + 0.5) for c in colors])\n",
    "    return swatchTmpl.format(hex)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Generate random colors"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"display: flex; flex-direction: row; width: 100%; height: 32px;\"><b style=\"flex: auto; background-color: #c9de63;\"></b><b style=\"flex: auto; background-color: #791171;\"></b><b style=\"flex: auto; background-color: #1213af;\"></b><b style=\"flex: auto; background-color: #e77118;\"></b><b style=\"flex: auto; background-color: #9bfef3;\"></b><b style=\"flex: auto; background-color: #6992f9;\"></b><b style=\"flex: auto; background-color: #c56e74;\"></b><b style=\"flex: auto; background-color: #57862e;\"></b><b style=\"flex: auto; background-color: #70df72;\"></b><b style=\"flex: auto; background-color: #fcc8e4;\"></b><b style=\"flex: auto; background-color: #478468;\"></b><b style=\"flex: auto; background-color: #669065;\"></b><b style=\"flex: auto; background-color: #110b25;\"></b><b style=\"flex: auto; background-color: #99d5fa;\"></b><b style=\"flex: auto; background-color: #ded791;\"></b><b style=\"flex: auto; background-color: #391702;\"></b><b style=\"flex: auto; background-color: #3e2828;\"></b><b style=\"flex: auto; background-color: #5d9b8d;\"></b><b style=\"flex: auto; background-color: #c4567a;\"></b><b style=\"flex: auto; background-color: #bf2553;\"></b><b style=\"flex: auto; background-color: #014eaa;\"></b><b style=\"flex: auto; background-color: #373ab2;\"></b><b style=\"flex: auto; background-color: #3a979b;\"></b><b style=\"flex: auto; background-color: #6df26f;\"></b><b style=\"flex: auto; background-color: #df8d40;\"></b><b style=\"flex: auto; background-color: #c76b8d;\"></b><b style=\"flex: auto; background-color: #5d6b2d;\"></b><b style=\"flex: auto; background-color: #01cc36;\"></b><b style=\"flex: auto; background-color: #51113b;\"></b><b style=\"flex: auto; background-color: #4b18f3;\"></b><b style=\"flex: auto; background-color: #6d51f6;\"></b><b style=\"flex: auto; background-color: #262961;\"></b><b style=\"flex: auto; background-color: #40281c;\"></b><b style=\"flex: auto; background-color: #729b48;\"></b><b style=\"flex: auto; background-color: #717611;\"></b><b style=\"flex: auto; background-color: #c1b3d0;\"></b><b style=\"flex: auto; background-color: #6bdc9c;\"></b><b style=\"flex: auto; background-color: #25a122;\"></b><b style=\"flex: auto; background-color: #49508f;\"></b><b style=\"flex: auto; background-color: #48347f;\"></b><b style=\"flex: auto; background-color: #3809b6;\"></b><b style=\"flex: auto; background-color: #4d32b4;\"></b><b style=\"flex: auto; background-color: #44a56a;\"></b><b style=\"flex: auto; background-color: #e2944d;\"></b><b style=\"flex: auto; background-color: #aaeed2;\"></b><b style=\"flex: auto; background-color: #9cb690;\"></b><b style=\"flex: auto; background-color: #3e07ab;\"></b><b style=\"flex: auto; background-color: #e089e5;\"></b><b style=\"flex: auto; background-color: #8a6d25;\"></b><b style=\"flex: auto; background-color: #a12bb0;\"></b><b style=\"flex: auto; background-color: #85c277;\"></b><b style=\"flex: auto; background-color: #c41975;\"></b><b style=\"flex: auto; background-color: #5faae1;\"></b><b style=\"flex: auto; background-color: #ef5e12;\"></b><b style=\"flex: auto; background-color: #118348;\"></b><b style=\"flex: auto; background-color: #258841;\"></b><b style=\"flex: auto; background-color: #f6e46b;\"></b><b style=\"flex: auto; background-color: #a72e34;\"></b><b style=\"flex: auto; background-color: #11eb60;\"></b><b style=\"flex: auto; background-color: #9eb382;\"></b><b style=\"flex: auto; background-color: #28b7b7;\"></b><b style=\"flex: auto; background-color: #2e9830;\"></b><b style=\"flex: auto; background-color: #c2bced;\"></b><b style=\"flex: auto; background-color: #129cde;\"></b><b style=\"flex: auto; background-color: #f3ba52;\"></b><b style=\"flex: auto; background-color: #17635a;\"></b><b style=\"flex: auto; background-color: #fbcf6b;\"></b><b style=\"flex: auto; background-color: #fac0e4;\"></b><b style=\"flex: auto; background-color: #b301e0;\"></b><b style=\"flex: auto; background-color: #8e6fd8;\"></b><b style=\"flex: auto; background-color: #beb5c9;\"></b><b style=\"flex: auto; background-color: #b5c749;\"></b><b style=\"flex: auto; background-color: #8c02c4;\"></b><b style=\"flex: auto; background-color: #b4b870;\"></b><b style=\"flex: auto; background-color: #18d2dd;\"></b><b style=\"flex: auto; background-color: #4da015;\"></b><b style=\"flex: auto; background-color: #c79d6e;\"></b><b style=\"flex: auto; background-color: #55a482;\"></b><b style=\"flex: auto; background-color: #aaa344;\"></b><b style=\"flex: auto; background-color: #dacaf8;\"></b><b style=\"flex: auto; background-color: #97a415;\"></b><b style=\"flex: auto; background-color: #49fcd4;\"></b><b style=\"flex: auto; background-color: #d1441a;\"></b><b style=\"flex: auto; background-color: #d4dd7c;\"></b><b style=\"flex: auto; background-color: #d3e3a3;\"></b><b style=\"flex: auto; background-color: #1f9cd3;\"></b><b style=\"flex: auto; background-color: #4872cb;\"></b><b style=\"flex: auto; background-color: #cd195c;\"></b><b style=\"flex: auto; background-color: #877f1d;\"></b><b style=\"flex: auto; background-color: #2f83e5;\"></b><b style=\"flex: auto; background-color: #ea0b63;\"></b><b style=\"flex: auto; background-color: #847ec8;\"></b><b style=\"flex: auto; background-color: #399fd1;\"></b><b style=\"flex: auto; background-color: #6d6848;\"></b><b style=\"flex: auto; background-color: #66ca37;\"></b><b style=\"flex: auto; background-color: #f41ae1;\"></b><b style=\"flex: auto; background-color: #697473;\"></b><b style=\"flex: auto; background-color: #8c76dd;\"></b><b style=\"flex: auto; background-color: #ac604a;\"></b><b style=\"flex: auto; background-color: #728480;\"></b></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "colors = [(random.random(), random.random(), random.random()) for _ in range(100)]\n",
    "HTML(toHTML(colors))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## RGB sorting"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"display: flex; flex-direction: row; width: 100%; height: 32px;\"><b style=\"flex: auto; background-color: #014eaa;\"></b><b style=\"flex: auto; background-color: #01cc36;\"></b><b style=\"flex: auto; background-color: #110b25;\"></b><b style=\"flex: auto; background-color: #118348;\"></b><b style=\"flex: auto; background-color: #11eb60;\"></b><b style=\"flex: auto; background-color: #129cde;\"></b><b style=\"flex: auto; background-color: #1213af;\"></b><b style=\"flex: auto; background-color: #17635a;\"></b><b style=\"flex: auto; background-color: #18d2dd;\"></b><b style=\"flex: auto; background-color: #1f9cd3;\"></b><b style=\"flex: auto; background-color: #25a122;\"></b><b style=\"flex: auto; background-color: #258841;\"></b><b style=\"flex: auto; background-color: #262961;\"></b><b style=\"flex: auto; background-color: #28b7b7;\"></b><b style=\"flex: auto; background-color: #2e9830;\"></b><b style=\"flex: auto; background-color: #2f83e5;\"></b><b style=\"flex: auto; background-color: #373ab2;\"></b><b style=\"flex: auto; background-color: #3809b6;\"></b><b style=\"flex: auto; background-color: #391702;\"></b><b style=\"flex: auto; background-color: #399fd1;\"></b><b style=\"flex: auto; background-color: #3a979b;\"></b><b style=\"flex: auto; background-color: #3e2828;\"></b><b style=\"flex: auto; background-color: #3e07ab;\"></b><b style=\"flex: auto; background-color: #40281c;\"></b><b style=\"flex: auto; background-color: #44a56a;\"></b><b style=\"flex: auto; background-color: #478468;\"></b><b style=\"flex: auto; background-color: #48347f;\"></b><b style=\"flex: auto; background-color: #4872cb;\"></b><b style=\"flex: auto; background-color: #49fcd4;\"></b><b style=\"flex: auto; background-color: #49508f;\"></b><b style=\"flex: auto; background-color: #4b18f3;\"></b><b style=\"flex: auto; background-color: #4d32b4;\"></b><b style=\"flex: auto; background-color: #4da015;\"></b><b style=\"flex: auto; background-color: #51113b;\"></b><b style=\"flex: auto; background-color: #55a482;\"></b><b style=\"flex: auto; background-color: #57862e;\"></b><b style=\"flex: auto; background-color: #5d9b8d;\"></b><b style=\"flex: auto; background-color: #5d6b2d;\"></b><b style=\"flex: auto; background-color: #5faae1;\"></b><b style=\"flex: auto; background-color: #66ca37;\"></b><b style=\"flex: auto; background-color: #669065;\"></b><b style=\"flex: auto; background-color: #697473;\"></b><b style=\"flex: auto; background-color: #6992f9;\"></b><b style=\"flex: auto; background-color: #6bdc9c;\"></b><b style=\"flex: auto; background-color: #6df26f;\"></b><b style=\"flex: auto; background-color: #6d6848;\"></b><b style=\"flex: auto; background-color: #6d51f6;\"></b><b style=\"flex: auto; background-color: #70df72;\"></b><b style=\"flex: auto; background-color: #717611;\"></b><b style=\"flex: auto; background-color: #728480;\"></b><b style=\"flex: auto; background-color: #729b48;\"></b><b style=\"flex: auto; background-color: #791171;\"></b><b style=\"flex: auto; background-color: #847ec8;\"></b><b style=\"flex: auto; background-color: #85c277;\"></b><b style=\"flex: auto; background-color: #877f1d;\"></b><b style=\"flex: auto; background-color: #8a6d25;\"></b><b style=\"flex: auto; background-color: #8c76dd;\"></b><b style=\"flex: auto; background-color: #8c02c4;\"></b><b style=\"flex: auto; background-color: #8e6fd8;\"></b><b style=\"flex: auto; background-color: #97a415;\"></b><b style=\"flex: auto; background-color: #99d5fa;\"></b><b style=\"flex: auto; background-color: #9bfef3;\"></b><b style=\"flex: auto; background-color: #9cb690;\"></b><b style=\"flex: auto; background-color: #9eb382;\"></b><b style=\"flex: auto; background-color: #a12bb0;\"></b><b style=\"flex: auto; background-color: #a72e34;\"></b><b style=\"flex: auto; background-color: #aaeed2;\"></b><b style=\"flex: auto; background-color: #aaa344;\"></b><b style=\"flex: auto; background-color: #ac604a;\"></b><b style=\"flex: auto; background-color: #b301e0;\"></b><b style=\"flex: auto; background-color: #b4b870;\"></b><b style=\"flex: auto; background-color: #b5c749;\"></b><b style=\"flex: auto; background-color: #beb5c9;\"></b><b style=\"flex: auto; background-color: #bf2553;\"></b><b style=\"flex: auto; background-color: #c1b3d0;\"></b><b style=\"flex: auto; background-color: #c2bced;\"></b><b style=\"flex: auto; background-color: #c4567a;\"></b><b style=\"flex: auto; background-color: #c41975;\"></b><b style=\"flex: auto; background-color: #c56e74;\"></b><b style=\"flex: auto; background-color: #c79d6e;\"></b><b style=\"flex: auto; background-color: #c76b8d;\"></b><b style=\"flex: auto; background-color: #c9de63;\"></b><b style=\"flex: auto; background-color: #cd195c;\"></b><b style=\"flex: auto; background-color: #d1441a;\"></b><b style=\"flex: auto; background-color: #d3e3a3;\"></b><b style=\"flex: auto; background-color: #d4dd7c;\"></b><b style=\"flex: auto; background-color: #dacaf8;\"></b><b style=\"flex: auto; background-color: #ded791;\"></b><b style=\"flex: auto; background-color: #df8d40;\"></b><b style=\"flex: auto; background-color: #e089e5;\"></b><b style=\"flex: auto; background-color: #e2944d;\"></b><b style=\"flex: auto; background-color: #e77118;\"></b><b style=\"flex: auto; background-color: #ea0b63;\"></b><b style=\"flex: auto; background-color: #ef5e12;\"></b><b style=\"flex: auto; background-color: #f3ba52;\"></b><b style=\"flex: auto; background-color: #f41ae1;\"></b><b style=\"flex: auto; background-color: #f6e46b;\"></b><b style=\"flex: auto; background-color: #fac0e4;\"></b><b style=\"flex: auto; background-color: #fbcf6b;\"></b><b style=\"flex: auto; background-color: #fcc8e4;\"></b></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "colors.sort()\n",
    "HTML(toHTML(colors))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## HSV sorting"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"display: flex; flex-direction: row; width: 100%; height: 32px;\"><b style=\"flex: auto; background-color: #ac604a;\"></b><b style=\"flex: auto; background-color: #d1441a;\"></b><b style=\"flex: auto; background-color: #40281c;\"></b><b style=\"flex: auto; background-color: #ef5e12;\"></b><b style=\"flex: auto; background-color: #391702;\"></b><b style=\"flex: auto; background-color: #e77118;\"></b><b style=\"flex: auto; background-color: #e2944d;\"></b><b style=\"flex: auto; background-color: #df8d40;\"></b><b style=\"flex: auto; background-color: #c79d6e;\"></b><b style=\"flex: auto; background-color: #f3ba52;\"></b><b style=\"flex: auto; background-color: #fbcf6b;\"></b><b style=\"flex: auto; background-color: #8a6d25;\"></b><b style=\"flex: auto; background-color: #6d6848;\"></b><b style=\"flex: auto; background-color: #f6e46b;\"></b><b style=\"flex: auto; background-color: #ded791;\"></b><b style=\"flex: auto; background-color: #877f1d;\"></b><b style=\"flex: auto; background-color: #aaa344;\"></b><b style=\"flex: auto; background-color: #717611;\"></b><b style=\"flex: auto; background-color: #b4b870;\"></b><b style=\"flex: auto; background-color: #97a415;\"></b><b style=\"flex: auto; background-color: #d4dd7c;\"></b><b style=\"flex: auto; background-color: #b5c749;\"></b><b style=\"flex: auto; background-color: #c9de63;\"></b><b style=\"flex: auto; background-color: #5d6b2d;\"></b><b style=\"flex: auto; background-color: #d3e3a3;\"></b><b style=\"flex: auto; background-color: #9eb382;\"></b><b style=\"flex: auto; background-color: #729b48;\"></b><b style=\"flex: auto; background-color: #57862e;\"></b><b style=\"flex: auto; background-color: #4da015;\"></b><b style=\"flex: auto; background-color: #66ca37;\"></b><b style=\"flex: auto; background-color: #9cb690;\"></b><b style=\"flex: auto; background-color: #85c277;\"></b><b style=\"flex: auto; background-color: #669065;\"></b><b style=\"flex: auto; background-color: #25a122;\"></b><b style=\"flex: auto; background-color: #70df72;\"></b><b style=\"flex: auto; background-color: #2e9830;\"></b><b style=\"flex: auto; background-color: #6df26f;\"></b><b style=\"flex: auto; background-color: #01cc36;\"></b><b style=\"flex: auto; background-color: #258841;\"></b><b style=\"flex: auto; background-color: #11eb60;\"></b><b style=\"flex: auto; background-color: #44a56a;\"></b><b style=\"flex: auto; background-color: #6bdc9c;\"></b><b style=\"flex: auto; background-color: #118348;\"></b><b style=\"flex: auto; background-color: #478468;\"></b><b style=\"flex: auto; background-color: #55a482;\"></b><b style=\"flex: auto; background-color: #aaeed2;\"></b><b style=\"flex: auto; background-color: #728480;\"></b><b style=\"flex: auto; background-color: #5d9b8d;\"></b><b style=\"flex: auto; background-color: #49fcd4;\"></b><b style=\"flex: auto; background-color: #17635a;\"></b><b style=\"flex: auto; background-color: #9bfef3;\"></b><b style=\"flex: auto; background-color: #697473;\"></b><b style=\"flex: auto; background-color: #28b7b7;\"></b><b style=\"flex: auto; background-color: #3a979b;\"></b><b style=\"flex: auto; background-color: #18d2dd;\"></b><b style=\"flex: auto; background-color: #1f9cd3;\"></b><b style=\"flex: auto; background-color: #129cde;\"></b><b style=\"flex: auto; background-color: #399fd1;\"></b><b style=\"flex: auto; background-color: #99d5fa;\"></b><b style=\"flex: auto; background-color: #5faae1;\"></b><b style=\"flex: auto; background-color: #2f83e5;\"></b><b style=\"flex: auto; background-color: #014eaa;\"></b><b style=\"flex: auto; background-color: #4872cb;\"></b><b style=\"flex: auto; background-color: #6992f9;\"></b><b style=\"flex: auto; background-color: #49508f;\"></b><b style=\"flex: auto; background-color: #262961;\"></b><b style=\"flex: auto; background-color: #373ab2;\"></b><b style=\"flex: auto; background-color: #1213af;\"></b><b style=\"flex: auto; background-color: #847ec8;\"></b><b style=\"flex: auto; background-color: #c2bced;\"></b><b style=\"flex: auto; background-color: #6d51f6;\"></b><b style=\"flex: auto; background-color: #4d32b4;\"></b><b style=\"flex: auto; background-color: #8c76dd;\"></b><b style=\"flex: auto; background-color: #110b25;\"></b><b style=\"flex: auto; background-color: #4b18f3;\"></b><b style=\"flex: auto; background-color: #48347f;\"></b><b style=\"flex: auto; background-color: #3809b6;\"></b><b style=\"flex: auto; background-color: #8e6fd8;\"></b><b style=\"flex: auto; background-color: #3e07ab;\"></b><b style=\"flex: auto; background-color: #dacaf8;\"></b><b style=\"flex: auto; background-color: #c1b3d0;\"></b><b style=\"flex: auto; background-color: #beb5c9;\"></b><b style=\"flex: auto; background-color: #8c02c4;\"></b><b style=\"flex: auto; background-color: #b301e0;\"></b><b style=\"flex: auto; background-color: #a12bb0;\"></b><b style=\"flex: auto; background-color: #e089e5;\"></b><b style=\"flex: auto; background-color: #791171;\"></b><b style=\"flex: auto; background-color: #f41ae1;\"></b><b style=\"flex: auto; background-color: #51113b;\"></b><b style=\"flex: auto; background-color: #fac0e4;\"></b><b style=\"flex: auto; background-color: #fcc8e4;\"></b><b style=\"flex: auto; background-color: #c41975;\"></b><b style=\"flex: auto; background-color: #ea0b63;\"></b><b style=\"flex: auto; background-color: #cd195c;\"></b><b style=\"flex: auto; background-color: #c76b8d;\"></b><b style=\"flex: auto; background-color: #c4567a;\"></b><b style=\"flex: auto; background-color: #bf2553;\"></b><b style=\"flex: auto; background-color: #c56e74;\"></b><b style=\"flex: auto; background-color: #a72e34;\"></b><b style=\"flex: auto; background-color: #3e2828;\"></b></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "colors.sort(key=lambda rgb: colorsys.rgb_to_hsv(*rgb))\n",
    "HTML(toHTML(colors))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## YIQ (brightness) sorting"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"display: flex; flex-direction: row; width: 100%; height: 32px;\"><b style=\"flex: auto; background-color: #110b25;\"></b><b style=\"flex: auto; background-color: #391702;\"></b><b style=\"flex: auto; background-color: #1213af;\"></b><b style=\"flex: auto; background-color: #51113b;\"></b><b style=\"flex: auto; background-color: #3e07ab;\"></b><b style=\"flex: auto; background-color: #3809b6;\"></b><b style=\"flex: auto; background-color: #40281c;\"></b><b style=\"flex: auto; background-color: #262961;\"></b><b style=\"flex: auto; background-color: #3e2828;\"></b><b style=\"flex: auto; background-color: #791171;\"></b><b style=\"flex: auto; background-color: #4b18f3;\"></b><b style=\"flex: auto; background-color: #8c02c4;\"></b><b style=\"flex: auto; background-color: #014eaa;\"></b><b style=\"flex: auto; background-color: #48347f;\"></b><b style=\"flex: auto; background-color: #373ab2;\"></b><b style=\"flex: auto; background-color: #4d32b4;\"></b><b style=\"flex: auto; background-color: #17635a;\"></b><b style=\"flex: auto; background-color: #b301e0;\"></b><b style=\"flex: auto; background-color: #a72e34;\"></b><b style=\"flex: auto; background-color: #49508f;\"></b><b style=\"flex: auto; background-color: #cd195c;\"></b><b style=\"flex: auto; background-color: #c41975;\"></b><b style=\"flex: auto; background-color: #ea0b63;\"></b><b style=\"flex: auto; background-color: #bf2553;\"></b><b style=\"flex: auto; background-color: #118348;\"></b><b style=\"flex: auto; background-color: #a12bb0;\"></b><b style=\"flex: auto; background-color: #5d6b2d;\"></b><b style=\"flex: auto; background-color: #258841;\"></b><b style=\"flex: auto; background-color: #6d6848;\"></b><b style=\"flex: auto; background-color: #717611;\"></b><b style=\"flex: auto; background-color: #d1441a;\"></b><b style=\"flex: auto; background-color: #6d51f6;\"></b><b style=\"flex: auto; background-color: #2e9830;\"></b><b style=\"flex: auto; background-color: #8a6d25;\"></b><b style=\"flex: auto; background-color: #25a122;\"></b><b style=\"flex: auto; background-color: #57862e;\"></b><b style=\"flex: auto; background-color: #478468;\"></b><b style=\"flex: auto; background-color: #4872cb;\"></b><b style=\"flex: auto; background-color: #697473;\"></b><b style=\"flex: auto; background-color: #f41ae1;\"></b><b style=\"flex: auto; background-color: #2f83e5;\"></b><b style=\"flex: auto; background-color: #ac604a;\"></b><b style=\"flex: auto; background-color: #877f1d;\"></b><b style=\"flex: auto; background-color: #4da015;\"></b><b style=\"flex: auto; background-color: #129cde;\"></b><b style=\"flex: auto; background-color: #c4567a;\"></b><b style=\"flex: auto; background-color: #3a979b;\"></b><b style=\"flex: auto; background-color: #1f9cd3;\"></b><b style=\"flex: auto; background-color: #728480;\"></b><b style=\"flex: auto; background-color: #669065;\"></b><b style=\"flex: auto; background-color: #01cc36;\"></b><b style=\"flex: auto; background-color: #ef5e12;\"></b><b style=\"flex: auto; background-color: #44a56a;\"></b><b style=\"flex: auto; background-color: #8e6fd8;\"></b><b style=\"flex: auto; background-color: #729b48;\"></b><b style=\"flex: auto; background-color: #399fd1;\"></b><b style=\"flex: auto; background-color: #5d9b8d;\"></b><b style=\"flex: auto; background-color: #8c76dd;\"></b><b style=\"flex: auto; background-color: #847ec8;\"></b><b style=\"flex: auto; background-color: #55a482;\"></b><b style=\"flex: auto; background-color: #c56e74;\"></b><b style=\"flex: auto; background-color: #c76b8d;\"></b><b style=\"flex: auto; background-color: #e77118;\"></b><b style=\"flex: auto; background-color: #28b7b7;\"></b><b style=\"flex: auto; background-color: #97a415;\"></b><b style=\"flex: auto; background-color: #6992f9;\"></b><b style=\"flex: auto; background-color: #5faae1;\"></b><b style=\"flex: auto; background-color: #aaa344;\"></b><b style=\"flex: auto; background-color: #11eb60;\"></b><b style=\"flex: auto; background-color: #66ca37;\"></b><b style=\"flex: auto; background-color: #18d2dd;\"></b><b style=\"flex: auto; background-color: #df8d40;\"></b><b style=\"flex: auto; background-color: #e2944d;\"></b><b style=\"flex: auto; background-color: #c79d6e;\"></b><b style=\"flex: auto; background-color: #9eb382;\"></b><b style=\"flex: auto; background-color: #85c277;\"></b><b style=\"flex: auto; background-color: #9cb690;\"></b><b style=\"flex: auto; background-color: #e089e5;\"></b><b style=\"flex: auto; background-color: #b4b870;\"></b><b style=\"flex: auto; background-color: #70df72;\"></b><b style=\"flex: auto; background-color: #6bdc9c;\"></b><b style=\"flex: auto; background-color: #b5c749;\"></b><b style=\"flex: auto; background-color: #beb5c9;\"></b><b style=\"flex: auto; background-color: #c1b3d0;\"></b><b style=\"flex: auto; background-color: #6df26f;\"></b><b style=\"flex: auto; background-color: #f3ba52;\"></b><b style=\"flex: auto; background-color: #49fcd4;\"></b><b style=\"flex: auto; background-color: #c2bced;\"></b><b style=\"flex: auto; background-color: #99d5fa;\"></b><b style=\"flex: auto; background-color: #c9de63;\"></b><b style=\"flex: auto; background-color: #d4dd7c;\"></b><b style=\"flex: auto; background-color: #fbcf6b;\"></b><b style=\"flex: auto; background-color: #ded791;\"></b><b style=\"flex: auto; background-color: #dacaf8;\"></b><b style=\"flex: auto; background-color: #fac0e4;\"></b><b style=\"flex: auto; background-color: #aaeed2;\"></b><b style=\"flex: auto; background-color: #d3e3a3;\"></b><b style=\"flex: auto; background-color: #fcc8e4;\"></b><b style=\"flex: auto; background-color: #f6e46b;\"></b><b style=\"flex: auto; background-color: #9bfef3;\"></b></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "colors.sort(key=lambda rgb: colorsys.rgb_to_yiq(*rgb))\n",
    "HTML(toHTML(colors))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Luminosity sorting"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"display: flex; flex-direction: row; width: 100%; height: 32px;\"><b style=\"flex: auto; background-color: #110b25;\"></b><b style=\"flex: auto; background-color: #1213af;\"></b><b style=\"flex: auto; background-color: #391702;\"></b><b style=\"flex: auto; background-color: #3e07ab;\"></b><b style=\"flex: auto; background-color: #3809b6;\"></b><b style=\"flex: auto; background-color: #51113b;\"></b><b style=\"flex: auto; background-color: #262961;\"></b><b style=\"flex: auto; background-color: #40281c;\"></b><b style=\"flex: auto; background-color: #3e2828;\"></b><b style=\"flex: auto; background-color: #8c02c4;\"></b><b style=\"flex: auto; background-color: #791171;\"></b><b style=\"flex: auto; background-color: #4b18f3;\"></b><b style=\"flex: auto; background-color: #b301e0;\"></b><b style=\"flex: auto; background-color: #48347f;\"></b><b style=\"flex: auto; background-color: #4d32b4;\"></b><b style=\"flex: auto; background-color: #373ab2;\"></b><b style=\"flex: auto; background-color: #014eaa;\"></b><b style=\"flex: auto; background-color: #ea0b63;\"></b><b style=\"flex: auto; background-color: #cd195c;\"></b><b style=\"flex: auto; background-color: #c41975;\"></b><b style=\"flex: auto; background-color: #a72e34;\"></b><b style=\"flex: auto; background-color: #bf2553;\"></b><b style=\"flex: auto; background-color: #17635a;\"></b><b style=\"flex: auto; background-color: #a12bb0;\"></b><b style=\"flex: auto; background-color: #49508f;\"></b><b style=\"flex: auto; background-color: #f41ae1;\"></b><b style=\"flex: auto; background-color: #6d51f6;\"></b><b style=\"flex: auto; background-color: #5d6b2d;\"></b><b style=\"flex: auto; background-color: #d1441a;\"></b><b style=\"flex: auto; background-color: #118348;\"></b><b style=\"flex: auto; background-color: #6d6848;\"></b><b style=\"flex: auto; background-color: #258841;\"></b><b style=\"flex: auto; background-color: #717611;\"></b><b style=\"flex: auto; background-color: #4872cb;\"></b><b style=\"flex: auto; background-color: #8a6d25;\"></b><b style=\"flex: auto; background-color: #ac604a;\"></b><b style=\"flex: auto; background-color: #697473;\"></b><b style=\"flex: auto; background-color: #c4567a;\"></b><b style=\"flex: auto; background-color: #478468;\"></b><b style=\"flex: auto; background-color: #57862e;\"></b><b style=\"flex: auto; background-color: #2f83e5;\"></b><b style=\"flex: auto; background-color: #2e9830;\"></b><b style=\"flex: auto; background-color: #25a122;\"></b><b style=\"flex: auto; background-color: #877f1d;\"></b><b style=\"flex: auto; background-color: #ef5e12;\"></b><b style=\"flex: auto; background-color: #8e6fd8;\"></b><b style=\"flex: auto; background-color: #728480;\"></b><b style=\"flex: auto; background-color: #129cde;\"></b><b style=\"flex: auto; background-color: #3a979b;\"></b><b style=\"flex: auto; background-color: #1f9cd3;\"></b><b style=\"flex: auto; background-color: #8c76dd;\"></b><b style=\"flex: auto; background-color: #669065;\"></b><b style=\"flex: auto; background-color: #4da015;\"></b><b style=\"flex: auto; background-color: #c56e74;\"></b><b style=\"flex: auto; background-color: #c76b8d;\"></b><b style=\"flex: auto; background-color: #847ec8;\"></b><b style=\"flex: auto; background-color: #e77118;\"></b><b style=\"flex: auto; background-color: #44a56a;\"></b><b style=\"flex: auto; background-color: #399fd1;\"></b><b style=\"flex: auto; background-color: #5d9b8d;\"></b><b style=\"flex: auto; background-color: #729b48;\"></b><b style=\"flex: auto; background-color: #55a482;\"></b><b style=\"flex: auto; background-color: #6992f9;\"></b><b style=\"flex: auto; background-color: #01cc36;\"></b><b style=\"flex: auto; background-color: #28b7b7;\"></b><b style=\"flex: auto; background-color: #97a415;\"></b><b style=\"flex: auto; background-color: #df8d40;\"></b><b style=\"flex: auto; background-color: #5faae1;\"></b><b style=\"flex: auto; background-color: #aaa344;\"></b><b style=\"flex: auto; background-color: #e2944d;\"></b><b style=\"flex: auto; background-color: #e089e5;\"></b><b style=\"flex: auto; background-color: #c79d6e;\"></b><b style=\"flex: auto; background-color: #18d2dd;\"></b><b style=\"flex: auto; background-color: #66ca37;\"></b><b style=\"flex: auto; background-color: #9eb382;\"></b><b style=\"flex: auto; background-color: #11eb60;\"></b><b style=\"flex: auto; background-color: #9cb690;\"></b><b style=\"flex: auto; background-color: #85c277;\"></b><b style=\"flex: auto; background-color: #b4b870;\"></b><b style=\"flex: auto; background-color: #beb5c9;\"></b><b style=\"flex: auto; background-color: #c1b3d0;\"></b><b style=\"flex: auto; background-color: #b5c749;\"></b><b style=\"flex: auto; background-color: #70df72;\"></b><b style=\"flex: auto; background-color: #6bdc9c;\"></b><b style=\"flex: auto; background-color: #f3ba52;\"></b><b style=\"flex: auto; background-color: #c2bced;\"></b><b style=\"flex: auto; background-color: #6df26f;\"></b><b style=\"flex: auto; background-color: #99d5fa;\"></b><b style=\"flex: auto; background-color: #49fcd4;\"></b><b style=\"flex: auto; background-color: #fac0e4;\"></b><b style=\"flex: auto; background-color: #dacaf8;\"></b><b style=\"flex: auto; background-color: #c9de63;\"></b><b style=\"flex: auto; background-color: #fbcf6b;\"></b><b style=\"flex: auto; background-color: #ded791;\"></b><b style=\"flex: auto; background-color: #d4dd7c;\"></b><b style=\"flex: auto; background-color: #fcc8e4;\"></b><b style=\"flex: auto; background-color: #d3e3a3;\"></b><b style=\"flex: auto; background-color: #aaeed2;\"></b><b style=\"flex: auto; background-color: #f6e46b;\"></b><b style=\"flex: auto; background-color: #9bfef3;\"></b></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "def lum(r, g, b):\n",
    "    return math.sqrt(0.241 * r + 0.691 * g + 0.068 * b)\n",
    "\n",
    "\n",
    "colors.sort(key=lambda rgb: lum(*rgb))\n",
    "HTML(toHTML(colors))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Hue - Luminocity step sorting"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"display: flex; flex-direction: row; width: 100%; height: 32px;\"><b style=\"flex: auto; background-color: #391702;\"></b><b style=\"flex: auto; background-color: #40281c;\"></b><b style=\"flex: auto; background-color: #d1441a;\"></b><b style=\"flex: auto; background-color: #8a6d25;\"></b><b style=\"flex: auto; background-color: #ac604a;\"></b><b style=\"flex: auto; background-color: #ef5e12;\"></b><b style=\"flex: auto; background-color: #e77118;\"></b><b style=\"flex: auto; background-color: #df8d40;\"></b><b style=\"flex: auto; background-color: #e2944d;\"></b><b style=\"flex: auto; background-color: #c79d6e;\"></b><b style=\"flex: auto; background-color: #f3ba52;\"></b><b style=\"flex: auto; background-color: #fbcf6b;\"></b><b style=\"flex: auto; background-color: #f6e46b;\"></b><b style=\"flex: auto; background-color: #d3e3a3;\"></b><b style=\"flex: auto; background-color: #d4dd7c;\"></b><b style=\"flex: auto; background-color: #ded791;\"></b><b style=\"flex: auto; background-color: #c9de63;\"></b><b style=\"flex: auto; background-color: #b5c749;\"></b><b style=\"flex: auto; background-color: #b4b870;\"></b><b style=\"flex: auto; background-color: #9eb382;\"></b><b style=\"flex: auto; background-color: #aaa344;\"></b><b style=\"flex: auto; background-color: #97a415;\"></b><b style=\"flex: auto; background-color: #729b48;\"></b><b style=\"flex: auto; background-color: #877f1d;\"></b><b style=\"flex: auto; background-color: #717611;\"></b><b style=\"flex: auto; background-color: #6d6848;\"></b><b style=\"flex: auto; background-color: #5d6b2d;\"></b><b style=\"flex: auto; background-color: #57862e;\"></b><b style=\"flex: auto; background-color: #2e9830;\"></b><b style=\"flex: auto; background-color: #25a122;\"></b><b style=\"flex: auto; background-color: #669065;\"></b><b style=\"flex: auto; background-color: #4da015;\"></b><b style=\"flex: auto; background-color: #66ca37;\"></b><b style=\"flex: auto; background-color: #9cb690;\"></b><b style=\"flex: auto; background-color: #85c277;\"></b><b style=\"flex: auto; background-color: #70df72;\"></b><b style=\"flex: auto; background-color: #6df26f;\"></b><b style=\"flex: auto; background-color: #9bfef3;\"></b><b style=\"flex: auto; background-color: #aaeed2;\"></b><b style=\"flex: auto; background-color: #49fcd4;\"></b><b style=\"flex: auto; background-color: #6bdc9c;\"></b><b style=\"flex: auto; background-color: #11eb60;\"></b><b style=\"flex: auto; background-color: #28b7b7;\"></b><b style=\"flex: auto; background-color: #01cc36;\"></b><b style=\"flex: auto; background-color: #55a482;\"></b><b style=\"flex: auto; background-color: #5d9b8d;\"></b><b style=\"flex: auto; background-color: #44a56a;\"></b><b style=\"flex: auto; background-color: #728480;\"></b><b style=\"flex: auto; background-color: #478468;\"></b><b style=\"flex: auto; background-color: #697473;\"></b><b style=\"flex: auto; background-color: #258841;\"></b><b style=\"flex: auto; background-color: #118348;\"></b><b style=\"flex: auto; background-color: #17635a;\"></b><b style=\"flex: auto; background-color: #014eaa;\"></b><b style=\"flex: auto; background-color: #4872cb;\"></b><b style=\"flex: auto; background-color: #2f83e5;\"></b><b style=\"flex: auto; background-color: #129cde;\"></b><b style=\"flex: auto; background-color: #3a979b;\"></b><b style=\"flex: auto; background-color: #1f9cd3;\"></b><b style=\"flex: auto; background-color: #399fd1;\"></b><b style=\"flex: auto; background-color: #6992f9;\"></b><b style=\"flex: auto; background-color: #5faae1;\"></b><b style=\"flex: auto; background-color: #18d2dd;\"></b><b style=\"flex: auto; background-color: #99d5fa;\"></b><b style=\"flex: auto; background-color: #dacaf8;\"></b><b style=\"flex: auto; background-color: #c2bced;\"></b><b style=\"flex: auto; background-color: #c1b3d0;\"></b><b style=\"flex: auto; background-color: #beb5c9;\"></b><b style=\"flex: auto; background-color: #847ec8;\"></b><b style=\"flex: auto; background-color: #8c76dd;\"></b><b style=\"flex: auto; background-color: #8e6fd8;\"></b><b style=\"flex: auto; background-color: #6d51f6;\"></b><b style=\"flex: auto; background-color: #49508f;\"></b><b style=\"flex: auto; background-color: #373ab2;\"></b><b style=\"flex: auto; background-color: #4d32b4;\"></b><b style=\"flex: auto; background-color: #48347f;\"></b><b style=\"flex: auto; background-color: #4b18f3;\"></b><b style=\"flex: auto; background-color: #262961;\"></b><b style=\"flex: auto; background-color: #3809b6;\"></b><b style=\"flex: auto; background-color: #3e07ab;\"></b><b style=\"flex: auto; background-color: #1213af;\"></b><b style=\"flex: auto; background-color: #110b25;\"></b><b style=\"flex: auto; background-color: #8c02c4;\"></b><b style=\"flex: auto; background-color: #791171;\"></b><b style=\"flex: auto; background-color: #b301e0;\"></b><b style=\"flex: auto; background-color: #a12bb0;\"></b><b style=\"flex: auto; background-color: #f41ae1;\"></b><b style=\"flex: auto; background-color: #e089e5;\"></b><b style=\"flex: auto; background-color: #fcc8e4;\"></b><b style=\"flex: auto; background-color: #fac0e4;\"></b><b style=\"flex: auto; background-color: #c76b8d;\"></b><b style=\"flex: auto; background-color: #c56e74;\"></b><b style=\"flex: auto; background-color: #c4567a;\"></b><b style=\"flex: auto; background-color: #bf2553;\"></b><b style=\"flex: auto; background-color: #a72e34;\"></b><b style=\"flex: auto; background-color: #c41975;\"></b><b style=\"flex: auto; background-color: #cd195c;\"></b><b style=\"flex: auto; background-color: #ea0b63;\"></b><b style=\"flex: auto; background-color: #3e2828;\"></b><b style=\"flex: auto; background-color: #51113b;\"></b></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "def step(r, g, b, steps=1):\n",
    "    h, _, _ = colorsys.rgb_to_hsv(r, g, b)\n",
    "    h = int(h * steps)\n",
    "    lum = math.sqrt(0.241 * r + 0.691 * g + 0.068 * b)\n",
    "    if h % 2 == 1:\n",
    "        lum = 1 - lum\n",
    "    return (h, lum)\n",
    "\n",
    "\n",
    "colors.sort(key=lambda rgb: step(*rgb, 8))\n",
    "HTML(toHTML(colors))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Hilbert Curve sorting"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"display: flex; flex-direction: row; width: 100%; height: 32px;\"><b style=\"flex: auto; background-color: #391702;\"></b><b style=\"flex: auto; background-color: #110b25;\"></b><b style=\"flex: auto; background-color: #3e2828;\"></b><b style=\"flex: auto; background-color: #717611;\"></b><b style=\"flex: auto; background-color: #5d6b2d;\"></b><b style=\"flex: auto; background-color: #40281c;\"></b><b style=\"flex: auto; background-color: #51113b;\"></b><b style=\"flex: auto; background-color: #791171;\"></b><b style=\"flex: auto; background-color: #48347f;\"></b><b style=\"flex: auto; background-color: #6d6848;\"></b><b style=\"flex: auto; background-color: #697473;\"></b><b style=\"flex: auto; background-color: #17635a;\"></b><b style=\"flex: auto; background-color: #262961;\"></b><b style=\"flex: auto; background-color: #373ab2;\"></b><b style=\"flex: auto; background-color: #3e07ab;\"></b><b style=\"flex: auto; background-color: #3809b6;\"></b><b style=\"flex: auto; background-color: #1213af;\"></b><b style=\"flex: auto; background-color: #4b18f3;\"></b><b style=\"flex: auto; background-color: #4d32b4;\"></b><b style=\"flex: auto; background-color: #49508f;\"></b><b style=\"flex: auto; background-color: #6d51f6;\"></b><b style=\"flex: auto; background-color: #4872cb;\"></b><b style=\"flex: auto; background-color: #014eaa;\"></b><b style=\"flex: auto; background-color: #3a979b;\"></b><b style=\"flex: auto; background-color: #28b7b7;\"></b><b style=\"flex: auto; background-color: #1f9cd3;\"></b><b style=\"flex: auto; background-color: #129cde;\"></b><b style=\"flex: auto; background-color: #2f83e5;\"></b><b style=\"flex: auto; background-color: #399fd1;\"></b><b style=\"flex: auto; background-color: #18d2dd;\"></b><b style=\"flex: auto; background-color: #6bdc9c;\"></b><b style=\"flex: auto; background-color: #49fcd4;\"></b><b style=\"flex: auto; background-color: #5faae1;\"></b><b style=\"flex: auto; background-color: #6992f9;\"></b><b style=\"flex: auto; background-color: #5d9b8d;\"></b><b style=\"flex: auto; background-color: #55a482;\"></b><b style=\"flex: auto; background-color: #728480;\"></b><b style=\"flex: auto; background-color: #669065;\"></b><b style=\"flex: auto; background-color: #729b48;\"></b><b style=\"flex: auto; background-color: #44a56a;\"></b><b style=\"flex: auto; background-color: #478468;\"></b><b style=\"flex: auto; background-color: #118348;\"></b><b style=\"flex: auto; background-color: #258841;\"></b><b style=\"flex: auto; background-color: #11eb60;\"></b><b style=\"flex: auto; background-color: #6df26f;\"></b><b style=\"flex: auto; background-color: #70df72;\"></b><b style=\"flex: auto; background-color: #66ca37;\"></b><b style=\"flex: auto; background-color: #01cc36;\"></b><b style=\"flex: auto; background-color: #25a122;\"></b><b style=\"flex: auto; background-color: #2e9830;\"></b><b style=\"flex: auto; background-color: #4da015;\"></b><b style=\"flex: auto; background-color: #57862e;\"></b><b style=\"flex: auto; background-color: #97a415;\"></b><b style=\"flex: auto; background-color: #85c277;\"></b><b style=\"flex: auto; background-color: #b5c749;\"></b><b style=\"flex: auto; background-color: #f6e46b;\"></b><b style=\"flex: auto; background-color: #fbcf6b;\"></b><b style=\"flex: auto; background-color: #d4dd7c;\"></b><b style=\"flex: auto; background-color: #c9de63;\"></b><b style=\"flex: auto; background-color: #f3ba52;\"></b><b style=\"flex: auto; background-color: #df8d40;\"></b><b style=\"flex: auto; background-color: #e2944d;\"></b><b style=\"flex: auto; background-color: #c79d6e;\"></b><b style=\"flex: auto; background-color: #b4b870;\"></b><b style=\"flex: auto; background-color: #aaa344;\"></b><b style=\"flex: auto; background-color: #9cb690;\"></b><b style=\"flex: auto; background-color: #9eb382;\"></b><b style=\"flex: auto; background-color: #beb5c9;\"></b><b style=\"flex: auto; background-color: #99d5fa;\"></b><b style=\"flex: auto; background-color: #9bfef3;\"></b><b style=\"flex: auto; background-color: #aaeed2;\"></b><b style=\"flex: auto; background-color: #ded791;\"></b><b style=\"flex: auto; background-color: #d3e3a3;\"></b><b style=\"flex: auto; background-color: #dacaf8;\"></b><b style=\"flex: auto; background-color: #fcc8e4;\"></b><b style=\"flex: auto; background-color: #fac0e4;\"></b><b style=\"flex: auto; background-color: #c2bced;\"></b><b style=\"flex: auto; background-color: #c1b3d0;\"></b><b style=\"flex: auto; background-color: #e089e5;\"></b><b style=\"flex: auto; background-color: #c76b8d;\"></b><b style=\"flex: auto; background-color: #8c76dd;\"></b><b style=\"flex: auto; background-color: #8e6fd8;\"></b><b style=\"flex: auto; background-color: #847ec8;\"></b><b style=\"flex: auto; background-color: #a12bb0;\"></b><b style=\"flex: auto; background-color: #8c02c4;\"></b><b style=\"flex: auto; background-color: #b301e0;\"></b><b style=\"flex: auto; background-color: #f41ae1;\"></b><b style=\"flex: auto; background-color: #ea0b63;\"></b><b style=\"flex: auto; background-color: #c41975;\"></b><b style=\"flex: auto; background-color: #cd195c;\"></b><b style=\"flex: auto; background-color: #c56e74;\"></b><b style=\"flex: auto; background-color: #c4567a;\"></b><b style=\"flex: auto; background-color: #ac604a;\"></b><b style=\"flex: auto; background-color: #bf2553;\"></b><b style=\"flex: auto; background-color: #a72e34;\"></b><b style=\"flex: auto; background-color: #8a6d25;\"></b><b style=\"flex: auto; background-color: #877f1d;\"></b><b style=\"flex: auto; background-color: #d1441a;\"></b><b style=\"flex: auto; background-color: #e77118;\"></b><b style=\"flex: auto; background-color: #ef5e12;\"></b></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "curve = HilbertCurve(8, 3)\n",
    "colors.sort(key=lambda rgb: curve.distance_from_coordinates([int(c * 255 + 0.5) for c in rgb]))\n",
    "HTML(toHTML(colors))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Hilbert Curve sorting in CIELAB color space"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"display: flex; flex-direction: row; width: 100%; height: 32px;\"><b style=\"flex: auto; background-color: #697473;\"></b><b style=\"flex: auto; background-color: #17635a;\"></b><b style=\"flex: auto; background-color: #6d6848;\"></b><b style=\"flex: auto; background-color: #118348;\"></b><b style=\"flex: auto; background-color: #5d6b2d;\"></b><b style=\"flex: auto; background-color: #717611;\"></b><b style=\"flex: auto; background-color: #391702;\"></b><b style=\"flex: auto; background-color: #40281c;\"></b><b style=\"flex: auto; background-color: #3e2828;\"></b><b style=\"flex: auto; background-color: #bf2553;\"></b><b style=\"flex: auto; background-color: #cd195c;\"></b><b style=\"flex: auto; background-color: #d1441a;\"></b><b style=\"flex: auto; background-color: #8a6d25;\"></b><b style=\"flex: auto; background-color: #ac604a;\"></b><b style=\"flex: auto; background-color: #a72e34;\"></b><b style=\"flex: auto; background-color: #49508f;\"></b><b style=\"flex: auto; background-color: #48347f;\"></b><b style=\"flex: auto; background-color: #110b25;\"></b><b style=\"flex: auto; background-color: #262961;\"></b><b style=\"flex: auto; background-color: #51113b;\"></b><b style=\"flex: auto; background-color: #791171;\"></b><b style=\"flex: auto; background-color: #c41975;\"></b><b style=\"flex: auto; background-color: #a12bb0;\"></b><b style=\"flex: auto; background-color: #6d51f6;\"></b><b style=\"flex: auto; background-color: #b301e0;\"></b><b style=\"flex: auto; background-color: #4b18f3;\"></b><b style=\"flex: auto; background-color: #8c02c4;\"></b><b style=\"flex: auto; background-color: #3e07ab;\"></b><b style=\"flex: auto; background-color: #1213af;\"></b><b style=\"flex: auto; background-color: #3809b6;\"></b><b style=\"flex: auto; background-color: #4d32b4;\"></b><b style=\"flex: auto; background-color: #373ab2;\"></b><b style=\"flex: auto; background-color: #014eaa;\"></b><b style=\"flex: auto; background-color: #4872cb;\"></b><b style=\"flex: auto; background-color: #6992f9;\"></b><b style=\"flex: auto; background-color: #2f83e5;\"></b><b style=\"flex: auto; background-color: #f41ae1;\"></b><b style=\"flex: auto; background-color: #fac0e4;\"></b><b style=\"flex: auto; background-color: #dacaf8;\"></b><b style=\"flex: auto; background-color: #fcc8e4;\"></b><b style=\"flex: auto; background-color: #c2bced;\"></b><b style=\"flex: auto; background-color: #beb5c9;\"></b><b style=\"flex: auto; background-color: #c1b3d0;\"></b><b style=\"flex: auto; background-color: #e089e5;\"></b><b style=\"flex: auto; background-color: #847ec8;\"></b><b style=\"flex: auto; background-color: #8c76dd;\"></b><b style=\"flex: auto; background-color: #8e6fd8;\"></b><b style=\"flex: auto; background-color: #c76b8d;\"></b><b style=\"flex: auto; background-color: #c4567a;\"></b><b style=\"flex: auto; background-color: #c56e74;\"></b><b style=\"flex: auto; background-color: #c79d6e;\"></b><b style=\"flex: auto; background-color: #e2944d;\"></b><b style=\"flex: auto; background-color: #df8d40;\"></b><b style=\"flex: auto; background-color: #e77118;\"></b><b style=\"flex: auto; background-color: #ef5e12;\"></b><b style=\"flex: auto; background-color: #ea0b63;\"></b><b style=\"flex: auto; background-color: #fbcf6b;\"></b><b style=\"flex: auto; background-color: #f3ba52;\"></b><b style=\"flex: auto; background-color: #6bdc9c;\"></b><b style=\"flex: auto; background-color: #aaeed2;\"></b><b style=\"flex: auto; background-color: #d4dd7c;\"></b><b style=\"flex: auto; background-color: #d3e3a3;\"></b><b style=\"flex: auto; background-color: #ded791;\"></b><b style=\"flex: auto; background-color: #f6e46b;\"></b><b style=\"flex: auto; background-color: #c9de63;\"></b><b style=\"flex: auto; background-color: #b5c749;\"></b><b style=\"flex: auto; background-color: #97a415;\"></b><b style=\"flex: auto; background-color: #877f1d;\"></b><b style=\"flex: auto; background-color: #4da015;\"></b><b style=\"flex: auto; background-color: #85c277;\"></b><b style=\"flex: auto; background-color: #b4b870;\"></b><b style=\"flex: auto; background-color: #aaa344;\"></b><b style=\"flex: auto; background-color: #729b48;\"></b><b style=\"flex: auto; background-color: #57862e;\"></b><b style=\"flex: auto; background-color: #258841;\"></b><b style=\"flex: auto; background-color: #44a56a;\"></b><b style=\"flex: auto; background-color: #478468;\"></b><b style=\"flex: auto; background-color: #55a482;\"></b><b style=\"flex: auto; background-color: #669065;\"></b><b style=\"flex: auto; background-color: #728480;\"></b><b style=\"flex: auto; background-color: #5d9b8d;\"></b><b style=\"flex: auto; background-color: #9eb382;\"></b><b style=\"flex: auto; background-color: #9cb690;\"></b><b style=\"flex: auto; background-color: #2e9830;\"></b><b style=\"flex: auto; background-color: #66ca37;\"></b><b style=\"flex: auto; background-color: #01cc36;\"></b><b style=\"flex: auto; background-color: #25a122;\"></b><b style=\"flex: auto; background-color: #6df26f;\"></b><b style=\"flex: auto; background-color: #11eb60;\"></b><b style=\"flex: auto; background-color: #70df72;\"></b><b style=\"flex: auto; background-color: #49fcd4;\"></b><b style=\"flex: auto; background-color: #9bfef3;\"></b><b style=\"flex: auto; background-color: #99d5fa;\"></b><b style=\"flex: auto; background-color: #18d2dd;\"></b><b style=\"flex: auto; background-color: #28b7b7;\"></b><b style=\"flex: auto; background-color: #3a979b;\"></b><b style=\"flex: auto; background-color: #399fd1;\"></b><b style=\"flex: auto; background-color: #1f9cd3;\"></b><b style=\"flex: auto; background-color: #129cde;\"></b><b style=\"flex: auto; background-color: #5faae1;\"></b></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "def toLab255(rgb):\n",
    "    (l, a, b) = cc.rgb2lab([[rgb]])[0][0]\n",
    "    return [int(l * 255 / 100 + 0.5), int((a + 100) * 255 / 200 + 0.5), int((b + 100) * 255 / 200 + 0.5)]\n",
    "\n",
    "\n",
    "curve = HilbertCurve(8, 3)\n",
    "colors.sort(key=lambda rgb: curve.distance_from_coordinates(toLab255(rgb)))\n",
    "HTML(toHTML(colors))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Nearest Neighbour sorting"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"display: flex; flex-direction: row; width: 100%; height: 32px;\"><b style=\"flex: auto; background-color: #9bfef3;\"></b><b style=\"flex: auto; background-color: #aaeed2;\"></b><b style=\"flex: auto; background-color: #99d5fa;\"></b><b style=\"flex: auto; background-color: #c2bced;\"></b><b style=\"flex: auto; background-color: #dacaf8;\"></b><b style=\"flex: auto; background-color: #fac0e4;\"></b><b style=\"flex: auto; background-color: #fcc8e4;\"></b><b style=\"flex: auto; background-color: #c1b3d0;\"></b><b style=\"flex: auto; background-color: #beb5c9;\"></b><b style=\"flex: auto; background-color: #e089e5;\"></b><b style=\"flex: auto; background-color: #8c76dd;\"></b><b style=\"flex: auto; background-color: #8e6fd8;\"></b><b style=\"flex: auto; background-color: #847ec8;\"></b><b style=\"flex: auto; background-color: #6992f9;\"></b><b style=\"flex: auto; background-color: #5faae1;\"></b><b style=\"flex: auto; background-color: #399fd1;\"></b><b style=\"flex: auto; background-color: #1f9cd3;\"></b><b style=\"flex: auto; background-color: #129cde;\"></b><b style=\"flex: auto; background-color: #2f83e5;\"></b><b style=\"flex: auto; background-color: #4872cb;\"></b><b style=\"flex: auto; background-color: #3a979b;\"></b><b style=\"flex: auto; background-color: #5d9b8d;\"></b><b style=\"flex: auto; background-color: #55a482;\"></b><b style=\"flex: auto; background-color: #44a56a;\"></b><b style=\"flex: auto; background-color: #478468;\"></b><b style=\"flex: auto; background-color: #669065;\"></b><b style=\"flex: auto; background-color: #697473;\"></b><b style=\"flex: auto; background-color: #728480;\"></b><b style=\"flex: auto; background-color: #729b48;\"></b><b style=\"flex: auto; background-color: #57862e;\"></b><b style=\"flex: auto; background-color: #5d6b2d;\"></b><b style=\"flex: auto; background-color: #6d6848;\"></b><b style=\"flex: auto; background-color: #8a6d25;\"></b><b style=\"flex: auto; background-color: #877f1d;\"></b><b style=\"flex: auto; background-color: #717611;\"></b><b style=\"flex: auto; background-color: #4da015;\"></b><b style=\"flex: auto; background-color: #25a122;\"></b><b style=\"flex: auto; background-color: #2e9830;\"></b><b style=\"flex: auto; background-color: #258841;\"></b><b style=\"flex: auto; background-color: #118348;\"></b><b style=\"flex: auto; background-color: #17635a;\"></b><b style=\"flex: auto; background-color: #262961;\"></b><b style=\"flex: auto; background-color: #48347f;\"></b><b style=\"flex: auto; background-color: #49508f;\"></b><b style=\"flex: auto; background-color: #373ab2;\"></b><b style=\"flex: auto; background-color: #4d32b4;\"></b><b style=\"flex: auto; background-color: #3e07ab;\"></b><b style=\"flex: auto; background-color: #3809b6;\"></b><b style=\"flex: auto; background-color: #1213af;\"></b><b style=\"flex: auto; background-color: #014eaa;\"></b><b style=\"flex: auto; background-color: #28b7b7;\"></b><b style=\"flex: auto; background-color: #18d2dd;\"></b><b style=\"flex: auto; background-color: #49fcd4;\"></b><b style=\"flex: auto; background-color: #6bdc9c;\"></b><b style=\"flex: auto; background-color: #70df72;\"></b><b style=\"flex: auto; background-color: #6df26f;\"></b><b style=\"flex: auto; background-color: #85c277;\"></b><b style=\"flex: auto; background-color: #9eb382;\"></b><b style=\"flex: auto; background-color: #9cb690;\"></b><b style=\"flex: auto; background-color: #b4b870;\"></b><b style=\"flex: auto; background-color: #c79d6e;\"></b><b style=\"flex: auto; background-color: #e2944d;\"></b><b style=\"flex: auto; background-color: #df8d40;\"></b><b style=\"flex: auto; background-color: #e77118;\"></b><b style=\"flex: auto; background-color: #ef5e12;\"></b><b style=\"flex: auto; background-color: #d1441a;\"></b><b style=\"flex: auto; background-color: #a72e34;\"></b><b style=\"flex: auto; background-color: #bf2553;\"></b><b style=\"flex: auto; background-color: #cd195c;\"></b><b style=\"flex: auto; background-color: #c41975;\"></b><b style=\"flex: auto; background-color: #ea0b63;\"></b><b style=\"flex: auto; background-color: #c4567a;\"></b><b style=\"flex: auto; background-color: #c56e74;\"></b><b style=\"flex: auto; background-color: #c76b8d;\"></b><b style=\"flex: auto; background-color: #ac604a;\"></b><b style=\"flex: auto; background-color: #aaa344;\"></b><b style=\"flex: auto; background-color: #b5c749;\"></b><b style=\"flex: auto; background-color: #c9de63;\"></b><b style=\"flex: auto; background-color: #d4dd7c;\"></b><b style=\"flex: auto; background-color: #ded791;\"></b><b style=\"flex: auto; background-color: #d3e3a3;\"></b><b style=\"flex: auto; background-color: #f6e46b;\"></b><b style=\"flex: auto; background-color: #fbcf6b;\"></b><b style=\"flex: auto; background-color: #f3ba52;\"></b><b style=\"flex: auto; background-color: #97a415;\"></b><b style=\"flex: auto; background-color: #66ca37;\"></b><b style=\"flex: auto; background-color: #11eb60;\"></b><b style=\"flex: auto; background-color: #01cc36;\"></b><b style=\"flex: auto; background-color: #3e2828;\"></b><b style=\"flex: auto; background-color: #40281c;\"></b><b style=\"flex: auto; background-color: #391702;\"></b><b style=\"flex: auto; background-color: #110b25;\"></b><b style=\"flex: auto; background-color: #51113b;\"></b><b style=\"flex: auto; background-color: #791171;\"></b><b style=\"flex: auto; background-color: #a12bb0;\"></b><b style=\"flex: auto; background-color: #8c02c4;\"></b><b style=\"flex: auto; background-color: #b301e0;\"></b><b style=\"flex: auto; background-color: #f41ae1;\"></b><b style=\"flex: auto; background-color: #6d51f6;\"></b><b style=\"flex: auto; background-color: #4b18f3;\"></b></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "def NN(A, start):\n",
    "    \"\"\"Nearest neighbor algorithm.\n",
    "    A is an NxN array indicating distance between N locations\n",
    "    start is the index of the starting location\n",
    "    Returns the path and cost of the found solution\n",
    "    \"\"\"\n",
    "    path = [start]\n",
    "    cost = 0\n",
    "    N = A.shape[0]\n",
    "    mask = np.ones(N, dtype=bool)  # boolean values indicating which\n",
    "    # locations have not been visited\n",
    "    mask[start] = False\n",
    "    for i in range(N - 1):\n",
    "        last = path[-1]\n",
    "        next_ind = np.argmin(A[last][mask])  # find minimum of remaining locations\n",
    "        next_loc = np.arange(N)[mask][next_ind]  # convert to original location\n",
    "        path.append(next_loc)\n",
    "        mask[next_loc] = False\n",
    "        cost += A[last, next_loc]\n",
    "    return path, cost\n",
    "\n",
    "\n",
    "A = np.empty([len(colors), len(colors)])  # Distance matrix\n",
    "for x in range(0, len(colors)):\n",
    "    for y in range(0, len(colors)):\n",
    "        A[x, y] = distance.euclidean(colors[x], colors[y])\n",
    "\n",
    "# Nearest neighbour algorithm starting with the brightest color\n",
    "path, _ = NN(A, colors.index(max(colors, key=lambda rgb: lum(*rgb))))\n",
    "\n",
    "colors = [colors[i] for i in path]\n",
    "HTML(toHTML(colors))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Travelling Salesman sorting"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"display: flex; flex-direction: row; width: 100%; height: 32px;\"><b style=\"flex: auto; background-color: #01cc36;\"></b><b style=\"flex: auto; background-color: #11eb60;\"></b><b style=\"flex: auto; background-color: #66ca37;\"></b><b style=\"flex: auto; background-color: #729b48;\"></b><b style=\"flex: auto; background-color: #669065;\"></b><b style=\"flex: auto; background-color: #697473;\"></b><b style=\"flex: auto; background-color: #728480;\"></b><b style=\"flex: auto; background-color: #478468;\"></b><b style=\"flex: auto; background-color: #44a56a;\"></b><b style=\"flex: auto; background-color: #55a482;\"></b><b style=\"flex: auto; background-color: #5d9b8d;\"></b><b style=\"flex: auto; background-color: #3a979b;\"></b><b style=\"flex: auto; background-color: #28b7b7;\"></b><b style=\"flex: auto; background-color: #18d2dd;\"></b><b style=\"flex: auto; background-color: #129cde;\"></b><b style=\"flex: auto; background-color: #1f9cd3;\"></b><b style=\"flex: auto; background-color: #399fd1;\"></b><b style=\"flex: auto; background-color: #2f83e5;\"></b><b style=\"flex: auto; background-color: #4872cb;\"></b><b style=\"flex: auto; background-color: #5faae1;\"></b><b style=\"flex: auto; background-color: #6992f9;\"></b><b style=\"flex: auto; background-color: #847ec8;\"></b><b style=\"flex: auto; background-color: #8c76dd;\"></b><b style=\"flex: auto; background-color: #8e6fd8;\"></b><b style=\"flex: auto; background-color: #6d51f6;\"></b><b style=\"flex: auto; background-color: #4b18f3;\"></b><b style=\"flex: auto; background-color: #3e07ab;\"></b><b style=\"flex: auto; background-color: #3809b6;\"></b><b style=\"flex: auto; background-color: #1213af;\"></b><b style=\"flex: auto; background-color: #014eaa;\"></b><b style=\"flex: auto; background-color: #4d32b4;\"></b><b style=\"flex: auto; background-color: #373ab2;\"></b><b style=\"flex: auto; background-color: #49508f;\"></b><b style=\"flex: auto; background-color: #48347f;\"></b><b style=\"flex: auto; background-color: #262961;\"></b><b style=\"flex: auto; background-color: #17635a;\"></b><b style=\"flex: auto; background-color: #118348;\"></b><b style=\"flex: auto; background-color: #258841;\"></b><b style=\"flex: auto; background-color: #2e9830;\"></b><b style=\"flex: auto; background-color: #25a122;\"></b><b style=\"flex: auto; background-color: #4da015;\"></b><b style=\"flex: auto; background-color: #57862e;\"></b><b style=\"flex: auto; background-color: #5d6b2d;\"></b><b style=\"flex: auto; background-color: #6d6848;\"></b><b style=\"flex: auto; background-color: #8a6d25;\"></b><b style=\"flex: auto; background-color: #877f1d;\"></b><b style=\"flex: auto; background-color: #717611;\"></b><b style=\"flex: auto; background-color: #97a415;\"></b><b style=\"flex: auto; background-color: #aaa344;\"></b><b style=\"flex: auto; background-color: #b5c749;\"></b><b style=\"flex: auto; background-color: #c9de63;\"></b><b style=\"flex: auto; background-color: #d4dd7c;\"></b><b style=\"flex: auto; background-color: #f6e46b;\"></b><b style=\"flex: auto; background-color: #fbcf6b;\"></b><b style=\"flex: auto; background-color: #f3ba52;\"></b><b style=\"flex: auto; background-color: #e2944d;\"></b><b style=\"flex: auto; background-color: #df8d40;\"></b><b style=\"flex: auto; background-color: #e77118;\"></b><b style=\"flex: auto; background-color: #ef5e12;\"></b><b style=\"flex: auto; background-color: #d1441a;\"></b><b style=\"flex: auto; background-color: #ea0b63;\"></b><b style=\"flex: auto; background-color: #c41975;\"></b><b style=\"flex: auto; background-color: #cd195c;\"></b><b style=\"flex: auto; background-color: #bf2553;\"></b><b style=\"flex: auto; background-color: #a72e34;\"></b><b style=\"flex: auto; background-color: #ac604a;\"></b><b style=\"flex: auto; background-color: #c4567a;\"></b><b style=\"flex: auto; background-color: #c56e74;\"></b><b style=\"flex: auto; background-color: #c76b8d;\"></b><b style=\"flex: auto; background-color: #c79d6e;\"></b><b style=\"flex: auto; background-color: #b4b870;\"></b><b style=\"flex: auto; background-color: #9eb382;\"></b><b style=\"flex: auto; background-color: #9cb690;\"></b><b style=\"flex: auto; background-color: #85c277;\"></b><b style=\"flex: auto; background-color: #70df72;\"></b><b style=\"flex: auto; background-color: #6df26f;\"></b><b style=\"flex: auto; background-color: #6bdc9c;\"></b><b style=\"flex: auto; background-color: #49fcd4;\"></b><b style=\"flex: auto; background-color: #99d5fa;\"></b><b style=\"flex: auto; background-color: #9bfef3;\"></b><b style=\"flex: auto; background-color: #aaeed2;\"></b><b style=\"flex: auto; background-color: #d3e3a3;\"></b><b style=\"flex: auto; background-color: #ded791;\"></b><b style=\"flex: auto; background-color: #beb5c9;\"></b><b style=\"flex: auto; background-color: #c1b3d0;\"></b><b style=\"flex: auto; background-color: #c2bced;\"></b><b style=\"flex: auto; background-color: #dacaf8;\"></b><b style=\"flex: auto; background-color: #fac0e4;\"></b><b style=\"flex: auto; background-color: #fcc8e4;\"></b><b style=\"flex: auto; background-color: #e089e5;\"></b><b style=\"flex: auto; background-color: #f41ae1;\"></b><b style=\"flex: auto; background-color: #b301e0;\"></b><b style=\"flex: auto; background-color: #8c02c4;\"></b><b style=\"flex: auto; background-color: #a12bb0;\"></b><b style=\"flex: auto; background-color: #791171;\"></b><b style=\"flex: auto; background-color: #51113b;\"></b><b style=\"flex: auto; background-color: #3e2828;\"></b><b style=\"flex: auto; background-color: #40281c;\"></b><b style=\"flex: auto; background-color: #391702;\"></b><b style=\"flex: auto; background-color: #110b25;\"></b></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 11,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "colors.sort(key=lambda rgb: colorsys.rgb_to_hsv(*rgb))  # Initial sort\n",
    "A = [[distance.euclidean(cx, cy) for cx in colors] for cy in colors]\n",
    "path = solve_tsp(A)\n",
    "\n",
    "colors = [colors[i] for i in path]\n",
    "HTML(toHTML(colors))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Travelling Salesman sorting in CIELAB color space"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"display: flex; flex-direction: row; width: 100%; height: 32px;\"><b style=\"flex: auto; background-color: #70df72;\"></b><b style=\"flex: auto; background-color: #6df26f;\"></b><b style=\"flex: auto; background-color: #11eb60;\"></b><b style=\"flex: auto; background-color: #01cc36;\"></b><b style=\"flex: auto; background-color: #66ca37;\"></b><b style=\"flex: auto; background-color: #4da015;\"></b><b style=\"flex: auto; background-color: #25a122;\"></b><b style=\"flex: auto; background-color: #2e9830;\"></b><b style=\"flex: auto; background-color: #258841;\"></b><b style=\"flex: auto; background-color: #118348;\"></b><b style=\"flex: auto; background-color: #44a56a;\"></b><b style=\"flex: auto; background-color: #49fcd4;\"></b><b style=\"flex: auto; background-color: #6bdc9c;\"></b><b style=\"flex: auto; background-color: #85c277;\"></b><b style=\"flex: auto; background-color: #729b48;\"></b><b style=\"flex: auto; background-color: #57862e;\"></b><b style=\"flex: auto; background-color: #5d6b2d;\"></b><b style=\"flex: auto; background-color: #6d6848;\"></b><b style=\"flex: auto; background-color: #697473;\"></b><b style=\"flex: auto; background-color: #728480;\"></b><b style=\"flex: auto; background-color: #17635a;\"></b><b style=\"flex: auto; background-color: #478468;\"></b><b style=\"flex: auto; background-color: #669065;\"></b><b style=\"flex: auto; background-color: #55a482;\"></b><b style=\"flex: auto; background-color: #5d9b8d;\"></b><b style=\"flex: auto; background-color: #3a979b;\"></b><b style=\"flex: auto; background-color: #28b7b7;\"></b><b style=\"flex: auto; background-color: #18d2dd;\"></b><b style=\"flex: auto; background-color: #9bfef3;\"></b><b style=\"flex: auto; background-color: #aaeed2;\"></b><b style=\"flex: auto; background-color: #d3e3a3;\"></b><b style=\"flex: auto; background-color: #ded791;\"></b><b style=\"flex: auto; background-color: #b4b870;\"></b><b style=\"flex: auto; background-color: #9eb382;\"></b><b style=\"flex: auto; background-color: #9cb690;\"></b><b style=\"flex: auto; background-color: #c79d6e;\"></b><b style=\"flex: auto; background-color: #8a6d25;\"></b><b style=\"flex: auto; background-color: #717611;\"></b><b style=\"flex: auto; background-color: #877f1d;\"></b><b style=\"flex: auto; background-color: #aaa344;\"></b><b style=\"flex: auto; background-color: #97a415;\"></b><b style=\"flex: auto; background-color: #b5c749;\"></b><b style=\"flex: auto; background-color: #c9de63;\"></b><b style=\"flex: auto; background-color: #d4dd7c;\"></b><b style=\"flex: auto; background-color: #f6e46b;\"></b><b style=\"flex: auto; background-color: #fbcf6b;\"></b><b style=\"flex: auto; background-color: #f3ba52;\"></b><b style=\"flex: auto; background-color: #e2944d;\"></b><b style=\"flex: auto; background-color: #df8d40;\"></b><b style=\"flex: auto; background-color: #e77118;\"></b><b style=\"flex: auto; background-color: #ef5e12;\"></b><b style=\"flex: auto; background-color: #d1441a;\"></b><b style=\"flex: auto; background-color: #ea0b63;\"></b><b style=\"flex: auto; background-color: #cd195c;\"></b><b style=\"flex: auto; background-color: #bf2553;\"></b><b style=\"flex: auto; background-color: #a72e34;\"></b><b style=\"flex: auto; background-color: #ac604a;\"></b><b style=\"flex: auto; background-color: #c56e74;\"></b><b style=\"flex: auto; background-color: #c76b8d;\"></b><b style=\"flex: auto; background-color: #c4567a;\"></b><b style=\"flex: auto; background-color: #c41975;\"></b><b style=\"flex: auto; background-color: #f41ae1;\"></b><b style=\"flex: auto; background-color: #b301e0;\"></b><b style=\"flex: auto; background-color: #8c02c4;\"></b><b style=\"flex: auto; background-color: #a12bb0;\"></b><b style=\"flex: auto; background-color: #791171;\"></b><b style=\"flex: auto; background-color: #51113b;\"></b><b style=\"flex: auto; background-color: #391702;\"></b><b style=\"flex: auto; background-color: #40281c;\"></b><b style=\"flex: auto; background-color: #3e2828;\"></b><b style=\"flex: auto; background-color: #110b25;\"></b><b style=\"flex: auto; background-color: #262961;\"></b><b style=\"flex: auto; background-color: #48347f;\"></b><b style=\"flex: auto; background-color: #49508f;\"></b><b style=\"flex: auto; background-color: #847ec8;\"></b><b style=\"flex: auto; background-color: #8c76dd;\"></b><b style=\"flex: auto; background-color: #8e6fd8;\"></b><b style=\"flex: auto; background-color: #e089e5;\"></b><b style=\"flex: auto; background-color: #fcc8e4;\"></b><b style=\"flex: auto; background-color: #fac0e4;\"></b><b style=\"flex: auto; background-color: #dacaf8;\"></b><b style=\"flex: auto; background-color: #c2bced;\"></b><b style=\"flex: auto; background-color: #c1b3d0;\"></b><b style=\"flex: auto; background-color: #beb5c9;\"></b><b style=\"flex: auto; background-color: #99d5fa;\"></b><b style=\"flex: auto; background-color: #5faae1;\"></b><b style=\"flex: auto; background-color: #399fd1;\"></b><b style=\"flex: auto; background-color: #1f9cd3;\"></b><b style=\"flex: auto; background-color: #129cde;\"></b><b style=\"flex: auto; background-color: #6992f9;\"></b><b style=\"flex: auto; background-color: #2f83e5;\"></b><b style=\"flex: auto; background-color: #4872cb;\"></b><b style=\"flex: auto; background-color: #014eaa;\"></b><b style=\"flex: auto; background-color: #373ab2;\"></b><b style=\"flex: auto; background-color: #4d32b4;\"></b><b style=\"flex: auto; background-color: #3e07ab;\"></b><b style=\"flex: auto; background-color: #3809b6;\"></b><b style=\"flex: auto; background-color: #1213af;\"></b><b style=\"flex: auto; background-color: #6d51f6;\"></b><b style=\"flex: auto; background-color: #4b18f3;\"></b></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "colors.sort(key=lambda rgb: colorsys.rgb_to_hsv(*rgb))  # Initial sort\n",
    "lab = cc.rgb2lab([colors])[0]\n",
    "A = [[distance.euclidean(cx, cy) for cx in lab] for cy in lab]\n",
    "path = solve_tsp(A)\n",
    "\n",
    "colors = [colors[i] for i in path]\n",
    "HTML(toHTML(colors))"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
 }