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

Billboard image

Use Playwright to test. Use Playwright to monitor.

Join Vercel, CrowdStrike, and thousands of other teams that run end-to-end monitors on Checkly's programmable monitoring platform.

Get started now!

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay