Simple inline color swatches for Github README files, like this or
or
!
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:
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'/>
square |
round |
circle |
square |
round |
circle |
||
|---|---|---|---|---|---|---|---|
#F4F269 |
#E0AAFF |
||||||
#CEE26B |
#C77DFF |
||||||
#A8D26D |
#9D4EDD |
||||||
#82C26E |
#7B2CBF |
||||||
#5CB270 |
#5A189A |