ウェブデザインによく使うカラーの色味を少し抑えて今時のカラーにするスタイルシート -colors.css

blue, red, yellow, gray, blackなど、現在スタイルシートで名前で利用できるカラーはギラついた色味のものが多いですが、今時のちょっと抑えた色味に変えるスタイルシートを紹介します。

LESS版、Sass版もあり、カラーコードの一覧も用意されているので、デザイナーがカラーのバリエーションとして備えておくのにも役立ちます。

colors.css

まずは、変更したカラーの一覧から。
newの新しい方は、フラットなスタイルでよく見かける色味ですね。

新旧カラーの比較

colors.cssの使い方

使い方は簡単です。
当スタイルシートを外部ファイルとして記述するだけです。

<link rel="stylesheet" href="css/colors.css">

スタイルシートには各カラーごとに、colorとbackground-colorが利用できるようになっています。

/* Colors */
.navy {
  color: #001f3f; }

/* Backgrounds */
.bg-navy {
  background-color: #001f3f; }

ボーナスとして、テキストリンクのさりげないアニメーションを加えたものも入っています。

a {
  text-decoration: none;
  -webkit-transition: color .3s ease-in-out;
  transition: color .3s ease-in-out; }

a:link {
  color: #0074d9;
  -webkit-transition: color .3s ease-in-out;
  transition: color .3s ease-in-out; }

a:visited {
  color: #b10dc9; }

a:hover {
  color: #7fdbff;
  -webkit-transition: color .3s ease-in-out;
  transition: color .3s ease-in-out; }

a:active {
  color: #ff851b;
  -webkit-transition: color .3s ease-in-out;
  transition: color .3s ease-in-out; }