色の観察ノート

この色を詳しく見る
#6366f1

選択中の色 · sRGB#6366f1

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

HEX: #6366f1
RGB: rgb(99, 102, 241)
HSL: hsl(238.73, 83.53%, 66.67%)
OKLCH: oklch(0.58540431 0.20405526 277.117292)

この色をスタジオで試す

02 / 配色

組み合わせで広がる色。

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

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

01組み合わせ色

#63adf1rgb(99, 173, 241)oklch(0.72782854 0.12411308 248.001339)

コントラスト比: 8.78:1

02基準色

#6366f1rgb(99, 102, 241)oklch(0.58540431 0.20405526 277.117292)

コントラスト比: 4.70:1

03組み合わせ色

#a763f1rgb(167, 99, 241)oklch(0.64015129 0.20719847 303.074854)

コントラスト比: 5.70:1

HSL / 類似色

色の情報と詳細ツール

選択中の色 / #6366F1

数値で見る色

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

HEX

#6366f1

RGB

rgb(99, 102, 241)

HSL

hsl(238.73, 83.53%, 66.67%)

OKLCH

oklch(0.58540431 0.20405526 277.117292)

色相: 238.73°
彩度: 83.53%
明度: 66.67%

この配色の使いどころ

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

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

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

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

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

現在のパレット

調整後のプレビュー

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

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

元のHSL配色と比較

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

#63adf1oklch(0.72782854 0.12411308 248.001339)#6366f1oklch(0.58540431 0.20405526 277.117292)#a763f1oklch(0.64015129 0.20719847 303.074854)

パレットのCSS

:root {
  --palette-1: #63adf1;
  --palette-2: #6366f1;
  --palette-3: #a763f1;
}

デザインプレビュー

03 / デザインで確認

デザインに当てはめる。

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

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

表示中の文字色と背景 #000000 / #6366f1 · 4.70:1

your-next-idea.design

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

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

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

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

コレクションを見る

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

#a763f1 / #6366f1 · 1.21:1 · 通常の文字 · AA

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

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

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

文字のコントラスト検査

アクセシビリティ / WCAG AA

読みやすさも確かめる。

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

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

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

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

#6366f1 / #ffffff

コントラスト比4.47:1

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

配色の基本を知る。

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

色の一覧に戻る

この色を詳しく見る#6366f1