styled-components / Color Schemer
Licence: mit
A React app to help you select a color scheme, built with styled-components and polished
Stars: ✭ 55
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Color Schemer
Colors.lol
🎨 Overly descriptive color palettes
Stars: ✭ 207 (+276.36%)
Mutual labels: color-scheme, colors
SwiftColorWheel
Delightful color picker wheel for iOS in Swift.
Stars: ✭ 37 (-32.73%)
Mutual labels: colors, color-scheme
Nova Colors
Single source of truth to consume Nova color values
Stars: ✭ 217 (+294.55%)
Mutual labels: color-scheme, colors
Colors.jl
Color manipulation utilities for Julia
Stars: ✭ 114 (+107.27%)
Mutual labels: color-scheme, colors
Colorpedia
Command-line tool for looking up colors and palettes.
Stars: ✭ 255 (+363.64%)
Mutual labels: color-scheme, colors
Awesome Vim Colorschemes
Collection of awesome color schemes for Neo/vim, merged for quick use.
Stars: ✭ 1,951 (+3447.27%)
Mutual labels: color-scheme, colors
slick
Vim/Neovim Colortheme–Truecolor, Stunning, Complete
Stars: ✭ 15 (-72.73%)
Mutual labels: colors, color-scheme
iterm-mphc
Material Palenight High Contrast + Icon
Stars: ✭ 26 (-52.73%)
Mutual labels: colors, color-scheme
anypalette.js
🎨 Read/write all color palette file formats ❤🧡💛💚💙💜
Stars: ✭ 41 (-25.45%)
Mutual labels: colors, color-scheme
Material Palette Generator
🎨 Get perfect Material Design color palettes from any hex color.
Stars: ✭ 114 (+107.27%)
Mutual labels: color-scheme, colors
Colorful
A curated list of awesome resources to choose your next color scheme
Stars: ✭ 702 (+1176.36%)
Mutual labels: color-scheme, colors
Nord Termite
An arctic, north-bluish clean and elegant Termite color theme.
Stars: ✭ 104 (+89.09%)
Mutual labels: color-scheme, colors
Gradstop
JavaScript micro library to generate gradient color stops 🏳️🌈
Stars: ✭ 144 (+161.82%)
Mutual labels: color-scheme, colors
Nord Hyper
An arctic, north-bluish clean and elegant Hyper theme plugin.
Stars: ✭ 96 (+74.55%)
Mutual labels: color-scheme, colors
Tints And Shades
🌈 Display tints and shades of a given hex color in 10% increments.
Stars: ✭ 228 (+314.55%)
Mutual labels: color-scheme, colors
Colorschemes.jl
colorschemes, colormaps, gradients, and palettes
Stars: ✭ 55 (+0%)
Mutual labels: color-scheme, colors
color-system
🎨 Easiest way to get a universal color palette
Stars: ✭ 21 (-61.82%)
Mutual labels: colors, color-scheme
Nord
An arctic, north-bluish color palette.
Stars: ✭ 4,816 (+8656.36%)
Mutual labels: color-scheme, colors
Styled System
⬢ Style props for rapid UI development
Stars: ✭ 7,126 (+12856.36%)
Mutual labels: colors, styled-components
Color Schemer
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].