https://github.com/taocode/color-palette-shade-generator
A svelte-based shade generator able to use HSL, RGB/hex with complimentary color option
https://github.com/taocode/color-palette-shade-generator
hsl-color sveltejs
Last synced: about 1 month ago
JSON representation
A svelte-based shade generator able to use HSL, RGB/hex with complimentary color option
- Host: GitHub
- URL: https://github.com/taocode/color-palette-shade-generator
- Owner: taocode
- Created: 2022-06-24T21:39:45.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-22T14:41:41.000Z (over 2 years ago)
- Last Synced: 2025-02-02T01:24:20.003Z (3 months ago)
- Topics: hsl-color, sveltejs
- Language: Svelte
- Homepage: https://color-palette-shade-generator.web.app/
- Size: 242 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Color Palette Shade Generator
> App delivered via Firebase Hosting (static): [color-palette-shade-generator.web.app](https://color-palette-shade-generator.web.app/)
Creates multiple shades of colors for websites based on color theory schemes.
Creates CSS and/or Tailwind variables with copy buttons that you can paste directly into your CSS or tailwind config file.
## Features
1. Variable outputs are easily copied via provided buttons
- CSS variables: `--color-blue-500: hsla(240, 80%, 50%, 1)`
- Tailwind/WindiCSS config (`tailwind.config.js`) variables with optional reference the CSS variables
1. Customizable options:
- Variable name, *default:* name based on hue `--color-varname`
- Variable name prefix, *default:* `--color-varname`
- %L shift per step, *default:* `7.5%; dark/light: 1/3%L`
- %S shift per step, *default:* `0%`
- Number of steps, *default:* `10`
1. HSLA based, produces your chosen color notations for web:
- HSLA: Hue Saturation Lightness Alpha - `hsla(240, 75%, 50%, 0.9)`
- RGBA: Red Green Blue Alpha - `rgba(32, 32, 223, 0.9)`
- #HexA: Hexadecimal with Alpha - `#2020dfe6`
- HSL: Hue Saturation Lightness - `hsl(240, 75%, 50%)`
- RGB: Red Green Blue - `rgb(32, 32, 223)`
- #Hex: Hexadecimal - `#2020df`
## Schemes
- Monochromatic (1 color): primary = φ
- Dark/Light (3 shades): primary = φ, dark = φ-15%L, light = φ+15%L
- Complementary (2 colors): primary = φ, complement = φ+180°
- Analogous (3 colors): primary = φ, analogous1 = φ-30°, analogous2 = φ+30°
- Split Complementary (3 colors): primary = φ, split1 = φ-150°, split2 = φ+150°
- Triadic (3 colors): primary = φ, triadic1 = φ-120°, triadic2 = φ+120°
- Tetradic (4 colors): primary = φ, tetradic1 = φ+60°, tetradic2 = φ+180°, tetradic3 = φ+240°
Learn more about [color theory](https://www.interaction-design.org/literature/topics/color-theory).
## Why HSLA?
I believe HSL is the easiest for a human to understand. Thanks to [Kevin Powell](https://www.kevinpowell.co/) for explaining HSL so well: [Are you using the WRONG color model in your CSS?](https://www.youtube.com/watch?v=Ab9pHqhsfcc)
### Why Svelte?
Svelte made developing this very fun. I've barely scratched at the surface of React and Vue apps but enough to know that Svelte provides more speed, smaller payload and a quicker app. Development spins up in under 10 seconds on my 4+ year old i5 (where React would take almost 10x the time, Vue is somewhere in between but with additional payload).
## Made By TAOCODE
I thought it'd be handy to have a tool to create these custom color variables but didn't love the various shade generators that I found in the wild. I also wanted to learn [Svelte](https://svelte.dev/) and [SvelteKit](https://kit.svelte.dev/).
See more of my works at [taocode.com](https://www.taocode.com).