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

![d600ff](https://www.colors.pics/d600ff)

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

• https://github.com/Matsuuu/colors.pics
• https://github.com/Matsuuu/pinkmare