https://github.com/bencoveney/bctheme
https://github.com/bencoveney/bctheme
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bencoveney/bctheme
- Owner: bencoveney
- License: mit
- Created: 2024-04-22T22:59:47.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-11T20:58:19.000Z (12 months ago)
- Last Synced: 2025-01-13T21:25:20.447Z (3 months ago)
- Language: HTML
- Homepage: http://bencoveney.com/bctheme/
- Size: 81.1 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# BCTheme
## Goals:
Consistent set of colours I can use for projects
### Suitable for:
- Web design
- Info, Success, Error, Warning states
- Consider white/black forground/background for text
- Terminal colours
- Syntax highlighting
- Plus diffs
- Game assets
- Pixel art
### Output as:
- CSS variables
- Terminal colour theme style
- VSCode colour theme
- Aseprite palette
## Data gathering
### ANSI Colours:
- Black, Bright Black (Gray)
- Red, Bright Red
- Green, Bright Green
- Yellow, Bright Yellow
- Blue, Bright Blue
- Magenta, Bright Magenta
- Cyan, Bright Cyan
- White, Bright White
6 colour stops
1 grey stop
black and white
### Tailwind Colours:
https://tailwindcss.com/docs/customizing-colors#default-color-palette
- Slate, Gray, Zinc, Neutral, Stone, 50 - 950
- Red, 50 - 950
- Orange, 50 - 950
- Amber, 50 - 950
- Yellow, 50 - 950
- Lime, 50 - 950
- Green, 50 - 950
- Emerald, 50 - 950
- Teal, 50 - 950
- Cyan, 50 - 950
- Sky, 50 - 950
- Blue, 50 - 950
- Indigo, 50 - 950
- Violet, 50 - 950
- Purple, 50 - 950
- Fuchsia, 50 - 950
- Pink, 50 - 950
- Rose, 50 - 950
- Black, White
17 colour stops
5 grey stops
black and white
### Material Design 2 Colours:
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
- Red, 50 - 900 + 4\*A
- Pink, 50 - 900 + 4\*A
- Purple, 50 - 900 + 4\*A
- Deep Purple, 50 - 900 + 4\*A
- Indigo, 50 - 900 + 4\*A
- Blue, 50 - 900 + 4\*A
- Light Blue, 50 - 900 + 4\*A
- Cyan, 50 - 900 + 4\*A
- Teal, 50 - 900 + 4\*A
- Green, 50 - 900 + 4\*A
- Light Green, 50 - 900 + 4\*A
- Lime, 50 - 900 + 4\*A
- Yellow, 50 - 900 + 4\*A
- Amber, 50 - 900 + 4\*A
- Orange, 50 - 900 + 4\*A
- Deep Orange, 50 - 900 + 4\*A
- Brown, Gray, Blue Gray, 50 - 900
- Black, White
16 colour stops
2 grey stops
1 brown stop
black and white
### Bootstrap Colours:
https://getbootstrap.com/docs/5.2/customize/color/#all-colors
- Blue, 100-900
- Indigo, 100-900
- Purple, 100-900
- Pink, 100-900
- Red, 100-900
- Orange, 100-900
- Yellow, 100-900
- Green, 100-900
- Teal, 100-900
- Cyan, 100-900
- Gray, 100-900
- Black, White
10 colour stops
1 grey stop
black and white
## Ideas to try
- 12 colour stops - compatible with triadic/square themes
- Cool dark colours - curve towards blue
- Warm light colours - curve towards yellow
- Desaturate dark/light colours
## References
- [Doclooks project](https://github.com/bencoveney/doclooks)
- [Freya Holmér](https://www.youtube.com/@acegikmo)
- [Palettes & Colour - AdamCYounis](https://www.youtube.com/watch?v=hkrK65FPmDI)
- 8 colour stops X 6 colour shades
- [Gruvbox](https://github.com/morhetz/gruvbox)
- [Command line palettes](https://gogh-co.github.io/Gogh/)
- [Pixel art palettes](https://lospec.com/palette-list)
- https://en.wikipedia.org/wiki/Color_scheme#Harmonious_schemes
- [Determine perceived brightness of RGB color](https://stackoverflow.com/questions/596216/formula-to-determine-perceived-brightness-of-rgb-color)
- [Accessibility Evaluation And Repair Tools](https://www.w3.org/TR/AERT/#color-contrast)
- [HSP Color Model](https://alienryderflex.com/hsp.html)
- [Your Colors Suck - Acerola](https://www.youtube.com/watch?v=fv-wlo8yVhk)
- [Hue Shifting in Pixel Art - BJG](https://www.youtube.com/watch?v=PNtMAxYaGyg)
- [Oklab color space](https://bottosson.github.io/posts/oklab/)
- [Oklab implementation](https://github.com/Evercoder/culori/tree/main/src/oklab)
- [Coolors Visualiser](https://coolors.co/visualizer/)
- [GoodPalette Visualiser](https://goodpalette.io/)
- [Realtime Colors Visualiser](https://www.realtimecolors.com/)