雑記

ブログやプレゼンで配色に困ったらFlat UI Colorがおすすめです

配色

どの色を使ったらいいかわからない時

そんな時は「Flat UI Colors」がおすすめです。好きな配色パターンのページを開いて、色の上でクリックするだけ。

そうしたら16進数カラーコードが取得できます。

#f39c12

こんなのです。

自分で適当な色を選んでいると、どうしても見栄えが悪くなるものです。Flat UI Colorはその中の色をいくつか抜粋するだけで、見栄えのいい色彩バランスを保てます。

 

#27ae60

#3498db

#34495e

#e67e22

今上に並べた4色は、このページから適当に抜いてきた4色です。

おまけ:JINのスタイルの配色を一時的に上書きする

この記事を書くときに気づきがあったので備忘録として残します。

上の色付きのボックスは、このサイトで使っているWordpressテーマJINの「背景色ボックス」と呼ばれるスタイルです。色はclassで定義されているため、上書きする時はビジュアルエディタではなくテキストエディタを開き、style=”background-color: <好きな色の16進数コード> !important;”をdivタグの中に書き込みます。

<div class="simple-box6" style="background-color: #ffcc00 !important;">
#f39c12
</div>
ABOUT ME
hirayuki
今年で社会人3年目になります。 日々体当たりで仕事を覚えています。 テーマはIT・教育です。 少しでも技術に親しんでもらえるよう、noteで4コマ漫画も書いています。 https://note.mu/hirayuki