Qiita って `#d3e173` みたいに書くと右側に色が表示されるって知ってた？

3549 ワード
color Qiita Markdown Qiita テキストリンク

「あなたの思う黄緑と、わたしの思う黄緑は違うかもしれない🎨」って記事を書いてて偶然気づいたんですが、 Qiita って #d3e173 みたいにカラーコードをコード記法で書くと、右側に色が表示されるんですね。
知ってました？

ってことで、記法やカラーコードの種類で色が表示されるかどうか検証してみました。

コード記法の種類による比較

インライン

#d3e173
これは実証ずみ。表示されますね。

シンタックスハイライト 

#d3e173

div {
  background-color: #d3e173
}

これは......だめみたい。
まあそうだよね。

カラーコードの種類による比較

16進カラーコード

#e4a972
これは実証ずみ。表示されますね。

ちなみに3桁も
#fff

hsl()

hsl(165, 100%, 50%)
hsl() もいけるみたい！

rgba()

rgb(234, 0, 255)
rgba(234, 0, 255, 0.5)
rgba() もいけるみたい！
（ちゃんと透過されてるｗ）

カラーネーム

yellow
さすがにカラーネームは無理でした。

グラデーション

linear-gradient(-135deg, #E4A972, #9941D8)
いけたらカッコイイけど、無理みたい。

まとめ

色を記事に書くときはインラインでコード記法すると視覚的に伝えられるかも！