RGB から CSS 色名（Colortone） へ変換

このツールでできること

Canvas、ピクセルデータ、CSS、グラフィックスAPIで使うRGBをCSS色名の検索結果、または内蔵一覧で最も近い名前へ変換し、読みやすいCSSキーワードや分かりやすいスウォッチ名に利用します。 入力がすでにRGBで、次のシステムがCSS 色名（Colortone）を必要とするときに使います。複数表現を同時に見る場合は総合コンバーターが適しています。

確認済みの機能

適した用途

• 入力がすでにRGBで、次のシステムがCSS 色名（Colortone）を必要とするときに使います。複数表現を同時に見る場合は総合コンバーターが適しています。
• Canvas、ピクセルデータ、CSS、グラフィックスAPIで使うRGBをCSS色名の検索結果、または内蔵一覧で最も近い名前へ変換し、読みやすいCSSキーワードや分かりやすいスウォッチ名に利用します。
• RGB → COLORTONE: 読みやすいCSSキーワードや分かりやすいスウォッチ名.

使い方

1. 1

   元の色を入力

   赤・緑・青を0〜255で入力します。パーセントも解析し、整数チャンネルに正規化します。 「使い方: 元の色を入力」では、この内容をRGB から CSS 色名（Colortone） へ変換に合わせて適用します。

2. 2

   正規化されたプレビューを確認

   スライダー・直接入力・プリセット・利用可能なシステムピッカーを使えます。プレビューでCOLORTONE整形前の正規化を確認します。

3. 3

   変換値をコピー

   COLORTONEの行をコピーします。他形式も比較できますが、このページの目的はRGB → COLORTONEです。

4. 4

   精度の範囲を確認

   チャンネルの正規化と整数・パーセント整形により、RGB → COLORTONE → RGBの往復値が元と異なる場合があります。 再利用する前に、利用先の要件と結果を照合します。 COLORTONEをコピーする前に、プレビューで解析ミスを確認します。

操作項目の説明

結果の算出方法

赤・緑・青を0〜255で入力します。パーセントも解析し、整数チャンネルに正規化します。 入力をsRGBの3チャンネルへ変換してから、CSS色名の検索結果、または内蔵一覧で最も近い名前として整形します。ワークベンチはsRGBの0〜255チャンネルを前提とし、正規化後に丸めます。ColortoneはAppKiroにおけるCSS色名検索の呼称で、標準色空間ではありません。名前への変換はRGBのユークリッド距離を使います。

実用的なヒント

• 丸められたCOLORTONE結果と比較できるよう、元のRGB値を残します。
• COLORTONEをコピーする前に、プレビューで解析ミスを確認します。

トラブルシューティング

よくある質問

次のカラーワークフロー

入力がすでにRGBで、次のシステムがCSS 色名（Colortone）を必要とするときに使います。複数表現を同時に見る場合は総合コンバーターが適しています。 「次のカラーワークフロー」では、この内容をRGB から CSS 色名（Colortone） へ変換に合わせて適用します。

• HEX・RGB・HSL・LAB・OKLCH カラー変換
• CSS 色名（Colortone） から RGB へ変換
• カラーパレットジェネレーター