DEV Community

Matsuuu
Matsuuu

Posted on

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']
      \ }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

to your markdown, you are able to create a colored square into your Markdown README.

Image description

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

Image of Datadog

Master Mobile Monitoring for iOS Apps

Monitor your app’s health with real-time insights into crash-free rates, start times, and more. Optimize performance and prevent user churn by addressing critical issues like app hangs, and ANRs. Learn how to keep your iOS app running smoothly across all devices by downloading this eBook.

Get The eBook

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay