/readme-swatches

Color swatches for README files

Primary LanguageTypeScriptMIT LicenseMIT

Readme Color Swatches

Simple inline color swatches for Github README files, like this #CC0066 or #0080FF or #009900 !

Usage

Add your hex color code to the end of the URL like this (omit the #):

https://readme-swatches.vercel.app/0080FF

And add any of the following query parameters to the end of the URL to customize the swatch:

Parameter Description Default
style The style of the swatch, can be square, round, or circle. square
size The size of the swatch. 20
top The top padding of the swatch. The shorthand t is also accepted. 0
bottom The bottom padding of the swatch. The shorthand b is also accepted. 2
left The left padding of the swatch. The shorthand l is also accepted. 0
right The right padding of the swatch. The shorthand r is also accepted. 0

Swatches can be embedded using markdown syntax like this:

![blue](https://readme-swatches.vercel.app/0080FF)

But this is not recommended as the swatches vertical alignment will be off. For the best results, use an <img> tag with the valign attribute set to 'middle' like this:

<img valign='middle' alt='blue' src='https://readme-swatches.vercel.app/0080FF'/>

Sample

square round circle square round circle
#F4F269 #E0AAFF
#CEE26B #C77DFF
#A8D26D #9D4EDD
#82C26E #7B2CBF
#5CB270 #5A189A

License

MIT