数値で見る色 · RGB / HSL / OKLCH
- HEX
#e6e6fa- RGB
rgb(230, 230, 250)- HSL
hsl(240, 66.67%, 94.12%)- OKLCH
oklch(0.93090233 0.02694143 285.864799)
この色にはどんな特徴がありますか？
赤と緑が同じ値で、青が少し高い淡い色です。小さな見本が白に近く見える画面でも、中立的な白ではありません。
このHEXにはCSSキーワード名もあります。
組み合わせで広がる色。
補色
HSL色相環で180°離れた2色です。向かい合う色が強い対比を生みます。
類似色
基準色を中心に−30°・0°・+30°に位置する、隣り合った色です。
トライアド
0°・120°・240°に配置した3色です。色相環を等間隔に3分割します。
デザインでの使用例
読書メモ、選択されたパネル、落ち着いたスライドの背景に使えます。別のパステル文字色より、ネイビーの見出しのほうが階層を明確にできる場合があります。
デザインの提案は文脈に依存し、数値の計算とは別です。
使う前に確認すること
白との差だけでは入力欄や選択状態を識別できない場合があります。枠線、ラベル、色以外の手がかりも加えましょう。
読みやすさも確かめる。 / CSS
コントラスト比 · #e6e6fa| 選択中の色 | コントラスト比 | 通常の文字 · AA |
|---|
| 黒 | 17.06:1 | 基準を満たす |
|---|
| 白 | 1.23:1 | 基準未満 |
|---|
CSSの使用例
.color-surface {
background: #e6e6fa;
color: #000000;
}
よくある質問と答え
#e6e6faの数値は何ですか？
#e6e6faはrgb(230, 230, 250)、hsl(240, 66.67%, 94.12%)、oklch(0.93090233 0.02694143 285.864799)です。同じ不透明なsRGB色から計算しています。
#e6e6faの背景にはどの文字色が読みやすいですか？
黒は17.06:1、白は1.23:1です。この2色では黒のほうが高いコントラストです。通常文字のAA基準は4.5:1以上です。
補色パレットはどう計算しますか？
HSL色相を180°回転し、彩度と明度は保ちます。この色の結果は#e6e6fa, #fafae6です。無彩色は無彩色のままです。
白い背景の本文にラベンダーを使えますか？
淡い背景色が文字にも向くとは限りません。下の白との比率を確認し、本文には基準を満たす暗い文字色を選びましょう。
この色をスタジオで試す
色相環のルールを使って、色の新しい表情を探しましょう。
基準色を中心に−30°・0°・+30°に位置する、隣り合った色です。
01組み合わせ色
#e6f0fargb(230, 240, 250)oklch(0.95055246 0.01721226 248.008865)
02基準色
#e6e6fargb(230, 230, 250)oklch(0.93090233 0.02694143 285.864799)
03組み合わせ色
#f0e6fargb(240, 230, 250)oklch(0.93867721 0.02869168 308.121742)
HSL / 類似色 色の情報と詳細ツール
選択中の色 / #E6E6FA
数値で見る色
ひとつの色を4つの形式で表します。
OKLCHoklch(0.93090233 0.02694143 285.864799) - 色相
- 240.00°
- 彩度
- 66.67%
- 明度
- 94.12%
この配色の使いどころ
以下は主観的なデザインの提案です。色相の角度とコントラスト比は計算値です。
- 用途の提案
- 読み物のページ、暮らしのブランド、落ち着いた画面。
- 長所
- 近い色相で、つながりのある雰囲気を作れます。
- 注意点
- 境界が曖昧になりやすいため、見出しや余白でも区別しましょう。
- 使用例
- 中央の色をメイン領域に、その両隣の色を装飾カードに使えます。
OKLCH · 明るさと鮮やかさを調整
未ロックの組み合わせ色の明度と彩度をOKLCHで調整します。HSLでの色相間隔が変わる場合があります。結果を見比べてから適用してください。
sRGBに収めるため彩度を下げた色：0色
基準色は固定です。ロック中の色と基準色は再生成・補正でも変わりません。
元のHSL配色と比較
編集前の理論上の配色です。上のパレットのHEX・OKLCH値と見比べてください。
#e6f0faoklch(0.95055246 0.01721226 248.008865)#e6e6faoklch(0.93090233 0.02694143 285.864799)#f0e6faoklch(0.93867721 0.02869168 308.121742)
パレットのCSS
:root {
--palette-1: #e6f0fa;
--palette-2: #e6e6fa;
--palette-3: #f0e6fa;
}
デザインプレビュー
選んだ色を実際のCSSで確認できます。
パレットの役割を設定表示中の文字色と背景 #000000 / #e6e6fa · 17.06:1
your-next-idea.design
FORM & FIELD自由な発想。丁寧に選んだ色。 日々のアイデアのためのスタジオ新しい視点が生まれる場所。
日々の小さな好奇心から、新しいアイデアが始まります。
コレクションを見る
この文字色と背景色は通常文字のAA基準を満たしません。
#f0e6fa / #e6e6fa · 1.02:1 · 通常の文字 · AA
代わりの文字色：#000000（17.06:1）。
表示中の文字のコントラスト比：17.06:1 · 読みやすい文字色はプレビューにだけ適用され、パレットの色は変わりません。
検査した色の組み合わせは、色付きのボタン・カード・指標・スライドの帯に使われます。その他の文字は#f6f3ecの上に#262a23（13.18:1）または#55594f（6.47:1）を使います。グラフには番号も付いています。アクセシビリティ全体の監査ではありません。
文字のコントラスト検査
アクセシビリティ / WCAG AA
読みやすさも確かめる。
選択中の色と、文字色または背景色のコントラストを確認します。
推奨する文字色: #000000 · 21.00:1
AAの基準は通常の文字で4.5:1、大きな文字で3:1です。この検査だけでWCAG全体への適合は判断できません。
Aa色を楽しみ、文字を読みやすく。
#e6e6fa / #ffffff コントラスト比1.23:1
- 通常の文字 · AA基準未満
- 大きな文字 · AA基準未満
- 通常の文字 · AAA基準未満
- 大きな文字 · AAA基準未満
配色の基本を知る。
PALUNEXAはHSL色相環上で色相を回転し、彩度と明度を保って配色します。モノクロマティックでは明度を変えます。計算結果はデザインの出発点であり、すべての人に好まれる配色を保証するものではありません。
色の一覧に戻る