セマンティックカラーパレット生成ツール
制作しているWebサイトやUIについて入力してください。ローカルでセマンティック配色を生成し、エディターで確認・調整・書き出しまで進められます。
7つのセマンティックロール WCAGコントラスト検証 CSS・Tailwind・PNG
方向性を選び、色の役割を明確に。
実際によく検索されるスタイルから、出発点を選べます。
制作中の画面に合わせた配色。
背景#F9F9F6
面#FFFFFF
文字#171817
主役色#C1AC33
アクセント#4640E7
控えめ#797563
色の計算はブラウザの中で。
AI、ファイル送信、アカウント登録は不要です。
画像からカラーパレットを生成
画像から主要な5色、7色、または10色をブラウザ内で抽出します。ファイルが端末の外へ送信されることはありません。
ツールを開くカラーコントラストチェッカー
通常の文字と大きな文字のWCAGコントラスト比を測定し、AAを満たす最も近い文字色を提案します。
ツールを開くCSSグラデーション生成
色の位置と角度を編集しながら、線形または放射状のCSSグラデーションを作成します。
ツールを開くカラーミキサー
2色を指定した割合で混ぜ、結果をHEX、RGB、HSLで確認します。
ツールを開くカラースケール生成
1つのHEX値から、Tailwindのような11段階のカラースケールを生成します。
ツールを開くカラーコード変換
1つの色をHEX、RGB、HSL、HSV、OKLCHの間で相互変換します。
ツールを開くよく使われる色