カラーピッカー / 変換ツール

このツールについて

DevCove カラーピッカー & コンバーターは、frontend / design 開発者がブラウザーを離れず HEX、RGB、HSL を相互変換するためのツールです。前景 swatch を選び、CSS 色文字列を貼り付け、チャンネル値を編集し、すぐ使える CSS snippet をコピーできます。背景色に対するテキストを簡略 WCAG contrast ratio と AA / AAA ヒントで比較できます。ブラウザーが EyeDropper API をサポートする場合、画面上の任意の色をサンプルできます。

使い方

テーマ、コンポーネント、アクセシビリティ確認向け CSS 値が必要なときに使います:

1. ネイティブ color input または HEX / RGB / HSL 文字列の貼り付けで前景色を選びます。
2. HEX、RGB、HSL チャンネル欄を編集 — 入力に応じて値は同期されます。
3. 背景 swatch を設定し、簡略 WCAG ratio ヒントでテキスト contrast を評価します。
4. 個別形式をコピーするか、Copy all formats で design handoff メモ用にまとめてコピーします。
5. ブラウザーが EyeDropper API をサポートする場合、Pick color で画面からサンプルします。
6. DevCove blue、slate black、success green など preset を読み込んで素早く開始できます。

機能

フル design system 管理ではなく、日常 CSS / UI 作業向けに設計されています:

• HEX、RGB、HSL 欄間の live 同期。
• サンプルテキスト付き前景・背景プレビュー。
• AA / AAA / 大きいテキストヒント付き簡略 WCAG contrast ratio。
• HEX、RGB、HSL、または bundled 形式出力のコピー。
• #hex、rgb()、rgba()、hsl()、hsla() 文字列向け paste parser。
• 一般的な brand / semantic 色向け preset swatch。
• 利用可能な場合のブラウザー EyeDropper サポート。
• 100% クライアント側 — 色はアップロードされません。
• frontend ワークフロー向け HTML Entity Encoder、URL Encoder、Regex Tester を補完。

よくある質問