カラーユーティリティ
HEX、RGB、HSLカラーの変換と、アクセシビリティのためのWCAGコントラスト比チェックを行います。
カラー変換
コントラストチェッカー (WCAG)
寿限無、寿限無、五劫の擦り切れ。素早い茶色の狐がのろまな犬を飛び越える。
カラー変換とコントラスト確認
Web制作では、HEX、RGB、HSLなど複数の色表現を使い分けます。デザインツール、CSS、ドキュメント、実装コードで形式が違うと、色の確認や共有に手間がかかります。このツールでは、色コードの変換やコントラスト確認を行い、UIの読みやすさと実装のしやすさを整えられます。
使える場面
- CSS実装: デザイン指定のHEXをRGBやHSLへ変換し、透明度やテーマカラーの調整に使えます。
- アクセシビリティ確認: 文字色と背景色のコントラスト比を見て、読みやすさの目安を確認できます。
- ブランド色の共有: 複数形式の色コードをまとめて確認し、チーム内の表記ゆれを減らせます。
色を選ぶときの注意
コントラスト比は重要な指標ですが、文字サイズ、太さ、周囲の余白、背景画像によって実際の見え方は変わります。数値だけでなく、実際の画面に置いた状態でも確認してください。暗色テーマと明色テーマの両方で使う色は、背景ごとに別々に検証すると安全です。
おすすめリソース
このセクションにはアフィリエイトリンクが含まれる場合があります。リンク経由で購入すると、追加費用なしでDevToolKits.appが紹介料を受け取ることがあります。
このツールの関連記事
最新記事
テーブル設計からCREATE TABLE文を自動生成する仕組み｜DDLビルダー
テーブルをビジュアルに設計してCREATE TABLE文とER図を生成するDDLビルダーの実装を解説。MySQL/PostgreSQL/SQLiteの型変換ルール、JSONサンプルからのカラム推論アルゴリズムまで実例付きで整理します。
GitHub Actions needs設計パターン集｜CIを速くする依存関係の組み方とアンチパターン
GitHub Actionsのneedsによるジョブ依存関係を、高速化パターンとアンチパターンの一覧表で整理。concurrencyによる重複実行キャンセル、fail-fast、matrix×needsの組み合わせ、再利用可能ワークフローまで実例付きで解説します。
SQL JOIN完全リファレンス｜INNER・LEFT・RIGHT・FULLの違いと結果行数の考え方
SQLのJOIN種類（INNER/LEFT/RIGHT/FULL/CROSS/SELF）を早見表と結果行数の図解で整理。1対多JOINで行が重複する理由、WHERE句とON句でNULL判定が変わる罠、複数テーブルJOINの書き方まで実例付きで解説します。
Case Converter ― camelCase・snake_case・kebab-caseを9種類まとめて一括変換
識別子や変数名をcamelCase・PascalCase・snake_case・CONSTANT_CASE・kebab-caseなど9種類の命名規則へ同時変換する方法を解説。連続大文字（HTTPServer）や数字の扱い、複数行の一括変換まで。
LLM APIコスト計算機 ― Claude・GPT・Geminiの料金を同じ条件で見積もり比較
プロンプトを貼り付けて想定出力トークン数を入れるだけで、Claude・GPT・GeminiのAPI利用コストをモデル横断で見積もる方法を解説。入力/出力の単価構造、料金の自動更新、概算の限界まで。
MermaidのER図（erDiagram）記法リファレンス｜リレーション記号一覧と実例
Mermaid erDiagramの書き方を網羅解説。カラスの足記法の記号一覧表、1対多・多対多の書き分け、属性・PK/FKの定義、実務で使えるEC設計の完全サンプルまで。