色の観察ノート

この色を詳しく見る
#a2b6cb

選択中の色 · sRGB#a2b6cb

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

HEX: #a2b6cb
RGB: rgb(162, 182, 203)
HSL: hsl(210.73, 28.28%, 71.57%)
OKLCH: oklch(0.76783723 0.03740288 249.60645)

この色をスタジオで試す

02 / 配色

組み合わせで広がる色。

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

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

01組み合わせ色

#a2cacbrgb(162, 202, 203)oklch(0.81060578 0.04234259 198.238002)

コントラスト比: 11.85:1

02基準色

#a2b6cbrgb(162, 182, 203)oklch(0.76783723 0.03740288 249.60645)

コントラスト比: 10.09:1

03組み合わせ色

#a3a2cbrgb(163, 162, 203)oklch(0.72725566 0.05905884 285.949467)

コントラスト比: 8.59:1

HSL / 類似色

色の情報と詳細ツール

選択中の色 / #A2B6CB

数値で見る色

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

HEX

#a2b6cb

RGB

rgb(162, 182, 203)

HSL

hsl(210.73, 28.28%, 71.57%)

OKLCH

oklch(0.76783723 0.03740288 249.60645)

色相: 210.73°
彩度: 28.28%
明度: 71.57%

この配色の使いどころ

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

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

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

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

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

現在のパレット

調整後のプレビュー

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

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

元のHSL配色と比較

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

#a2cacboklch(0.81060578 0.04234259 198.238002)#a2b6cboklch(0.76783723 0.03740288 249.60645)#a3a2cboklch(0.72725566 0.05905884 285.949467)

パレットのCSS

:root {
  --palette-1: #a2cacb;
  --palette-2: #a2b6cb;
  --palette-3: #a3a2cb;
}

デザインプレビュー

03 / デザインで確認

デザインに当てはめる。

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

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

表示中の文字色と背景 #000000 / #a2b6cb · 10.09:1

your-next-idea.design

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

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

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

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

コレクションを見る

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

#a3a2cb / #a2b6cb · 1.17:1 · 通常の文字 · AA

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

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

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

文字のコントラスト検査

アクセシビリティ / WCAG AA

読みやすさも確かめる。

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

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

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

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

#a2b6cb / #ffffff

コントラスト比2.08:1

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

配色の基本を知る。

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

色の一覧に戻る

この色を詳しく見る#a2b6cb