https://github.com/olizilla/swatches

◼ color swatches for your README as a service.
https://github.com/olizilla/swatches

Last synced: 9 days ago
JSON representation

◼ color swatches for your README as a service.

• Host: GitHub
• URL: https://github.com/olizilla/swatches
• Owner: olizilla
• Created: 2016-10-19T21:55:01.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2020-10-20T17:55:24.000Z (about 4 years ago)
• Last Synced: 2024-12-13T23:10:17.756Z (21 days ago)
• Language: JavaScript
• Homepage: swatch.now.sh
• Size: 6.84 KB
• Stars: 9
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# SWATCHES

You want to put color swatches in your github README, but it won't render html style attributes, and you can't be bothered to make or host the pngs. What if you could just...

`![A lovely hotpink color swatch](https://swatch.now.sh/?color=hotpink)`

and have it render as:

![A lovely hotpink color swatch](https://swatch.now.sh/?color=hotpink)

**why yes! SVG color swatches as a supernice service** thanks to the wonders of [now.sh](https://now.sh)

```md

![Charcoal](https://swatch.now.sh/?color=%2324364C)

![Royal blue](https://swatch.now.sh/?color=%232B60D5)

![Ultramarine blue](https://swatch.now.sh/?color=%23437AF4)

![Bleu de France](https://swatch.now.sh/?color=%234299FF)

```

![Charcoal](https://swatch.now.sh/?color=%2324364C)

![Royal blue](https://swatch.now.sh/?color=%232B60D5)

![Ultramarine blue](https://swatch.now.sh/?color=%23437AF4)

![Bleu de France](https://swatch.now.sh/?color=%234299FF)

Add your `color` at the end of the url, get back an svg square.

https://swatch.now.sh/?color=hotpink

For hex codes you have to url encode the `#` with `%23`.

https://swatch.now.sh/?color=%234299FF

For hsl() you have to encode the `%` with `%25`

https://swatch.now.sh/?color=hsl(52,100%25,20%25)

rbg(), and css color names are fine.

![](https://swatch.now.sh/?color=rgb(255,220,0))

![](https://swatch.now.sh/?color=goldenrod)

![](https://swatch.now.sh/?color=chartreuse)

## Options

`color` - an rgb or hsl or css color name. Default: `hotpink`

`name` - an optional label for your color. Default: the value of `color`

## Development

Install `vercel` and run

```shell

vercel dev

```

## Deployment

Pushes to the default branch are deployed.

---

A [(╯°□°）╯︵TABLEFLIP](https://tableflip.io) side project.