https://github.com/reimertz/brand-colors

🎨 A color collection available in sass, less, stylus and css
https://github.com/reimertz/brand-colors

Last synced: about 3 hours ago
JSON representation

🎨 A color collection available in sass, less, stylus and css

• Host: GitHub
• URL: https://github.com/reimertz/brand-colors
• Owner: reimertz
• License: mit
• Created: 2014-02-23T18:06:24.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T16:13:21.000Z (almost 2 years ago)
• Last Synced: 2024-10-06T09:21:40.609Z (about 1 month ago)
• Language: JavaScript
• Homepage: https://brand-colors.re.im
• Size: 2.89 MB
• Stars: 786
• Watchers: 18
• Forks: 90
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.MD

Awesome Lists containing this project

• awesome-swedish-opensource - brand-colors
• jimsghstars - reimertz/brand-colors - 🎨 A color collection available in sass, less, stylus and css (JavaScript)

README

        
![](brand-colors.png)

brand-colors is a collection of colors works available in sass, less, stylus and css

## Installation

```

npm install brand-colors

bower install brand-colors

```

## Usage

#### scss

```scss

@import 'bower_components/brand-colors/dist/latest/scss/brand-colors.latest.scss'

.a-div {

  color: $bc-spotify;

}

```

#### less

```css

@import 'bower_components/brand-colors/dist/latest/less/brand-colors.latest.less'

.a-div {

  color: @bc-spotify;

}

```

##### in webpack

  * use relative path to the `node_modules`, for example:

  

  ```js

    app

     |_node_modules

     |_src

        |_css

           |_app.less

  ```

  in app.less:

  

  ```less

  @import '../../node_modules/brand-colors/dist/latest/less/brand-colors.latest.less';

  ```

  

  * use webpack's resolve mechanism

  

  ```less

  @import '~brand-colors/dist/latest/less/brand-colors.latest.less';

  ```

  

#### sass

```sass

@import 'bower_components/brand-colors/dist/latest/scss/brand-colors.latest.sass'

.a-div

  color: $bc-spotify

```

#### stylus

```css

@import 'bower_components/brand-colors/dist/latest/stylus/brand-colors.latest.styl'

.a-div {

  color: $bc-spotify;

}

```

#### css

```html

  `

  This text is spotify-green

  
This div has a spotify-green background

```

#### postcss


Use [postcss-brand-color](https://github.com/postcss/postcss-brand-colors) plugin. Add it to PostCSS:

```js

postcss([ require('postcss-brand-colors') ])

```

and use `*-color` names:

```css

.a-div {

  color: spotify-color;

}

```

### Run brand-colors.com locally

If you want to work on the static homepage, just run the following commands

and you will get a live-reloading server listening for changes in /app

and brandColors.js

```bash

npm install

gulp dev

```

### Brands

[Full list of colors](https://github.com/reimertz/brand-colors/blob/master/data/brandColors.js#L8)

A lot fo the colors comes from brandcolors.net, so a huge shout out to @galengidman.

---

> [reimertz.co](http://reimertz.co)  · 

> GitHub [@reimertz](https://github.com/reimertz)  · 

> Twitter [@reimertz](https://twitter.com/reimertz)