Markdownでカラーコードの色見本を表示するTips

プロダクトのブランドカラーに関する情報をMarkdownでドキュメント化するときなどに、カラーコードだけではなく色見本が見れたほうが視覚的に分かりやすかったりします。

この投稿では、Markdownでカラーコードの色見本を画像で表示する方法を紹介します。

Markdownでカラーコードの見本を表示する方法

https://placeholder.com/ というダミー画像をURLで指定して生成できるサービスを使います。

![](https://via.placeholder.com/16/c7e7f6/FFFFFF/?text=%20) `#c7e7f6`
![](https://via.placeholder.com/16/abdbf1/FFFFFF/?text=%20) `#abdbf1`
![](https://via.placeholder.com/16/6ec1e9/FFFFFF/?text=%20) `#6ec1e9`
![](https://via.placeholder.com/16/47b1e1/FFFFFF/?text=%20) `#47b1e1`
![](https://via.placeholder.com/16/0093d6/FFFFFF/?text=%20) `#0093d6`
![](https://via.placeholder.com/16/221816/FFFFFF/?text=%20) `#221816`

↓ 例えばGitHubではこのように表示されます:

Qiitaだと、コードで書いたカラーコードは#c7e7f6のように自動で色見本がつく親切設計なので、Qiitaでは不要なテクニックですが、GitHubのREADME.mdやIssue、Qiita:Team以外の社内ナレッジ共有ツール、Markdownに対応した課題管理ツールなどでご活用ください。

---

最後までお読みくださりありがとうございました。Twitterでは、Qiitaに書かない技術ネタなどもツイートしているので、よかったらフォローしてもらえると嬉しいです→Twitter@suin