01組み合わせ色
#4d74d8rgb(77, 116, 216)oklch(0.58143383 0.15917029 265.66869)コントラスト比: 4.81:1
色の観察ノート
この色を詳しく見る
#6b4dd8
選択中の色 · sRGB#6b4dd8
数値で見る色 · RGB / HSL / OKLCH
- HEX
#6b4dd8- RGB
rgb(107, 77, 216)- HSL
hsl(252.95, 64.06%, 57.45%)- OKLCH
oklch(0.53169163 0.20219005 287.340703)
この色をスタジオで試す
02 / 配色
組み合わせで広がる色。
色相環のルールを使って、色の新しい表情を探しましょう。
基準色を中心に−30°・0°・+30°に位置する、隣り合った色です。
02基準色
#6b4dd8rgb(107, 77, 216)oklch(0.53169163 0.20219005 287.340703)コントラスト比: 5.71:1
03組み合わせ色
#b14dd8rgb(177, 77, 216)oklch(0.60769762 0.21452029 315.111515)コントラスト比: 4.92:1
HSL / 類似色
色の情報と詳細ツール
選択中の色 / #6B4DD8
数値で見る色
ひとつの色を4つの形式で表します。
HEX
#6b4dd8RGB
rgb(107, 77, 216)HSL
hsl(252.95, 64.06%, 57.45%)OKLCH
oklch(0.53169163 0.20219005 287.340703)- 色相
- 252.95°
- 彩度
- 64.06%
- 明度
- 57.45%
この配色の使いどころ
以下は主観的なデザインの提案です。色相の角度とコントラスト比は計算値です。
- 用途の提案
- 読み物のページ、暮らしのブランド、落ち着いた画面。
- 長所
- 近い色相で、つながりのある雰囲気を作れます。
- 注意点
- 境界が曖昧になりやすいため、見出しや余白でも区別しましょう。
- 使用例
- 中央の色をメイン領域に、その両隣の色を装飾カードに使えます。
OKLCH · 明るさと鮮やかさを調整
未ロックの組み合わせ色の明度と彩度をOKLCHで調整します。HSLでの色相間隔が変わる場合があります。結果を見比べてから適用してください。
現在のパレット
調整後のプレビュー
sRGBに収めるため彩度を下げた色：0色
基準色は固定です。ロック中の色と基準色は再生成・補正でも変わりません。
元のHSL配色と比較
編集前の理論上の配色です。上のパレットのHEX・OKLCH値と見比べてください。
#4d74d8oklch(0.58143383 0.15917029 265.66869)#6b4dd8oklch(0.53169163 0.20219005 287.340703)#b14dd8oklch(0.60769762 0.21452029 315.111515)パレットのCSS
:root {
--palette-1: #4d74d8;
--palette-2: #6b4dd8;
--palette-3: #b14dd8;
}デザインプレビュー
03 / デザインで確認
デザインに当てはめる。
選んだ色を実際のCSSで確認できます。
パレットの役割を設定
表示中の文字色と背景 #ffffff / #6b4dd8 · 5.71:1
your-next-idea.designFORM & FIELD自由な発想。丁寧に選んだ色。
日々のアイデアのためのスタジオ
新しい視点が生まれる場所。
日々の小さな好奇心から、新しいアイデアが始まります。
コレクションを見るこの文字色と背景色は通常文字のAA基準を満たしません。
#b14dd8 / #6b4dd8 · 1.34:1 · 通常の文字 · AA
代わりの文字色：#ffffff（5.71:1）。
表示中の文字のコントラスト比：5.71:1 · 読みやすい文字色はプレビューにだけ適用され、パレットの色は変わりません。
検査した色の組み合わせは、色付きのボタン・カード・指標・スライドの帯に使われます。その他の文字は#f6f3ecの上に#262a23（13.18:1）または#55594f（6.47:1）を使います。グラフには番号も付いています。アクセシビリティ全体の監査ではありません。
文字のコントラスト検査
アクセシビリティ / WCAG AA
読みやすさも確かめる。
選択中の色と、文字色または背景色のコントラストを確認します。
AAの基準は通常の文字で4.5:1、大きな文字で3:1です。この検査だけでWCAG全体への適合は判断できません。
Aa
色を楽しみ、文字を読みやすく。
#6b4dd8 / #ffffffコントラスト比5.71:1
- 通常の文字 · AA基準を満たす
- 大きな文字 · AA基準を満たす
- 通常の文字 · AAA基準未満
- 大きな文字 · AAA基準を満たす
配色の基本を知る。
PALUNEXAはHSL色相環上で色相を回転し、彩度と明度を保って配色します。モノクロマティックでは明度を変えます。計算結果はデザインの出発点であり、すべての人に好まれる配色を保証するものではありません。
色の一覧に戻る