🎨
カラースタジオ
色変換・パレット生成・CSSグラデーション作成を一つに。WCAG対応。
R
G
B
rgb(59, 130, 246)
H
S
L
hsl(217, 91%, 60%)
C
M
Y
K
cmyk(76%, 47%, 0%, 4%)
カラースタジオについて
色変換: HEX, RGB, HSL, CMYK間の色変換。カラーピッカーとリアルタイムプレビュー付き。
パレット生成: ベースカラーから調和のとれた配色を自動生成。補色・類似色・トライアド・スプリット補色・モノクロに対応。WCAGコントラストチェック、CSS変数エクスポート機能付き。
グラデーション: 線形・放射・扇形のCSSグラデーションを2〜5色で作成。角度調整、プリセット、CSSコードのコピーが可能。
📖使い方ガイド
- 1カラーピッカーまたはHEX・RGB・HSLコードを入力します
- 2異なるカラーフォーマット間で即時変換されます
- 3コントラスト比やカラーパレット生成も確認できます
💡知っておくと便利
- •WCAGのアクセシビリティ基準ではコントラスト比4.5:1以上（AA）が推奨されています
- •補色（ヒュー+180°）は視認性の高い配色に。類似色（±30°）は統一感のあるデザインに使えます
- •デザインツール（Figma・Adobe XD）からHEXコードをコピーしてそのまま貼り付けられます
🔗 関連ツール
すべての計算はブラウザ内で完結。データがサーバーに送信されることはありません。