色彩調和理論に基づいた配色設計、WCAG 2.1 AA/AAAコントラスト比の計算、色覚シミュレーション、CSS/Tailwind変数出力の技術リファレンス。
色相環上で調和計算の基準となる主キーカラーの座標です。
HSL色相環上の幾何学的角度分割アルゴリズムを選択します。
文字の可読性を担保するための最低相対輝度比率しきい値です。
背景ニュートラル色に60%、カードやサブ要素に30%、高コントラストなアクセントCTAボタンに10%を配分すると視覚的調和が保たれます。
WCAG 1.4.1基準に従い、赤色のアラートには必ずアイコンや明確なテキスト文言を併記し、色覚多様性に配慮してください。
CSSタブを選択してコードをコピーすると、:root { --color-primary: ... } 定義をそのままグローバルCSSへ組み込めます。
高彩度の黄色は相対輝度が高いため白背景ではコントラスト不足になります。「AAA基準へ自動最適化」ボタンを押して輝度を適正化してください。
彩度100%同士の補色はハレーション（色収差による視覚振動）を起こします。一方の彩度を下げるか明度差を大きく広げてください。
AA基準は通常文字で4.5:1、大文字で3.0:1以上のコントラスト比を要求します。AAA基準は通常文字で7.0:1、大文字で4.5:1以上の厳格な視認性を求めます。
指定した色相（H）と彩度（S）を固定したまま、相対輝度計算式に基づきコントラスト比が7.0:1に到達するまで明度（L）を自動調整します。
1型2色覚（赤盲・Protanopia）、2型2色覚（緑盲・Deuteranopia）、3型2色覚（青盲・Tritanopia）、および全色盲（Achromatopsia）を網羅しています。
はい。Tailwindタブを選択すれば、tailwind.config.jsのtheme.extend.colorsにそのまま使える形式で出力されます。
Design organic blob shapes using full 8-value CSS border-radius syntax with draggable corner handles.
Visualize and fine-tune transition-timing-function curves with real-time motion comparators (ease, linear, custom overshoot).
Interactive visual gradient generator supporting multi-stop linear, radial, and conic CSS gradients with instant CSS code copy.
Compose multi-step @keyframes animations with visual play/pause controls, iteration counts, and keyframe percentage scrubbing.
Create extruded, recessed, flat, and concave neumorphic UI components with light and dark specular shadow calculations.
Generate glowing neon text, retro 3D extrusions, and letterpress engraving effects with live typography preview.