カラーユーティリティ
HEX、RGB、HSLカラーの変換と、アクセシビリティのためのWCAGコントラスト比チェックを行います。
カラー変換
コントラストチェッカー (WCAG)
寿限無、寿限無、五劫の擦り切れ。素早い茶色の狐がのろまな犬を飛び越える。
カラー変換とコントラスト確認
Web制作では、HEX、RGB、HSLなど複数の色表現を使い分けます。デザインツール、CSS、ドキュメント、実装コードで形式が違うと、色の確認や共有に手間がかかります。このツールでは、色コードの変換やコントラスト確認を行い、UIの読みやすさと実装のしやすさを整えられます。
使える場面
- CSS実装: デザイン指定のHEXをRGBやHSLへ変換し、透明度やテーマカラーの調整に使えます。
- アクセシビリティ確認: 文字色と背景色のコントラスト比を見て、読みやすさの目安を確認できます。
- ブランド色の共有: 複数形式の色コードをまとめて確認し、チーム内の表記ゆれを減らせます。
色を選ぶときの注意
コントラスト比は重要な指標ですが、文字サイズ、太さ、周囲の余白、背景画像によって実際の見え方は変わります。数値だけでなく、実際の画面に置いた状態でも確認してください。暗色テーマと明色テーマの両方で使う色は、背景ごとに別々に検証すると安全です。
最新記事
MermaidのER図（erDiagram）記法リファレンス｜リレーション記号一覧と実例
Mermaid erDiagramの書き方を網羅解説。カラスの足記法の記号一覧表、1対多・多対多の書き分け、属性・PK/FKの定義、実務で使えるEC設計の完全サンプルまで。
IP/CIDR サブネット計算機 ― ネットワーク・ブロードキャスト・マスクを即算出
192.168.1.10/24 のような CIDR から、ネットワークアドレス・ブロードキャスト・利用可能ホスト数・サブネットマスク・ワイルドカードを計算する方法と早見表を解説します。
SQLビルダーでSELECT・JOINクエリを視覚的に作成する方法
SQLビルダーを使ってSELECT、WHERE、JOINをブラウザ上で組み立てる方法を解説。SQL初心者の学習、データ抽出、レビュー前の確認に役立ちます。
CSVとJSONを相互変換する方法：API連携・データ移行での使い分け
表形式のCSVと構造化データのJSONを安全に変換するための考え方、ヘッダー行、区切り文字、型の扱い、実務での注意点を解説します。
JSON整形・検証の基本：APIレスポンスを読みやすく安全に確認する方法
APIレスポンスやログに含まれるJSONを整形し、構文エラーを見つけ、型生成やスキーマ化へつなげる実務的な確認手順を解説します。
インフラ構成図をブラウザで作成する方法｜Mermaid対応
サーバー、DB、ネットワークの構成をGUIで整理し、Mermaidコードや画像として出力する方法を解説します。