deblic ツール

ツール

カラーパレット / グラデーション

HEX・RGB・HSL を変換し、パレット作成、コントラスト確認、CSS グラデーション生成ができます。 UI の色組み合わせと文字コントラストを 1 か所で確認できます。

カラーパレット / グラデーション Overview

カラーツールでは、HEX、RGB、HSL 変換、パレット確認、コントラスト比、CSS グラデーション生成を 1 画面で扱えます。

ブランドカラーの調整や UI アクセシビリティの確認をするときに特に便利です。

役立つ場面

  • ブランドカラー組み合わせの整理
  • テキストのコントラスト比確認
  • CSS グラデーションの素早い作成

使い方

  1. 基準色を入力または選択します。
  2. 変換値、パレット、コントラスト比を確認します。
  3. 必要な CSS 値やカラーコードをコピーします。

よくある質問

どの色形式を変換できますか？

HEX、RGB、HSL を相互に変換でき、パレットやコントラスト比も同時に確認できます。

アクセシビリティのコントラスト確認はできますか？

はい。文字色と背景色の組み合わせごとにコントラスト比を確認できます。

一緒に使うと便利

アイコン / Favicon 生成1 枚の元画像から favicon、アプリアイコン、manifest 用 PNG セットを生成します。チャートメーカーJSON データを貼り付けて、さまざまな種類の SVG / PNG チャートを作成します。画像背景削除画像の外側背景や被写体まわりの背景を削除し、透過 PNG として保存します。