├── .gitignore ├── colors.js ├── css-colours.js ├── index.html ├── package-lock.json ├── package.json ├── readme.md └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | .DS_Store 3 | node_modules/ 4 | .cache/ 5 | haters/ 6 | -------------------------------------------------------------------------------- /colors.js: -------------------------------------------------------------------------------- 1 | import hexToHSL from 'hex-to-hsl'; 2 | 3 | export const colors = { 4 | black: '#000000', 5 | silver: '#C0C0C0', 6 | gray: '#808080', 7 | grey: '#808080', 8 | white: '#FFFFFF', 9 | maroon: '#800000', 10 | red: '#FF0000', 11 | purple: '#800080', 12 | fuchsia: '#FF00FF', 13 | green: '#008000', 14 | lime: '#00FF00', 15 | olive: '#808000', 16 | yellow: '#FFFF00', 17 | navy: '#000080', 18 | blue: '#0000FF', 19 | teal: '#008080', 20 | aqua: '#00FFFF', 21 | darkblue: '#00008B', 22 | mediumblue: '#0000CD', 23 | darkgreen: '#006400', 24 | darkcyan: '#008B8B', 25 | deepskyblue: '#00BFFF', 26 | darkturquoise: '#00CED1', 27 | mediumspringgreen: '#00FA9A', 28 | springgreen: '#00FF7F', 29 | cyan: '#00FFFF', 30 | midnightblue: '#191970', 31 | dodgerblue: '#1E90FF', 32 | lightseagreen: '#20B2AA', 33 | forestgreen: '#228B22', 34 | seagreen: '#2E8B57', 35 | darkslategray: '#2F4F4F', 36 | darkslategrey: '#2F4F4F', 37 | limegreen: '#32CD32', 38 | mediumseagreen: '#3CB371', 39 | turquoise: '#40E0D0', 40 | royalblue: '#4169E1', 41 | steelblue: '#4682B4', 42 | darkslateblue: '#483D8B', 43 | mediumturquoise: '#48D1CC', 44 | indigo: '#4B0082', 45 | darkolivegreen: '#556B2F', 46 | cadetblue: '#5F9EA0', 47 | cornflowerblue: '#6495ED', 48 | rebeccapurple: '#663399', 49 | mediumaquamarine: '#66CDAA', 50 | dimgray: '#696969', 51 | dimgrey: '#696969', 52 | slateblue: '#6A5ACD', 53 | olivedrab: '#6B8E23', 54 | slategray: '#708090', 55 | slategrey: '#708090', 56 | lightslategray: '#778899', 57 | lightslategrey: '#778899', 58 | mediumslateblue: '#7B68EE', 59 | lawngreen: '#7CFC00', 60 | chartreuse: '#7FFF00', 61 | aquamarine: '#7FFFD4', 62 | skyblue: '#87CEEB', 63 | lightskyblue: '#87CEFA', 64 | blueviolet: '#8A2BE2', 65 | darkred: '#8B0000', 66 | darkmagenta: '#8B008B', 67 | saddlebrown: '#8B4513', 68 | darkseagreen: '#8FBC8F', 69 | lightgreen: '#90EE90', 70 | mediumpurple: '#9370DB', 71 | darkviolet: '#9400D3', 72 | palegreen: '#98FB98', 73 | darkorchid: '#9932CC', 74 | yellowgreen: '#9ACD32', 75 | sienna: '#A0522D', 76 | brown: '#A52A2A', 77 | darkgray: '#A9A9A9', 78 | darkgrey: '#A9A9A9', 79 | lightblue: '#ADD8E6', 80 | greenyellow: '#ADFF2F', 81 | paleturquoise: '#AFEEEE', 82 | lightsteelblue: '#B0C4DE', 83 | powderblue: '#B0E0E6', 84 | firebrick: '#B22222', 85 | darkgoldenrod: '#B8860B', 86 | mediumorchid: '#BA55D3', 87 | rosybrown: '#BC8F8F', 88 | darkkhaki: '#BDB76B', 89 | mediumvioletred: '#C71585', 90 | indianred: '#CD5C5C', 91 | peru: '#CD853F', 92 | chocolate: '#D2691E', 93 | tan: '#D2B48C', 94 | lightgray: '#D3D3D3', 95 | lightgrey: '#D3D3D3', 96 | thistle: '#D8BFD8', 97 | orchid: '#DA70D6', 98 | goldenrod: '#DAA520', 99 | palevioletred: '#DB7093', 100 | crimson: '#DC143C', 101 | gainsboro: '#DCDCDC', 102 | plum: '#DDA0DD', 103 | burlywood: '#DEB887', 104 | lightcyan: '#E0FFFF', 105 | lavender: '#E6E6FA', 106 | darksalmon: '#E9967A', 107 | violet: '#EE82EE', 108 | palegoldenrod: '#EEE8AA', 109 | lightcoral: '#F08080', 110 | khaki: '#F0E68C', 111 | aliceblue: '#F0F8FF', 112 | honeydew: '#F0FFF0', 113 | azure: '#F0FFFF', 114 | sandybrown: '#F4A460', 115 | wheat: '#F5DEB3', 116 | beige: '#F5F5DC', 117 | whitesmoke: '#F5F5F5', 118 | mintcream: '#F5FFFA', 119 | ghostwhite: '#F8F8FF', 120 | salmon: '#FA8072', 121 | antiquewhite: '#FAEBD7', 122 | linen: '#FAF0E6', 123 | lightgoldenrodyellow: '#FAFAD2', 124 | oldlace: '#FDF5E6', 125 | magenta: '#FF00FF', 126 | deeppink: '#FF1493', 127 | orangered: '#FF4500', 128 | tomato: '#FF6347', 129 | hotpink: '#FF69B4', 130 | coral: '#FF7F50', 131 | darkorange: '#FF8C00', 132 | lightsalmon: '#FFA07A', 133 | orange: '#FFA500', 134 | lightpink: '#FFB6C1', 135 | pink: '#FFC0CB', 136 | gold: '#FFD700', 137 | peachpuff: '#FFDAB9', 138 | navajowhite: '#FFDEAD', 139 | moccasin: '#FFE4B5', 140 | bisque: '#FFE4C4', 141 | mistyrose: '#FFE4E1', 142 | blanchedalmond: '#FFEBCD', 143 | papayawhip: '#FFEFD5', 144 | lavenderblush: '#FFF0F5', 145 | seashell: '#FFF5EE', 146 | cornsilk: '#FFF8DC', 147 | lemonchiffon: '#FFFACD', 148 | floralwhite: '#FFFAF0', 149 | snow: '#FFFAFA', 150 | lightyellow: '#FFFFE0', 151 | ivory: '#FFFFF0', 152 | }; 153 | 154 | export function complementaryColor(colorName) { 155 | // first find the hex for that color name 156 | const hex = colors[colorName]; 157 | // first convert the color the hsl 158 | const [h, s, l] = hexToHSL(hex); 159 | // then return that hsl, but complimentary 160 | return [h + 180, `${s}%`, `${l}%`]; 161 | } 162 | 163 | export function isDark(colorName) { 164 | const hex = colors[colorName].substring(1, 7); 165 | const r = parseInt(hex.substring(0, 2), 16); 166 | const g = parseInt(hex.substring(2, 4), 16); 167 | const b = parseInt(hex.substring(4, 6), 16); 168 | return r * 0.299 + g * 0.587 + b * 0.114 < 120; 169 | } 170 | 171 | export function isValidColor(word) { 172 | return !!colors[word]; 173 | } 174 | 175 | function countVowels(word) { 176 | let count = [...word].filter((letter, i) => ['a', 'e', 'i', 'o', 'u'].includes(letter)).length; 177 | if (word[word.length - 1] === 'y') { 178 | count++; 179 | } 180 | return count; 181 | } 182 | 183 | const colorsArray = Object.entries(colors).reduce((acc, [name, hex]) => { 184 | const colorObject = { 185 | name, 186 | hex, 187 | hsl: hexToHSL(hex), 188 | isDark: isDark(name), 189 | vowels: countVowels(name) 190 | } 191 | return [...acc, colorObject]; 192 | }, []) 193 | 194 | export const colorsByLength = [...colorsArray].sort((a, b) => a.name.length - b.name.length); 195 | export const colorsByHue = [...colorsArray].sort((a, b) => b.hsl[0] - a.hsl[0]); 196 | export const colorsBySaturation = [...colorsArray].sort((a, b) => b.hsl[1] - a.hsl[1]); 197 | export const colorsByLightness = [...colorsArray].sort((a, b) => b.hsl[2] - a.hsl[2]); 198 | export const colorsByAll = [...colorsArray].sort((a, b) => b.hsl[0] - a.hsl[0]).sort((a, b) => b.hsl[1] - a.hsl[1]).sort((a, b) => b.hsl[2] - a.hsl[2]); 199 | export const colorsByVowels = [...colorsArray].sort((a, b) => b.vowels - a.vowels); 200 | 201 | -------------------------------------------------------------------------------- /css-colours.js: -------------------------------------------------------------------------------- 1 | import { colorsByLength, isValidColor, isDark, colorsByHue, colorsBySaturation, colorsByLightness, colorsByAll, colorsByVowels } from './colors'; 2 | 3 | function displayColoursBy(colorsToDisplay, el, toShow = 'hsl') { 4 | const spans = colorsToDisplay 5 | .map( 6 | color => 7 | `${color.name.toUpperCase()}
${color[toShow]}` 10 | ) 11 | .join(''); 12 | el.innerHTML = spans; 13 | } 14 | 15 | function displayGradient(colorsToDisplay, el, toShow = 'hsl') { 16 | const spans = colorsToDisplay 17 | .map( 18 | (color, i) => { 19 | const lastColor = i > 0 ? colorsToDisplay[i - 1] : color; 20 | return `${color.name.toUpperCase()}
${color[toShow].join('/')}` 23 | } 24 | ) 25 | .join(''); 26 | el.innerHTML = spans; 27 | } 28 | 29 | // displayColours(); 30 | displayColoursBy(colorsByLength, document.querySelector('.by-length')); 31 | displayColoursBy(colorsByHue, document.querySelector('.by-hue')); 32 | displayColoursBy(colorsBySaturation, document.querySelector('.by-saturation')); 33 | displayColoursBy(colorsByLightness, document.querySelector('.by-lightness')); 34 | displayColoursBy(colorsByAll, document.querySelector('.by-all')); 35 | displayGradient(colorsByVowels, document.querySelector('.by-gradient')); 36 | displayColoursBy(colorsByVowels, document.querySelector('.by-vowels'), 'vowels'); 37 | 38 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Colours Sorted 6 | 7 | 8 | 9 | 10 | 11 |

CSS Colours By Length

12 |
13 |

CSS Colours By Hue

14 |
15 |

CSS Colours By Saturation

16 |
17 |

CSS Colours By lightness

18 |
19 |

CSS Colours By HSL

20 |
21 |

CSS Colours By Gradient

22 |
23 |

CSS Colours By Vowels

24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "colors-sorted", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "colors.js", 6 | "scripts": { 7 | "start": "parcel index.html" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "hex-to-hsl": "^1.0.2", 13 | "parcel-bundler": "^1.12.3" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # CSS Colours Sorted By ____ 2 | 3 | This is a fun way to trick you into learning JavaScript's map/filter/reduce along with some other neat things. 4 | 5 | Clone it, then `npm install`, then `npm start`. 6 | 7 | ![](https://wes.io/7814d5756242/content) 8 | 9 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | transition: background-color 0.4s; 3 | font-family: sans-serif; 4 | text-align: center; 5 | } 6 | 7 | h1 { 8 | font-size: 10rem; 9 | margin: 5rem 0 0 0; 10 | transition: all 0.4s; 11 | position: relative; 12 | color: rgba(0, 0, 0, 0.4); 13 | } 14 | 15 | .colors { 16 | display: flex; 17 | flex-wrap: wrap; 18 | margin: 5rem; 19 | } 20 | 21 | .colors span { 22 | color: rgba(0, 0, 0, 0.4); 23 | flex:1; 24 | padding: 1rem; 25 | font-weight: 900; 26 | } 27 | 28 | .colors span.dark { 29 | color: rgba(255, 255, 255, 0.75); 30 | } 31 | 32 | @keyframes jump { 33 | from { 34 | transform: scale(2.5) rotate(-3deg); 35 | box-shadow: var(--box-shadow); 36 | } 37 | to { 38 | transform: scale(1) rotate(0); 39 | } 40 | } 41 | 42 | .colors span.got { 43 | text-decoration: line-through; 44 | animation: jump 0.2s ease-in-out 2 alternate-reverse; 45 | } 46 | 47 | 48 | /* Some other CSS from my JS course. Doesn't mean anything */ 49 | 50 | /* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none} 51 | 52 | 53 | 54 | /* Variables */ 55 | html { 56 | --grey: #e7e7e7; 57 | --gray: var(--grey); 58 | --blue: #0072B9; 59 | --pink: #D60087; 60 | --yellow: #ffc600; 61 | --black: #2e2e2e; 62 | --red: #c73737; 63 | --green: #61e846; 64 | --text-shadow: 2px 2px 0 rgba(0,0,0,0.2); 65 | --box-shadow: 0 0 5px 5px rgba(0,0,0,0.2); 66 | font-size: 62.5%; 67 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 68 | box-sizing: border-box; 69 | } 70 | 71 | *, *:before, *:after { 72 | box-sizing: inherit; 73 | } 74 | 75 | body { 76 | font-size: 2rem; 77 | line-height: 1.5; 78 | background-color: var(--blue); 79 | background-image: url("data:image/svg+xml,%3Csvg width='20' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 21.184c.13.357.264.72.402 1.088l.661 1.768C4.653 33.64 6 39.647 6 50c0 10.271-1.222 15.362-4.928 24.629-.383.955-.74 1.869-1.072 2.75v6.225c.73-2.51 1.691-5.139 2.928-8.233C6.722 65.888 8 60.562 8 50c0-10.626-1.397-16.855-5.063-26.66l-.662-1.767C1.352 19.098.601 16.913 0 14.85v6.335zm20 0C17.108 13.258 16 8.077 16 0h2c0 5.744.574 9.951 2 14.85v6.334zm0 56.195c-2.966 7.86-4 13.123-4 22.621h2c0-6.842.542-11.386 2-16.396v-6.225zM6 0c0 8.44 1.21 13.718 4.402 22.272l.661 1.768C14.653 33.64 16 39.647 16 50c0 10.271-1.222 15.362-4.928 24.629C7.278 84.112 6 89.438 6 100h2c0-10.271 1.222-15.362 4.928-24.629C16.722 65.888 18 60.562 18 50c0-10.626-1.397-16.855-5.063-26.66l-.662-1.767C9.16 13.223 8 8.163 8 0H6z' fill='%23fff' fill-rule='nonzero' fill-opacity='.1' opacity='.349'/%3E%3C/svg%3E%0A"); 80 | background-size: 15px; 81 | } 82 | 83 | 84 | /* Table Styles */ 85 | 86 | table { 87 | border-radius: 5px; 88 | overflow: hidden; 89 | margin-bottom: 2rem; 90 | border-collapse: collapse; 91 | } 92 | 93 | td, th { 94 | border: 1px solid var(--grey); 95 | padding: 0.5rem; 96 | } 97 | 98 | 99 | /* Helper Divs */ 100 | 101 | .wrapper { 102 | max-width: 1000px; 103 | margin: 4rem auto; 104 | padding: 2rem; 105 | background: white; 106 | } 107 | 108 | .box, .wrapper { 109 | box-shadow: 0 0 3px 5px rgba(0,0,0,0.08653); 110 | } 111 | a { 112 | color: var(--blue); 113 | text-decoration-color: var(--yellow); 114 | } 115 | 116 | 117 | a.button, button, input[type="button"] { 118 | color: white; 119 | background: var(--pink); 120 | padding: 1rem; 121 | border: 0; 122 | border: 2px solid transparent; 123 | text-decoration: none; 124 | font-weight: 600; 125 | font-size:2rem; 126 | } 127 | 128 | :focus { 129 | outline-color: var(--pink); 130 | } 131 | 132 | fieldset { 133 | border: 1px solid black; 134 | } 135 | 136 | input:not([type="checkbox"]):not([type="radio"]), textarea, select { 137 | display: block; 138 | padding: 1rem; 139 | border: 1px solid var(--grey); 140 | } 141 | 142 | .success { 143 | border: 1px solid red; 144 | } 145 | 146 | h1, 147 | h2, 148 | h3, 149 | h4, 150 | h5, 151 | h6 { 152 | color: white; 153 | margin-top: 0; 154 | line-height: 1; 155 | text-shadow: var(--text-shadow); 156 | } 157 | .wrapper h1, 158 | .wrapper h2, 159 | .wrapper h3, 160 | .wrapper h4, 161 | .wrapper h5, 162 | .wrapper h6 { 163 | color: var(--black); 164 | text-shadow: none; 165 | } 166 | --------------------------------------------------------------------------------