色の観察ノート

この色を詳しく見る
#9ca5b8

選択中の色 · sRGB#9ca5b8

数値で見る色 · RGB / HSL / OKLCH

HEX: #9ca5b8
RGB: rgb(156, 165, 184)
HSL: hsl(220.71, 16.47%, 66.67%)
OKLCH: oklch(0.72094915 0.02942667 265.377431)

この色をスタジオで試す

02 / 配色

組み合わせで広がる色。

色相環のルールを使って、色の新しい表情を探しましょう。

基準色を中心に−30°・0°・+30°に位置する、隣り合った色です。

01組み合わせ色

#9cb3b8rgb(156, 179, 184)oklch(0.75081282 0.02637949 212.271672)

コントラスト比: 9.55:1

02基準色

#9ca5b8rgb(156, 165, 184)oklch(0.72094915 0.02942667 265.377431)

コントラスト比: 8.49:1

03組み合わせ色

#a19cb8rgb(161, 156, 184)oklch(0.706268 0.04075745 293.518107)

コントラスト比: 7.96:1

HSL / 類似色

色の情報と詳細ツール

選択中の色 / #9CA5B8

数値で見る色

ひとつの色を4つの形式で表します。

HEX

#9ca5b8

RGB

rgb(156, 165, 184)

HSL

hsl(220.71, 16.47%, 66.67%)

OKLCH

oklch(0.72094915 0.02942667 265.377431)

色相: 220.71°
彩度: 16.47%
明度: 66.67%

この配色の使いどころ

以下は主観的なデザインの提案です。色相の角度とコントラスト比は計算値です。

用途の提案: 読み物のページ、暮らしのブランド、落ち着いた画面。
長所: 近い色相で、つながりのある雰囲気を作れます。
注意点: 境界が曖昧になりやすいため、見出しや余白でも区別しましょう。
使用例: 中央の色をメイン領域に、その両隣の色を装飾カードに使えます。

OKLCH · 明るさと鮮やかさを調整

未ロックの組み合わせ色の明度と彩度をOKLCHで調整します。HSLでの色相間隔が変わる場合があります。結果を見比べてから適用してください。

OKLCHの明度調整 0%OKLCHの彩度倍率 100%

現在のパレット

調整後のプレビュー

sRGBに収めるため彩度を下げた色：0色

基準色は固定です。ロック中の色と基準色は再生成・補正でも変わりません。

元のHSL配色と比較

編集前の理論上の配色です。上のパレットのHEX・OKLCH値と見比べてください。

#9cb3b8oklch(0.75081282 0.02637949 212.271672)#9ca5b8oklch(0.72094915 0.02942667 265.377431)#a19cb8oklch(0.706268 0.04075745 293.518107)

パレットのCSS

:root {
  --palette-1: #9cb3b8;
  --palette-2: #9ca5b8;
  --palette-3: #a19cb8;
}

デザインプレビュー

03 / デザインで確認

デザインに当てはめる。

選んだ色を実際のCSSで確認できます。

パレットの役割を設定メインカラー / 背景文字色 / アクセント

表示中の文字色と背景 #000000 / #9ca5b8 · 8.49:1

your-next-idea.design

FORM & FIELD自由な発想。丁寧に選んだ色。

日々のアイデアのためのスタジオ

新しい視点が生まれる場所。

日々の小さな好奇心から、新しいアイデアが始まります。

コレクションを見る

この文字色と背景色は通常文字のAA基準を満たしません。

#a19cb8 / #9ca5b8 · 1.07:1 · 通常の文字 · AA

代わりの文字色：#000000（8.49:1）。

表示中の文字のコントラスト比：8.49:1 · 読みやすい文字色はプレビューにだけ適用され、パレットの色は変わりません。

検査した色の組み合わせは、色付きのボタン・カード・指標・スライドの帯に使われます。その他の文字は#f6f3ecの上に#262a23（13.18:1）または#55594f（6.47:1）を使います。グラフには番号も付いています。アクセシビリティ全体の監査ではありません。

文字のコントラスト検査

アクセシビリティ / WCAG AA

読みやすさも確かめる。

選択中の色と、文字色または背景色のコントラストを確認します。

推奨する文字色: #000000 · 21.00:1

AAの基準は通常の文字で4.5:1、大きな文字で3:1です。この検査だけでWCAG全体への適合は判断できません。

色を楽しみ、文字を読みやすく。

#9ca5b8 / #ffffff

コントラスト比2.47:1

通常の文字 · AA基準未満
大きな文字 · AA基準未満
通常の文字 · AAA基準未満
大きな文字 · AAA基準未満

配色の基本を知る。

PALUNEXAはHSL色相環上で色相を回転し、彩度と明度を保って配色します。モノクロマティックでは明度を変えます。計算結果はデザインの出発点であり、すべての人に好まれる配色を保証するものではありません。

色の一覧に戻る

この色を詳しく見る#9ca5b8