カラーパレット生成

このツールについて

任意のベースカラーから補色、類似色、三色配色などの調和のとれたパレットを生成します。デザインと開発にすぐ活用できます。

カラーパレット生成 — 調和とテーマは、色を視覚的に選択したり派生色を計算したりして、CSS やデザインシステムで使いやすい形式で表示します。HEX、RGB、HSL は同じ色を異なる座標で表したものです。

UI モック、デザイントークン、CSS 変数、配色を素早く確認してコピーしたいときに役立ちます。

使い方

1. 基準色を選択するか HEX 値を入力します。
2. 計算された色値またはパレットを確認します。
3. 必要な HEX、RGB、HSL、CSS 値をコピーします。
4. 実際の背景と文字でコントラストとアクセシビリティも確認します。

関連ツールと概念

• MDN HSL color
• カラーピッカー — HEX, RGB, HSL
• CSS単位変換 — px, rem, em & pt