A React app to help you select a color scheme, built with styled-components and polished
Switch branches/tags
Nothing to show
Clone or download
Latest commit cbdbf00 Dec 10, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public Make it deploy-able Dec 10, 2018
src Upgrade all deps to latest Dec 10, 2018
.gitignore Initial commit Mar 3, 2017
LICENSE Initial commit Mar 3, 2017
README.md Make it deploy-able Dec 10, 2018
now.json Make it deploy-able Dec 10, 2018
package.json Make it deploy-able Dec 10, 2018
yarn.lock Upgrade all deps to latest Dec 10, 2018

README.md

Color Schemer

colors.styled-components.com

The color schemer app

A demo React app built with 💅 styled-components and ✨ 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.

colors
├── App
├── Tile
├── Tiles
├── global-styles.js # The global styles
└── index.js
┌───────────────────────────────────────────────────────────────────┐
│                              <App />                              │
│┌─────────────────────────────────────────────────────────────────┐│
││                                                                 ││
││                                                                 ││
││                           <BigTile />                           ││
││                                                                 ││
││                                                                 ││
│└─────────────────────────────────────────────────────────────────┘│
│┌─────────────────────────────────────────────────────────────────┐│
││ <Tiles />                                                       ││
││┌───────────┐┌───────────┐┌───────────┐┌───────────┐┌───────────┐││
│││           ││           ││           ││           ││           │││
│││ <Tile />  ││ <Tile />  ││ <Tile />  ││ <Tile />  ││ <Tile />  │││
│││           ││           ││           ││           ││           │││
││└───────────┘└───────────┘└───────────┘└───────────┘└───────────┘││
│└─────────────────────────────────────────────────────────────────┘│
└───────────────────────────────────────────────────────────────────┘

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

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

License

Copyright (c) 2017 Maximilian Stoiber. Licensed under the MIT License, see the LICENSE file for more information.