#777777

色値 色の表記。HEX(16進)・RGB(光の三原色)・HSL(色相/彩度/明度)・CMYK(印刷の4色・近似)。

HEX
#777777
RGB
rgb(119, 119, 119)
HSL
hsl(0, 0%, 47%)
OKLCH
oklch(56.9% 0 0)
CMYK
0% 0% 0% 53%
相対輝度 相対輝度。色の明るさを 0(黒)〜1(白)で表した値で、WCAG のコントラスト計算に使います。
0.1845
色相 色相。色みの種類(赤・橙・黄…)のこと。色相環を12分割して分類しています。
無彩色
最も近い色名 最も近い色名。この色に最も近い CSS 標準の色名です。
gray(グレー)

コントラスト

コントラスト比 コントラスト比。2色の明るさの差を 1:1〜21:1 で表した値。大きいほど読みやすくなります。 APCA(Lc) APCA。WCAG 3 ドラフトの新しい知覚コントラスト指標。Lc はおおむね 0〜106 で、大きいほど読みやすい。符号は明暗(明背景に暗文字か、その逆か)を表します。
背景に使う
白文字 4.48:1 -77
黒文字 4.69:1 33
文字色に使う
白背景 4.48:1 71
黒背景 4.69:1 -31

調和色

明暗トーン 明暗トーン。色相を保ったまま明るさを変えた5段階です。

シェード・ティント シェード・ティント。白を混ぜた淡い色(ティント)と黒を混ぜた濃い色(シェード)の階調です。

印象 印象。色が与える雰囲気のタグ(暖かい・穏やか・鮮やか など)。

配色プレビュー

背景に使う(黒文字)

コントラスト比 4.69:1 APCA(Lc) 33

背景に使う(白文字)

コントラスト比 4.48:1 APCA(Lc) -77

文字色に使う(白背景)

コントラスト比 4.48:1 APCA(Lc) 71

文字色に使う(黒背景)

コントラスト比 4.69:1 APCA(Lc) -31