適当に色をつけたいときに使える!! 覚えやすいカラーコード5選

Webサイトを作っていて、最初に骨組みをつくるとき、見やすさを意識して背景色をつけたりしますよね!

そんなとき、ぼくは大抵redとかorangeとか、lightblueとか使います。
例えばこんな感じ。

See the Pen wmgPgv by Shogo Inamoto (@shogo0525) on CodePen.

もちろんこれで全然問題ないのですが、直接カラー名を入力するのは、なんだかいけてない気がしていまして。

でできるだけ16進数のカラーコード使いたいなーと思うのです。たぶん同じ思いを持っている人はいるはず・・・(笑)

そこで今回は、覚えやすく、使えそうな16進数のカラーコードをまとめてみました!

覚えやすいカラーコード10選

#C0FFEE – COFFEE

※O(オー)の部分は0(ゼロ)です。

その名の通り、コーヒーです。色は茶色とはかけ離れてるので混乱してしまいますが、使えそうですね!
コーヒーの綴りがあやしい人は、中学英語からやりなおしてください。

#BADA55 – BADASS

※最後のSSは数字の55になります。

何かのプログラミング動画でこのカラーコードを「BADASS」と言いながら入力しているのを見て知りました。
最後のSSは数字の55になります。
言葉としてはスラングでちょっと汚い英単語ですが、これも使いやすそうです。

ちなみにbadassは本来ネガティヴな言葉ですが、若者の間ではcoolとかawesomeみたいな意味合いで使われるそうですよ。
例: Your bland-new car is badass! (君の新車、かっこいいね!

#C55 – CSS

※最後のSSは数字の55になります。

めちゃシンプル!!
これはプログラミング学習者にとってはとても覚えやすいのではないでしょうか。

#FB1 – FBI

※最後のIは数字の1になります。

ぼくがアメリカのドラマや映画が好きなので選出されました。
これも3文字でいいのでシンプルですね!

ちなみにFBIはFederal Bureau of Investigation(連邦捜査局)の略ですよ。

#505 – SOS

※全部数字です

助けて!の色ですね。
もう色が全然ないよーってときはこれを思い出しましょう。

覚えたカラーコードで骨組みを組もう!

それでは今覚えたカラーコードを実際に使ってみましょう。

See the Pen QmdORp by Shogo Inamoto (@shogo0525) on CodePen.

ふむふむ、あまりよくない色の組み合わせができてしまいましたね。。。
名前から連想される色のイメージが実際と違うからかもしれません(笑)

そこには目をつぶっていただいて、「カラーコード覚えてるぜ」という自慢をするときにぜひ使ってみてください!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする