Color Dictionary
色を探す・比べる・学べる
KOBEYA LAB 色辞典
Web制作で使う基本色から、パステルカラー、日本の伝統色、洋色・世界の伝統色、トーン別カラーまで一覧で確認できます。
色見本とともにHEX・RGBを確認・コピーでき、Webデザインや色彩学習にも利用できます。
色辞典を見るWeb Creator Toolkit
Web制作に役立つ
CSS・デザインツール集
CSS、配色、画像、アニメーション、レイアウトなど、Web制作に使える便利なツールと色辞典をまとめています。
色を探す・比べる・学べる
目的から探す
色・配色を決めたい
色を探したり、配色やカラーコードを確認したいときに。
CSSを作りたい
グラデーションや装飾など、よく使うCSSを作成できます。
レスポンシブ・サイズを計算したい
画面サイズや文字サイズ、比率の計算に使えます。
レイアウトを作りたい
配置やレイアウトを確認しながらCSSを作成できます。
アニメーションを付けたい
動きを見ながらCSSアニメーションやhover効果を探せます。
画像を作る・加工したい
Web制作で使う画像の作成やサイズ調整に利用できます。
カテゴリから探す
全40件中 40件を表示
CSSグラデーションジェネレーター
背景やボタンに使えるCSSグラデーションを作成するためのツールです。
テキストグラデーション
文字にグラデーションをかけるCSSコードを作成できます。
CTAボタンジェネレーター
文言やグラデーション、枠線、角丸を調整してCTAボタンのHTMLとCSSを作成できます。
見出し装飾ジェネレーター
見出しの左右ライン・下線・左ボーダー・背景付き・マーカー・リボン風などを調整して、HTMLとCSSをコピーできるジェネレーターです。
ボーダージェネレーター
枠線、角丸、影などの見た目を確認しながらCSSを作るためのツールです。
box-shadow ジェネレーター
影の位置・ぼかし・広がり・色を調整しながら、box-shadow のCSSコードを作成できます。
CSSフィルタージェネレーター
画像や要素に適用するCSS filterの値を調整するためのツールです。
Backdrop Filterジェネレーター
背景のぼかしや明るさを調整しながら、backdrop-filter のCSSを作成できます。
CSS Clamp Function Generator
最小値・最大値・画面幅を指定して、レスポンシブに変化する clamp() のCSS値を生成できます。
rem / px 変換ツール
px と rem を相互変換し、基準フォントサイズも変更できます。
Aspect Ratio 計算ツール
幅・高さ・比率から aspect-ratio や必要なサイズを計算できます。
HEX / RGB / HSL 変換ツール
HEX、RGB、HSL のカラーコードを相互変換できます。
コントラストチェックツール
文字色と背景色のコントラスト比を確認し、読みやすい配色かチェックできます。
カラーパレット生成ツール
ベースカラーから、相性のよい配色パレットを生成できます。
rgba 透明度ジェネレーター
色と透明度を調整して、rgba() や hsla() のCSSコードを生成できます。
ストライプ背景ジェネレーター
斜線や縞模様の背景をCSSで生成するためのツールです。
CSS水玉背景ジェネレーター
CSSだけで水玉模様の背景を作れるジェネレーターです。縦一列・レンガ型の並びを選び、色やサイズ、間隔を調整できます。
サンプル画像ジェネレーター
カンプや教材に使えるダミー画像を、サイズ・色・テキストを指定して作成できます。
No Imageジェネレーター
サイトや記事で使える仮画像、No Image画像を作成するためのツールです。
WebP変換ツール
JPGやPNG画像をWebP形式に変換できます。
画像リサイズツール
画像の横幅・高さを指定して、リサイズ画像を作成できます。
フェードインアニメーションジェネレーター
ふわっと表示されるCSSアニメーションを選んで、CSSコードを作成できます。
ローディングアニメーションジェネレーター
CSSだけで作れるローディングアニメーションのHTMLとCSSを作成できます。
テキストアニメーションジェネレーター
見出しやテキストに使えるCSSアニメーションを調整しながら作成できます。
カードhoverアニメーションジェネレーター
カードUIに使えるhoverアニメーションを選んで、CSSコードを作成できます。
アニメーションサンプル集
CSSアニメーションの動きを一覧で確認できるサンプル集です。
CSS hover アニメーションサンプル集
リンクやボタン、カードに使える hover アニメーションを一覧で確認できます。
ナビゲーション hover アニメーション
リンクやメニューに使える hover アニメーションを作成できます。
ボタン hover アニメーション
CTAやリンクボタンに使える hover アニメーションを作成できます。
ふわふわ背景アニメーション
丸・四角・ひし形などの装飾がふわふわ動く背景を作れるCSSジェネレーターです。色・数・透明度・速度・形を調整してHTMLとCSSをコピーできます。
ふきだしジェネレーター
テキスト、余白、角丸、しっぽの位置を調整しながら、HTMLとCSSを作成できます。
矢印ジェネレーター
CSSだけで作れる矢印の向き・サイズ・色を調整しながら、HTMLとCSSを作成できます。
clip-path 三角形ジェネレーター
clip-pathを使って、向き・サイズ・色を調整しながらCSS三角形を作成できます。
ボックスデザイン／囲み枠ジェネレーター
メモ・注意・ポイントなどに使える囲み枠デザインを調整しながら、HTMLとCSSを作成できます。
CSS Grid Generator
列数・行数・gap を調整しながら、CSS Grid のコードを作成できます。
Flexbox Generator
justify-content や align-items などを選びながら、Flexbox のCSSを作成できます。
QRコードジェネレーター
URLやテキストを入力して、QRコード画像を作成できます。
ランダムパスワードジェネレーター
文字数や使用する文字種を選んで、ランダムなパスワードを簡単に生成できます。
meta / OGPタグ生成ツール
title、description、OGP画像などを入力して、head内に設置するmetaタグを作成できます。
構造化データ JSON-LD 生成ツール
サイトや記事、ツールページ用の構造化データを入力フォームから作成できます。