├── .gitignore ├── palette.png ├── sass ├── colors.scss ├── _variables.scss └── _skins.scss ├── package.json ├── css ├── colors.min.css └── colors.css └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /palette.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/colors-sass/master/palette.png -------------------------------------------------------------------------------- /sass/colors.scss: -------------------------------------------------------------------------------- 1 | /*** 2 | 3 | colors.css v2.0.0 4 | http://clrs.cc 5 | @mrmrs 6 | MIT License 7 | 8 | ***/ 9 | 10 | @import "variables"; 11 | @import "skins"; 12 | 13 | -------------------------------------------------------------------------------- /sass/_variables.scss: -------------------------------------------------------------------------------- 1 | // 2 | // COLOR VARIABLES 3 | // 4 | // - Cool 5 | // - Warm 6 | // - Gray Scale 7 | // 8 | 9 | // Cool 10 | 11 | $aqua: #7FDBFF; 12 | $blue: #0074D9; 13 | $navy: #001F3F; 14 | $teal: #39CCCC; 15 | $green: #2ECC40; 16 | $olive: #3D9970; 17 | $lime: #01FF70; 18 | 19 | // Warm 20 | 21 | $yellow: #FFDC00; 22 | $orange: #FF851B; 23 | $red: #FF4136; 24 | $fuchsia: #F012BE; 25 | $purple: #B10DC9; 26 | $maroon: #85144B; 27 | 28 | // Gray Scale 29 | 30 | $white: #FFFFFF; 31 | $silver: #DDDDDD; 32 | $gray: #AAAAAA; 33 | $black: #111111; 34 | 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "colors-sass", 3 | "version": "1.0.0", 4 | "description": "Alternate colors for the default css string names", 5 | "main": "css/colors.css", 6 | "scripts": { 7 | "start": "node-sass sass/colors.scss css/colors.css && node-sass --output-style compressed sass/colors.scss css/colors.min.css" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/mrmrs/colors-sass.git" 12 | }, 13 | "keywords": [ 14 | "sass", 15 | "colors", 16 | "css" 17 | ], 18 | "author": "mrmrs", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/mrmrs/colors-sass/issues" 22 | }, 23 | "homepage": "https://github.com/mrmrs/colors-sass#readme", 24 | "devDependencies": { 25 | "node-sass": "^3.4.2" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /css/colors.min.css: -------------------------------------------------------------------------------- 1 | .bg-navy{background-color:#001F3F}.bg-blue{background-color:#0074D9}.bg-aqua{background-color:#7FDBFF}.bg-teal{background-color:#39CCCC}.bg-olive{background-color:#3D9970}.bg-green{background-color:#2ECC40}.bg-lime{background-color:#01FF70}.bg-yellow{background-color:#FFDC00}.bg-orange{background-color:#FF851B}.bg-red{background-color:#FF4136}.bg-fuchsia{background-color:#F012BE}.bg-purple{background-color:#B10DC9}.bg-maroon{background-color:#85144B}.bg-white{background-color:#fff}.bg-gray{background-color:#aaa}.bg-silver{background-color:#ddd}.bg-black{background-color:#111}.navy{color:#001F3F}.blue{color:#0074D9}.aqua{color:#7FDBFF}.teal{color:#39CCCC}.olive{color:#3D9970}.green{color:#2ECC40}.lime{color:#01FF70}.yellow{color:#FFDC00}.orange{color:#FF851B}.red{color:#FF4136}.fuchsia{color:#F012BE}.purple{color:#B10DC9}.maroon{color:#85144B}.white{color:#fff}.silver{color:#ddd}.gray{color:#aaa}.black{color:#111}.border--navy{border-color:#001F3F}.border--blue{border-color:#0074D9}.border--aqua{border-color:#7FDBFF}.border--teal{border-color:#39CCCC}.border--olive{border-color:#3D9970}.border--green{border-color:#2ECC40}.border--lime{border-color:#01FF70}.border--yellow{border-color:#FFDC00}.border--orange{border-color:#FF851B}.border--red{border-color:#FF4136}.border--fuchsia{border-color:#F012BE}.border--purple{border-color:#B10DC9}.border--maroon{border-color:#85144B}.border--white{border-color:#fff}.border--gray{border-color:#aaa}.border--silver{border-color:#ddd}.border--black{border-color:#111}.fill-navy{fill:#001F3F}.fill-blue{fill:#0074D9}.fill-aqua{fill:#7FDBFF}.fill-teal{fill:#39CCCC}.fill-olive{fill:#3D9970}.fill-green{fill:#2ECC40}.fill-lime{fill:#01FF70}.fill-yellow{fill:#FFDC00}.fill-orange{fill:#FF851B}.fill-red{fill:#FF4136}.fill-fuchsia{fill:#F012BE}.fill-purple{fill:#B10DC9}.fill-maroon{fill:#85144B}.fill-white{fill:#fff}.fill-gray{fill:#aaa}.fill-silver{fill:#ddd}.fill-black{fill:#111}.stroke-navy{stroke:#001F3F}.stroke-blue{stroke:#0074D9}.stroke-aqua{stroke:#7FDBFF}.stroke-teal{stroke:#39CCCC}.stroke-olive{stroke:#3D9970}.stroke-green{stroke:#2ECC40}.stroke-lime{stroke:#01FF70}.stroke-yellow{stroke:#FFDC00}.stroke-orange{stroke:#FF851B}.stroke-red{stroke:#FF4136}.stroke-fuchsia{stroke:#F012BE}.stroke-purple{stroke:#B10DC9}.stroke-maroon{stroke:#85144B}.stroke-white{stroke:#fff}.stroke-gray{stroke:#aaa}.stroke-silver{stroke:#ddd}.stroke-black{stroke:#111} 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # COLORS-SASS 2 | 3 | ## Better colors for the web. 4 | 5 | View the project page at [http://clrs.cc](http://clrs.cc "Colors: Better colors for the web.") 6 | 7 |
8 | 9 |
10 | 11 | ## What is this? 12 | 13 | A simple color palette for the web. Let's be honest, out of the box, the color strings that css provides aren't... the tops. 14 | This is a set of sass/less/stylus/css variables and css classes that can help fix that with just 647B of minified and gzipped css. 15 | 16 | (Uncompressed is just 888B) 17 | 18 | colors.css provides utilities to apply backgrounds, text-color, border colors for both html and svg elements. 19 | 20 | ## Install colors.css 21 | 22 | You can get the code a few different ways 23 | 24 | Download a zip from the github project page 25 | 26 | Clone / fork the repo through git 27 | ```bash 28 | git clone git@github.com:mrmrs/colors-sass.git 29 | ``` 30 | 31 | Install [through npm](https://www.npmjs.org/package/colors-sass.css) 32 | ```bash 33 | npm install --save-dev colors-sass 34 | ``` 35 | 36 | Install the [ruby gem](http://rubygems.org/gems/clrs) 37 | ``` 38 | gem install clrs 39 | ``` 40 | 41 | ### Using the css 42 | Simply copy colors.css to your css directory and include the file like so in the head of your html document 43 | 44 | ```html 45 | 46 | ``` 47 | 48 | ## Setup 49 | 50 | To install dependencies and convert the sass source files to css run 51 | 52 | ```bash 53 | npm install && npm start 54 | ``` 55 | 56 | You can customize the colors in ```sass/_variables``` if you'd like to alter any of the 57 | provided values. 58 | 59 | Have fun! 60 | 61 | # Author 62 | [MRMRS](http://mrmrs.cc "Adam Morse - Designer + Developer in Hong Kong") 63 | 64 | 65 | # License 66 | 67 | The MIT License (MIT) 68 | 69 | Permission is hereby granted, free of charge, to any person obtaining a copy 70 | of this software and associated documentation files (the "Software"), to deal 71 | in the Software without restriction, including without limitation the rights 72 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 73 | copies of the Software, and to permit persons to whom the Software is 74 | furnished to do so, subject to the following conditions: 75 | 76 | The above copyright notice and this permission notice shall be included in 77 | all copies or substantial portions of the Software. 78 | 79 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 80 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 81 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 82 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 83 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 84 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 85 | THE SOFTWARE. 86 | 87 | -------------------------------------------------------------------------------- /sass/_skins.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | SKINS 4 | - Backgrounds 5 | - Colors 6 | - Border colors 7 | - SVG fills 8 | - SVG Strokes 9 | 10 | */ 11 | 12 | 13 | /* Backgrounds */ 14 | 15 | .bg-navy { background-color: $navy; } 16 | .bg-blue { background-color: $blue; } 17 | .bg-aqua { background-color: $aqua; } 18 | .bg-teal { background-color: $teal; } 19 | .bg-olive { background-color: $olive; } 20 | .bg-green { background-color: $green; } 21 | .bg-lime { background-color: $lime; } 22 | .bg-yellow { background-color: $yellow; } 23 | .bg-orange { background-color: $orange; } 24 | .bg-red { background-color: $red; } 25 | .bg-fuchsia { background-color: $fuchsia; } 26 | .bg-purple { background-color: $purple; } 27 | .bg-maroon { background-color: $maroon; } 28 | .bg-white { background-color: $white; } 29 | .bg-gray { background-color: $gray; } 30 | .bg-silver { background-color: $silver; } 31 | .bg-black { background-color: $black; } 32 | 33 | 34 | /* Colors */ 35 | 36 | .navy { color: $navy; } 37 | .blue { color: $blue; } 38 | .aqua { color: $aqua; } 39 | .teal { color: $teal; } 40 | .olive { color: $olive; } 41 | .green { color: $green; } 42 | .lime { color: $lime; } 43 | .yellow { color: $yellow; } 44 | .orange { color: $orange; } 45 | .red { color: $red; } 46 | .fuchsia { color: $fuchsia; } 47 | .purple { color: $purple; } 48 | .maroon { color: $maroon; } 49 | .white { color: $white; } 50 | .silver { color: $silver; } 51 | .gray { color: $gray; } 52 | .black { color: $black; } 53 | 54 | 55 | /* Border colors 56 | 57 | Use with another border utility that sets border-width and style 58 | i.e .border { border-width: 1px; border-style: solid; } 59 | */ 60 | 61 | .border--navy { border-color: $navy; } 62 | .border--blue { border-color: $blue; } 63 | .border--aqua { border-color: $aqua; } 64 | .border--teal { border-color: $teal; } 65 | .border--olive { border-color: $olive; } 66 | .border--green { border-color: $green; } 67 | .border--lime { border-color: $lime; } 68 | .border--yellow { border-color: $yellow; } 69 | .border--orange { border-color: $orange; } 70 | .border--red { border-color: $red; } 71 | .border--fuchsia { border-color: $fuchsia; } 72 | .border--purple { border-color: $purple; } 73 | .border--maroon { border-color: $maroon; } 74 | .border--white { border-color: $white; } 75 | .border--gray { border-color: $gray; } 76 | .border--silver { border-color: $silver; } 77 | .border--black { border-color: $black; } 78 | 79 | 80 | /* Fills for SVG */ 81 | 82 | .fill-navy { fill: $navy; } 83 | .fill-blue { fill: $blue; } 84 | .fill-aqua { fill: $aqua; } 85 | .fill-teal { fill: $teal; } 86 | .fill-olive { fill: $olive; } 87 | .fill-green { fill: $green; } 88 | .fill-lime { fill: $lime; } 89 | .fill-yellow { fill: $yellow; } 90 | .fill-orange { fill: $orange; } 91 | .fill-red { fill: $red; } 92 | .fill-fuchsia { fill: $fuchsia; } 93 | .fill-purple { fill: $purple; } 94 | .fill-maroon { fill: $maroon; } 95 | .fill-white { fill: $white; } 96 | .fill-gray { fill: $gray; } 97 | .fill-silver { fill: $silver; } 98 | .fill-black { fill: $black; } 99 | 100 | /* Strokes for SVG */ 101 | 102 | .stroke-navy { stroke: $navy; } 103 | .stroke-blue { stroke: $blue; } 104 | .stroke-aqua { stroke: $aqua; } 105 | .stroke-teal { stroke: $teal; } 106 | .stroke-olive { stroke: $olive; } 107 | .stroke-green { stroke: $green; } 108 | .stroke-lime { stroke: $lime; } 109 | .stroke-yellow { stroke: $yellow; } 110 | .stroke-orange { stroke: $orange; } 111 | .stroke-red { stroke: $red; } 112 | .stroke-fuchsia { stroke: $fuchsia; } 113 | .stroke-purple { stroke: $purple; } 114 | .stroke-maroon { stroke: $maroon; } 115 | .stroke-white { stroke: $white; } 116 | .stroke-gray { stroke: $gray; } 117 | .stroke-silver { stroke: $silver; } 118 | .stroke-black { stroke: $black; } 119 | 120 | -------------------------------------------------------------------------------- /css/colors.css: -------------------------------------------------------------------------------- 1 | /*** 2 | 3 | colors.css v2.0.0 4 | http://clrs.cc 5 | @mrmrs 6 | MIT License 7 | 8 | ***/ 9 | /* 10 | 11 | SKINS 12 | - Backgrounds 13 | - Colors 14 | - Border colors 15 | - SVG fills 16 | - SVG Strokes 17 | 18 | */ 19 | /* Backgrounds */ 20 | .bg-navy { 21 | background-color: #001F3F; } 22 | 23 | .bg-blue { 24 | background-color: #0074D9; } 25 | 26 | .bg-aqua { 27 | background-color: #7FDBFF; } 28 | 29 | .bg-teal { 30 | background-color: #39CCCC; } 31 | 32 | .bg-olive { 33 | background-color: #3D9970; } 34 | 35 | .bg-green { 36 | background-color: #2ECC40; } 37 | 38 | .bg-lime { 39 | background-color: #01FF70; } 40 | 41 | .bg-yellow { 42 | background-color: #FFDC00; } 43 | 44 | .bg-orange { 45 | background-color: #FF851B; } 46 | 47 | .bg-red { 48 | background-color: #FF4136; } 49 | 50 | .bg-fuchsia { 51 | background-color: #F012BE; } 52 | 53 | .bg-purple { 54 | background-color: #B10DC9; } 55 | 56 | .bg-maroon { 57 | background-color: #85144B; } 58 | 59 | .bg-white { 60 | background-color: #FFFFFF; } 61 | 62 | .bg-gray { 63 | background-color: #AAAAAA; } 64 | 65 | .bg-silver { 66 | background-color: #DDDDDD; } 67 | 68 | .bg-black { 69 | background-color: #111111; } 70 | 71 | /* Colors */ 72 | .navy { 73 | color: #001F3F; } 74 | 75 | .blue { 76 | color: #0074D9; } 77 | 78 | .aqua { 79 | color: #7FDBFF; } 80 | 81 | .teal { 82 | color: #39CCCC; } 83 | 84 | .olive { 85 | color: #3D9970; } 86 | 87 | .green { 88 | color: #2ECC40; } 89 | 90 | .lime { 91 | color: #01FF70; } 92 | 93 | .yellow { 94 | color: #FFDC00; } 95 | 96 | .orange { 97 | color: #FF851B; } 98 | 99 | .red { 100 | color: #FF4136; } 101 | 102 | .fuchsia { 103 | color: #F012BE; } 104 | 105 | .purple { 106 | color: #B10DC9; } 107 | 108 | .maroon { 109 | color: #85144B; } 110 | 111 | .white { 112 | color: #FFFFFF; } 113 | 114 | .silver { 115 | color: #DDDDDD; } 116 | 117 | .gray { 118 | color: #AAAAAA; } 119 | 120 | .black { 121 | color: #111111; } 122 | 123 | /* Border colors 124 | 125 | Use with another border utility that sets border-width and style 126 | i.e .border { border-width: 1px; border-style: solid; } 127 | */ 128 | .border--navy { 129 | border-color: #001F3F; } 130 | 131 | .border--blue { 132 | border-color: #0074D9; } 133 | 134 | .border--aqua { 135 | border-color: #7FDBFF; } 136 | 137 | .border--teal { 138 | border-color: #39CCCC; } 139 | 140 | .border--olive { 141 | border-color: #3D9970; } 142 | 143 | .border--green { 144 | border-color: #2ECC40; } 145 | 146 | .border--lime { 147 | border-color: #01FF70; } 148 | 149 | .border--yellow { 150 | border-color: #FFDC00; } 151 | 152 | .border--orange { 153 | border-color: #FF851B; } 154 | 155 | .border--red { 156 | border-color: #FF4136; } 157 | 158 | .border--fuchsia { 159 | border-color: #F012BE; } 160 | 161 | .border--purple { 162 | border-color: #B10DC9; } 163 | 164 | .border--maroon { 165 | border-color: #85144B; } 166 | 167 | .border--white { 168 | border-color: #FFFFFF; } 169 | 170 | .border--gray { 171 | border-color: #AAAAAA; } 172 | 173 | .border--silver { 174 | border-color: #DDDDDD; } 175 | 176 | .border--black { 177 | border-color: #111111; } 178 | 179 | /* Fills for SVG */ 180 | .fill-navy { 181 | fill: #001F3F; } 182 | 183 | .fill-blue { 184 | fill: #0074D9; } 185 | 186 | .fill-aqua { 187 | fill: #7FDBFF; } 188 | 189 | .fill-teal { 190 | fill: #39CCCC; } 191 | 192 | .fill-olive { 193 | fill: #3D9970; } 194 | 195 | .fill-green { 196 | fill: #2ECC40; } 197 | 198 | .fill-lime { 199 | fill: #01FF70; } 200 | 201 | .fill-yellow { 202 | fill: #FFDC00; } 203 | 204 | .fill-orange { 205 | fill: #FF851B; } 206 | 207 | .fill-red { 208 | fill: #FF4136; } 209 | 210 | .fill-fuchsia { 211 | fill: #F012BE; } 212 | 213 | .fill-purple { 214 | fill: #B10DC9; } 215 | 216 | .fill-maroon { 217 | fill: #85144B; } 218 | 219 | .fill-white { 220 | fill: #FFFFFF; } 221 | 222 | .fill-gray { 223 | fill: #AAAAAA; } 224 | 225 | .fill-silver { 226 | fill: #DDDDDD; } 227 | 228 | .fill-black { 229 | fill: #111111; } 230 | 231 | /* Strokes for SVG */ 232 | .stroke-navy { 233 | stroke: #001F3F; } 234 | 235 | .stroke-blue { 236 | stroke: #0074D9; } 237 | 238 | .stroke-aqua { 239 | stroke: #7FDBFF; } 240 | 241 | .stroke-teal { 242 | stroke: #39CCCC; } 243 | 244 | .stroke-olive { 245 | stroke: #3D9970; } 246 | 247 | .stroke-green { 248 | stroke: #2ECC40; } 249 | 250 | .stroke-lime { 251 | stroke: #01FF70; } 252 | 253 | .stroke-yellow { 254 | stroke: #FFDC00; } 255 | 256 | .stroke-orange { 257 | stroke: #FF851B; } 258 | 259 | .stroke-red { 260 | stroke: #FF4136; } 261 | 262 | .stroke-fuchsia { 263 | stroke: #F012BE; } 264 | 265 | .stroke-purple { 266 | stroke: #B10DC9; } 267 | 268 | .stroke-maroon { 269 | stroke: #85144B; } 270 | 271 | .stroke-white { 272 | stroke: #FFFFFF; } 273 | 274 | .stroke-gray { 275 | stroke: #AAAAAA; } 276 | 277 | .stroke-silver { 278 | stroke: #DDDDDD; } 279 | 280 | .stroke-black { 281 | stroke: #111111; } 282 | --------------------------------------------------------------------------------