カラースタジオ
パレット、グラデーション、ホイール——完璧な色を見つけるすべての方法。
AIパレット生成
気分を説明するとマッチするパレットを取得 — 完全にブラウザ内で動作する本物のニューラルネットワーク搭載。サーバーなし、待ち時間なし、データは端末から出ません。
AI・ニューラルAIスタイルガイド
ブランドを説明すると、完全なデザインシステム——パレット、フォントペア、タイポグラフィスケール、スペーシング、角丸、シャドウ——をニューラルネットワークがマッチングし、1つのコピー可能なCSSブロックに組み立てます。
AI・デザインシステムカラー変換
HEX、RGB、HSL、CMYK、OKLCH の間で瞬時の双方向変換を行います。
コンバーター · すべてのフォーマットカラーハーモニー
任意のベースカラーから補色、トライアド、アナログ、スプリット補色のパレットを生成。スウォッチをクリックするだけでHEXコードをコピー。
カラー・理論AIカラーネーミング
任意の色値を入力すると、最も近い色名を見つけます——CSS標準色、中国の伝統色、日本の和色、その他12の文化の色彩。知覚的色彩科学が真に最も近い一致を見つけ、AIモデルが関連パレットテーマを提案します。
AI・色彩科学カラーホイール
色相、彩度、色の関係を調べるためのインタラクティブなカラーホイール。クリックして色を選択し、ロックします。
インタラクティブ・ビジュアルグラデーション生成
リアルタイムのキャンバス プレビューを使用して、美しい線形および放射状のグラデーションをデザインします。 CSS コードを即座にコピーします。
グラデーション・CSSエクスポートグラデーションプリセット
15 の美しいグラデーション プリセットを参照してコピーします。
プリセット·ワンクリック画像から抽出
スマート カラー量子化を使用して、あらゆる画像から美しいカラー パレットを抽出します。
抽出・スマートパレット生成
単色、補色、類似、および 3 つのモードを使用して、調和のとれた配色を作成します。 CSS エクスポートによるリアルタイム プレビュー。
カラー・インタラクティブティント＆シェード生成器
任意の色からフルティント＆シェードスケールを生成——20段階、HEX/SCSSエクスポート対応。
ティント, シェード, カラースケールエフェクト＆奥行き
シャドウ、ガラス、角丸——UIをリアルに感じさせる繊細なディテール。
ブロブメーカー
背景、アバター、セクション装飾に使える滑らかなオーガニック形状を生成。ワンクリックでランダム生成、曲率を微調整し、border-radiusまたはSVGコードをコピー。
CSS・オーガニック角丸生成
リアルタイム プレビューを備えた視覚的な境界線半径エディター。個別のコーナー コントロールを含む CSS コードをコピーします。
CSS・ビジュアルエディターシャドウ生成
マルチレイヤー化、リアルタイムの Canvas プレビュー、および CSS 出力を備えたインタラクティブなボックス シャドウ ビルダー。
CSS・階層化CSSボタンジェネレーター
数秒で美しいボタンをデザイン——6スタイル、カスタムカラー、角丸、パディング、CSSコピー対応。
ボタン生成, CSSボタン, ボタンデザインCSSフィルター生成
CSS filter()で視覚効果を構築 — ぼかし、明るさ、コントラスト、色相回転、セピアなど。サンプル画像でライブプレビュー、フィルターチェーン全体を即コピー。
CSS・画像エフェクトグラスモーフィズム生成
背景ぼかし、透過性、繊細なボーダーを備えたフロストガラスカードを作成。リアルタイムプレビューとコピー＆ペースト CSS。
UI・フロストガラスグラデーションテキスト生成器
グラデーション塗りとアニメーションで文字を際立たせる——角度と色を調整してCSSを即コピー。
グラデーションテキスト, 文字グラデーションテキストシャドウ生成
リアルタイムプレビューで多層テキストシャドウをデザイン。オフセット、ぼかし、色、不透明度を調整し、CSS を即コピー。
CSS・タイポグラフィ実用ツールキット
アクセシビリティと一貫性を保つチェック、変換、システム。
AI CSSスニペット
欲しいエフェクトを説明すると——光るボタン、ローディングスピナー、ガラスカード——ニューラルネットワークがマッチするCSSスニペットを見つけます。ライブレンダリングで確認し、すぐ使えるコードをコピー。
AI・コードライブラリ色覚シミュレーター
色覚異常のユーザーに色がどのように見えるかをシミュレートします。
アクセシビリティ·シミュレーションコントラストチェッカー
テキストと背景の色が WCAG AA/AAA に準拠していることを確認します。アクセシビリティの評価をすぐに取得できます。
アクセシビリティ · AA/AAAキュービックベジェ生成
ライブプレビューとアニメーションでカスタムCSSイージングカーブをデザイン。コントロールポイントをドラッグし、プリセットから選び、cubic-bezier()関数を即コピー。
CSS・モーションPXからREMへの変換
PXとREMを即座に双方向変換。基準フォントサイズ調整と変換テーブル付き。アクセシブルでスケーラブルなCSSに必須。
CSS・単位CSSトランスフォーム生成
回転、スケール、移動、スキューなどの CSS トランスフォームを視覚化して生成。ライブインタラクティブプレビューで、transform プロパティを即コピー。
CSS・アニメーションUIカラーシステム
単一のシード カラーから完全なデザイン トークン パレットを生成します。 Tailwind、CSS、または SCSS にエクスポートします。
デザイントークン・追い風レイアウト＆グリッド
グリッドと比率——すべてのインターフェースの構造的骨格。
アスペクト比計算
16:9、4:3、1:1、9:16、カスタムなど、あらゆるアスペクト比を計算・スケーリング。比率を保ったまま寸法を変更でき、一般的な解像度プリセット付き。
ユーティリティ・比率CSS Grid ジェネレーター
CSS Grid レイアウトをリアルタイムプレビューで視覚的に作成します。
CSS·ビジュアルエディター黄金比計算
レイアウト、タイポグラフィ、ロゴのための黄金比（1:1.618）寸法を計算。大小両方の黄金値を即座に取得でき、ビジュアルプレビュー付き。
レイアウト・比率SVGウェーブ生成器
Webサイト用の滑らかなSVGウェーブ区切りを作成——振幅・波長・レイヤーを調整してSVGをコピー。
SVGウェーブ, ウェーブ区切りタイポグラフィ工房
フォントペアリングとスケール——デザインの声。
AIフォントペアリング
プロジェクトを説明すると、ブラウザ内で動作する本物のニューラルネットワークがマッチしたプロ仕様のGoogleフォントペアを提案。ライブレンダリングで確認し、すぐ使えるCSSをコピー。
AI・フォントClamp計算機
CSS clamp()で流動的なタイポグラフィを生成。最小・推奨・最大サイズを設定し、完璧なclamp()式とビジュアルスケールプレビューを取得。
CSS・フルードタイプフォントペアリング
厳選されたコレクションから、見出しと本文の調和のとれたフォントの組み合わせを見つけてください。
タイポグラフィー · 300 以上のフォントタイポグラフィスケール生成
黄金比、長三度などの古典的な比率で調和のとれたモジュラータイプスケールを生成。サイズを視覚的にプレビューし、完全なCSSをコピー。
タイポグラフィ・スケール14言語
すべてのツール、ラベル、ガイドを完全翻訳。
アクセシビリティ優先
すべてのパレットには WCAG コントラスト スコアが含まれています。最初から包括的に設計します。
開発者向けエクスポート
CSS、Tailwind、SCSS、JSON — プロジェクトに必要な形式をコピーします。