色の観察ノート

この色を詳しく見る
#a8ff00

選択中の色 · sRGB#a8ff00

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

HEX: #a8ff00
RGB: rgb(168, 255, 0)
HSL: hsl(80.47, 100%, 50%)
OKLCH: oklch(0.9092937 0.24547729 130.203949)

この色をスタジオで試す

02 / 配色

組み合わせで広がる色。

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

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

01組み合わせ色

#ffd700rgb(255, 215, 0)oklch(0.88677107 0.18218604 95.330493)

コントラスト比: 14.97:1

02基準色

#a8ff00rgb(168, 255, 0)oklch(0.9092937 0.24547729 130.203949)

コントラスト比: 16.97:1

03組み合わせ色

#28ff00rgb(40, 255, 0)oklch(0.86889202 0.2914328 141.868035)

コントラスト比: 15.39:1

HSL / 類似色

色の情報と詳細ツール

選択中の色 / #A8FF00

数値で見る色

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

HEX

#a8ff00

RGB

rgb(168, 255, 0)

HSL

hsl(80.47, 100%, 50%)

OKLCH

oklch(0.9092937 0.24547729 130.203949)

色相: 80.47°
彩度: 100.00%
明度: 50.00%

この配色の使いどころ

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

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

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

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

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

現在のパレット

調整後のプレビュー

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

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

元のHSL配色と比較

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

#ffd700oklch(0.88677107 0.18218604 95.330493)#a8ff00oklch(0.9092937 0.24547729 130.203949)#28ff00oklch(0.86889202 0.2914328 141.868035)

パレットのCSS

:root {
  --palette-1: #ffd700;
  --palette-2: #a8ff00;
  --palette-3: #28ff00;
}

デザインプレビュー

03 / デザインで確認

デザインに当てはめる。

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

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

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

your-next-idea.design

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

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

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

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

コレクションを見る

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

#28ff00 / #a8ff00 · 1.10:1 · 通常の文字 · AA

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

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

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

文字のコントラスト検査

アクセシビリティ / WCAG AA

読みやすさも確かめる。

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

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

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

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

#a8ff00 / #ffffff

コントラスト比1.24:1

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

配色の基本を知る。

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

色の一覧に戻る

この色を詳しく見る#a8ff00