カラーパレット生成ツール
ベースカラーを選択すると、補色・類似色・三角配色などの配色パレットを自動生成します。
補色 (Complementary)
#2563EB
#EBAC24
類似色 (Analogous)
#24C6EB
#2563EB
#4824EB
三角配色 (Triadic)
#2563EB
#EB2463
#63EB24
スプリット補色 (Split-Complementary)
#2563EB
#EB4824
#C6EB24
四角配色 (Square)
#2563EB
#EB24C6
#EBAC24
#24EB48
カラーパレット生成ツールの使い方
カラーピッカーまたはHEXコードを入力してベースカラーを選択します。
選択した色に基づいて、5種類の配色パレットが自動生成されます。
各色をクリック、またはコピーボタンでHEXコードをクリップボードにコピーできます。
Webデザインやグラフィックデザインの配色選びにご活用ください。
デザイン調整で見るべき点
- •生成したCSSや色は、ライト/ダークモード、モバイル、ブラウザ差で見え方が変わります。
- •色やコントラストは見た目だけでなく、読みやすさとアクセシビリティを基準に確認してください。
- •装飾値はそのまま採用するより、既存デザインシステムの余白・角丸・影に合わせて調整すると破綻しにくくなります。
関連ツール
🎨🖥️🌈🌈🖼️🎨🔤📱🔖👁️📐🎬
カラーコード変換
HEX・RGB・HSLのカラーコードを相互変換。プレビュー付きで色を確認。
アスペクト比計算
画面の幅と高さからアスペクト比を計算。動画・画像サイズに。
HTMLカラー名一覧
CSS/HTMLカラー名とコードを検索。127色対応。
CSSグラデーション生成
グラデーションCSSコードを視覚的に生成。
CSSボックスシャドウ生成
box-shadowをスライダーで視覚的に生成。
ランダムカラー生成
ランダムな色をHEX/RGB/HSLで生成。
フォントプレビュー
テキストを様々なフォントで比較プレビュー。
OGP画像サイズ一覧
SNS別のOGP推奨画像サイズを一覧表示。
ファビコンプレビュー
テキストや絵文字からファビコンをプレビュー。
コントラスト比チェック
WCAG基準で色のアクセシビリティを確認。
ピクセル⇔cm変換
DPI指定でpx/cm/mm/inchを相互変換。
CSSアニメーション生成
CSSアニメーションを視覚的に生成。