補色ファインダー
任意の色の補色(反対色)、RGB反転色、そしてその上で読みやすいテキストカラーを見つけます。
976回閲覧
補色とは?
2つの色が色相環上で正反対に位置する(色相が180°離れている)とき、それらは補色の関係にあります。並べて配置すると互いを引き立て合うため、補色はアクセントやCTA(行動喚起)ボタンの自然な選択肢になります。このツールは、RGB反転色(各チャンネルを255から引いた値 — いわゆる「写真のネガ」)と、輝度をもとに判定される、入力色に対して読みやすいテキストカラー(黒または白)も表示します。
よくある質問
補色と反転色は何が違いますか?
補色は彩度と明度を保ったまま色相環上の色相だけを反転させます。一方RGB反転色は各チャンネル(255−R、255−G、255−B)をすべて反転させます — まるで写真のネガのようにです。中間的なグレーの場合、両者の結果は大きく異なります。
補色はいつ使うべきですか?
ベースカラーが主体のデザインに対して、ボタン・リンク・ハイライトなど小さなアクセントとして使うのが基本です。両方を同じ分量でフル彩度のまま使うと、目がちらついて疲れやすくなります。
テキストカラーはどのように決まりますか?
色の知覚輝度(YIQ方式)にもとづいて決まります。明るい背景には暗いテキスト、暗い背景には明るいテキストが割り当てられ、コントラストの読みやすさが保たれます。
関連ツール
問題を報告
補色ファインダー