dev-resources.site
for different kinds of informations.
Colors.pics is your best friend for documenting your color schemes
I was updating some of the configurations in my colorscheme PinkMare, when I got extremely annoyed by the fact that I only had the hex colors of my theme in text format. Having to refer to a documentation in this form without actually seeing the colors cuased a lot of annoyance as remembering the whole palette was practically impossible.
let s:palette = {
\ 'bg0': ['#202330', '235', 'Black'],
\ 'bg1': ['#472541', '236', 'DarkGrey'],
\ 'bg2': ['#472541', '237', 'DarkGrey'],
\ 'bg3': ['#472541', '238', 'DarkGrey'],
\ 'bg4': ['#2d2f42', '239', 'Grey'],
\ 'bg_red': ['#f2448b', '52', 'DarkRed'],
\ 'bg_green': ['#333b2f', '22', 'DarkGreen'],
\ 'bg_blue': ['#203a41', '17', 'DarkBlue'],
\ 'fg': ['#FAE8B6', '223', 'White'],
\ 'red': ['#FF38A2', '167', 'Red'],
\ 'orange': ['#ffb347', '208', 'Red'],
\ 'yellow': ['#ffc85b', '214', 'Yellow'],
\ 'green': ['#9cd162', '108', 'Green'],
\ 'cyan': ['#87c095', '108', 'Cyan'],
\ 'blue': ['#eba4ac', '109', 'Blue'],
\ 'purple': ['#d9bcef', '175', 'Magenta'],
\ 'grey': ['#444444', '245', 'LightGrey'],
\ 'light_grey': ['#6D7A72', '245', 'LightGrey'],
\ 'gold': ['#fff0f5', '214', 'Yellow'],
\ 'none': ['NONE', 'NONE', 'NONE']
\ }
I was sure there should be a better way at this.
Just use CSS?
I mean, yeah. If we were in HTML land, this would be the easiest thing ever to solve. But we're in GitHub README land here so having something like
<div style="width: 40px; height: 40px; background: #FF6D00"></div>
Just isn't going to work.
Introducing colors.pics
Colors.pics is a Vercel hosted small nodejs server that provides a simple web API to get just the colors you want.
Just by appending
to your markdown, you are able to create a colored square into your Markdown README.
Go wild
So yeah. Go wild. Add some color to your readme's and if you're a color scheme author, let the users know in advance what they're signing up for!
Links
Featured ones: