Color Schemer

colors.styled-components.com

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

• create-react-app
• 💅 styled-components
• ✨ polished
• clipboard.js
• color-name

License

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