カラーコードだからできる色調整

GIGAZINさんの記事「Webデザイナーによるカラーコードを使った便利なテクニックあれこれ」から、自分で便利と思った点をまとめました。
本文ではカラーコードについて基礎的な事から紹介されてますが、その辺りは省略してます。

16進数の赤・緑・青を表すコードで、右の数字を低くすると色がくっきりする

#000000（黒）から各ペアの数値をFFに置き換えていくと「赤、緑、青」、
#FFFFFF（白）から順にFFを00に置き換えると「イエロー、シアン、マゼンタ」になる

■#000000は黒
■#FF0000は明るい赤
■#00FF00は明るい緑
■#0000FFは明るい青
■#FFFFFFは白
■#FFFF00は明るい黄色
■#00FFFFは明るいシアン
■#FF00FFは明るいマゼンダ

明度の調整

色味を変えずに明るさだけを変更するには、3つのペアの数字の、左の数をそれぞれ同じ分だけ変更する。

下線の色を調整する

リンク文字には下線が入るが、下線のために文字が読みづらい場合がある。
その場合、＜a＞のタグの中に＜span＞を入れ、a文字の色を背景色に近くし、span文字を背景色と反対にすることで、可読性を調整する。

色面積の違いを整える

大きな見出しと小さな文字による文章があった時、同じ色を指定していても、小さく細かい文字のの方が色が薄く見えてしまう。
そのような場合、文章の色を濃くすることで見出しとのバランスを調整する。

背景色に温度を持たせる

灰色など「中間色」を背景にすると文字が読みやすくなる。その際、中間色が退屈な印象にならないようにするには。
カラーコードの6つの文字列のうち、両端のペアの数字の調整で、温かさや冷たさを表現する。
例）#404040を基準とした場合
左端のペアを50、右端のペアを30にしてやると、赤みが増し温かい印象。
左端のペアを30、右端のペアを50にしてやると、青みがかり冷たい印象
※左ペアと右ペアの差を調整することで、印象も変わってくる。

色のコーディネート

よくあるデザインのテクニック＞「写真と文章を組み合わせる際には写真の中で使われている色を使用する」
さらに、直接的に写真の中から色を選ぶのではなく、カラーコードを構成する数字のペアをそれぞれ組み合わせたものから色をチョイスする。
これらのカラーコードに含まれているペアの数字を組み合わせて作ったカラーコードが、その写真にマッチする色となる。
例）
空の色は#6081e8、山の色は#344283、森は#251c1e、地面は#775a30の場合
#60421e、#2553e8、#341c30　など

以上、カラーコードだからこそ、論理的に色の調整がしやすい。でも最後はやっぱり色彩感覚が必要。