Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/styled-components/color-schemer

A React app to help you select a color scheme, built with styled-components and polished
https://github.com/styled-components/color-schemer

color-scheme colors polished react styled-components

Last synced: 3 months ago
JSON representation

A React app to help you select a color scheme, built with styled-components and polished

Host: GitHub
URL: https://github.com/styled-components/color-schemer
Owner: styled-components
License: mit
Created: 2017-03-03T10:55:58.000Z (almost 8 years ago)
Default Branch: master
Last Pushed: 2018-12-10T08:35:54.000Z (about 6 years ago)
Last Synced: 2024-09-29T00:01:49.300Z (3 months ago)
Topics: color-scheme, colors, polished, react, styled-components
Language: JavaScript
Homepage: https://colors.styled-components.com
Size: 1.01 MB
Stars: 55
Watchers: 4
Forks: 7
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# [Color Schemer](https://colors.styled-components.com)

**[colors.styled-components.com](https://colors.styled-components.com)**

[![The color schemer app](https://cloud.githubusercontent.com/assets/7525670/23553930/c8f83efc-001a-11e7-810a-7c7916dc1f29.png)](https://colors.styled-components.com)

A demo React app built with [`💅 styled-components`](https://github.com/styled-components/styled-components) and [`✨ polished`](https://github.com/styled-components/polished).

## Structure

Every component has a folder beneath the `src/` folder, with an `index.js` containing the component and a `style.js` containing the styled components used within that component.

```sh
colors
├── App
├── Tile
├── Tiles
├── global-styles.js # The global styles
└── index.js
```

```
┌───────────────────────────────────────────────────────────────────┐
│ │
│┌─────────────────────────────────────────────────────────────────┐│
││ ││
││ ││
││ ││
││ ││
││ ││
│└─────────────────────────────────────────────────────────────────┘│
│┌─────────────────────────────────────────────────────────────────┐│
││ ││
││┌───────────┐┌───────────┐┌───────────┐┌───────────┐┌───────────┐││
│││ ││ ││ ││ ││ │││
│││ ││ ││ ││ ││ │││
│││ ││ ││ ││ ││ │││
││└───────────┘└───────────┘└───────────┘└───────────┘└───────────┘││
│└─────────────────────────────────────────────────────────────────┘│
└───────────────────────────────────────────────────────────────────┘
```

## Calculation

We take the entered color, convert it to HSL and render the same hue and saturation with lightness' of `0.1`, `0.3`, `0.5`, `0.7` and `0.9`.

## Running locally

```sh
git clone https://github.com/styled-components/color-schemer
cd color-schemer # Go to downloaded directory
npm install # Install dependencies
npm start # Start the development server
```

## Uses

- [`create-react-app`](https://github.com/facebookincubator/create-react-app)
- [💅 `styled-components`](https://github.com/styled-components/styled-components)
- [✨ `polished`](https://github.com/styled-components/polished)
- [clipboard.js](https://clipboardjs.com/)
- [`color-name`](https://npm.im/color-name)

## License