PALUNEXA
色の一覧に戻る

色の観察ノート

この色を詳しく見る
#d700ff

色名、HEX、RGB、HSL、OKLCHに対応しています。登録は不要です。

選択中の色 · sRGB#d700ff
数値で見る色 · RGB / HSL / OKLCH
HEX
#d700ff
RGB
rgb(215, 0, 255)
HSL
hsl(290.59, 100%, 50%)
OKLCH
oklch(0.64294016 0.30987926 319.164734)

#d700ffを含むパレット

この色を含む配色を確認できます。編集時は選んだ色がロックされます。

気に入ったパレットを選び、色をコピーしたり、Studioで編集したりできます。

自動生成パレット

テトラード · #d700ff

スタジオで編集

詳細とコントラスト

既存のHSL配色エンジンによる計算結果です。編集パレット案とは区別しています。

色の役割の提案

背景
#d700ff
カード
#ff0028
アクセント
#28ff00
ボタン
#d700ff
文字
#00ffd7

文字 / 背景：3.05:1 — AA未満・代替色 #000000

文字 / カード：3.08:1 — AA未満・代替色 #000000

文字 / ボタン：3.05:1 — AA未満・代替色 #000000

文字と背景の組み合わせごとに確認してください。パレットの色は自動変更しません。

選んだ色をロックします。スタジオの基準色はパレットの先頭色です。

デザインへの活用

代表色で作った静的なデザイン例です。近い色には同じ参考例を案内しますが、パレットを変えても画像は再着色されません。

自動生成パレット

スクエア · #d700ff

スタジオで編集

詳細とコントラスト

既存のHSL配色エンジンによる計算結果です。編集パレット案とは区別しています。

色の役割の提案

背景
#d700ff
カード
#ff5700
アクセント
#28ff00
ボタン
#d700ff
文字
#00a8ff

文字 / 背景：1.51:1 — AA未満・代替色 #000000

文字 / カード：1.22:1 — AA未満・代替色 #000000

文字 / ボタン：1.51:1 — AA未満・代替色 #000000

文字と背景の組み合わせごとに確認してください。パレットの色は自動変更しません。

選んだ色をロックします。スタジオの基準色はパレットの先頭色です。

デザインへの活用

代表色で作った静的なデザイン例です。近い色には同じ参考例を案内しますが、パレットを変えても画像は再着色されません。

自動生成パレット

モノクロマティック · #d700ff

スタジオで編集

詳細とコントラスト

既存のHSL配色エンジンによる計算結果です。編集パレット案とは区別しています。

色の役割の提案

背景
#d700ff
カード
#40004d
アクセント
#810099
ボタン
#d700ff
文字
#f3b3ff

文字 / 背景：2.38:1 — AA未満・代替色 #000000

文字 / カード：9.59:1 — 通常文字AA

文字 / ボタン：2.38:1 — AA未満・代替色 #000000

文字と背景の組み合わせごとに確認してください。パレットの色は自動変更しません。

選んだ色をロックします。スタジオの基準色はパレットの先頭色です。

デザインへの活用

代表色で作った静的なデザイン例です。近い色には同じ参考例を案内しますが、パレットを変えても画像は再着色されません。

この色をスタジオで試す

02 / 配色

組み合わせで広がる色。

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

#d700ff

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

パレットのCSSを書き出す

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

01組み合わせ色
#5700ffrgb(87, 0, 255)oklch(0.49059632 0.29560513 280.55991)
コントラスト比: 7.37:1
02基準色
#d700ffrgb(215, 0, 255)oklch(0.64294016 0.30987926 319.164734)
コントラスト比: 5.33:1
03組み合わせ色
#ff00a8rgb(255, 0, 168)oklch(0.65888228 0.27462529 350.285988)
コントラスト比: 5.82:1
HSL / 類似色
色の情報と詳細ツール

選択中の色 / #D700FF

数値で見る色

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

HEX
#d700ff
RGB
rgb(215, 0, 255)
HSL
hsl(290.59, 100%, 50%)
OKLCH
oklch(0.64294016 0.30987926 319.164734)
色相
290.59°
彩度
100.00%
明度
50.00%
この配色の使いどころ

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

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

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

現在のパレット
調整後のプレビュー

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

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

元のHSL配色と比較

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

#5700ffoklch(0.49059632 0.29560513 280.55991)#d700ffoklch(0.64294016 0.30987926 319.164734)#ff00a8oklch(0.65888228 0.27462529 350.285988)
パレットのCSS
:root {
  --palette-1: #5700ff;
  --palette-2: #d700ff;
  --palette-3: #ff00a8;
}
デザインプレビュー

03 / デザインで確認

デザインに当てはめる。

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

パレットの役割を設定

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

your-next-idea.design
FORM & FIELD自由な発想。丁寧に選んだ色。
日々のアイデアのためのスタジオ

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

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

コレクションを見る

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

#ff00a8 / #d700ff · 1.09:1 · 通常の文字 · AA

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

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

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

デザインへの活用

代表色で作った静的なデザイン例です。近い色には同じ参考例を案内しますが、パレットを変えても画像は再着色されません。

文字のコントラスト検査

アクセシビリティ / WCAG AA

読みやすさも確かめる。

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

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

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

Aa

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

#d700ff / #ffffff
コントラスト比3.94:1
  • 通常の文字 · AA基準未満
  • 大きな文字 · AA基準を満たす
  • 通常の文字 · AAA基準未満
  • 大きな文字 · AAA基準未満

配色の基本を知る。

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

色の一覧に戻る