IMAGE · 5/8 COLORS · PNG · CSS
アニメ色パレットジェネレーター
イラストから主要な5色または8色を端末内で抽出し、必要な色を固定してHEX・RGB・HSB付きで書き出せます。
アニメ色パレットを生成Toon Tone は、アニメキャラの代表色を記憶だけで再現する色当てゲームです。Toon Tone では色相・彩度・明度のスライダーで近い色を作ります。
色を合わせる対象
インスピレーション元 Teenage Mutant Ninja Turtles (1987)
あなたの色

正解

IMAGE · 5/8 COLORS · PNG · CSS
イラストから主要な5色または8色を端末内で抽出し、必要な色を固定してHEX・RGB・HSB付きで書き出せます。
アニメ色パレットを生成IMAGE · HEX · RGB · HSB
画像の正確なピクセルを選び、サーバーへ送信せずにHEX・RGB・HSBと5色パレットを作成できます。
画像から色を取得するIMAGE · RECOLOR · ALPHA · PNG
ローカル画像から色を採取し、許容範囲と陰影を調整して、色変更または透明化したPNGを保存できます。
色置換ツールを開くHEX · IMAGE · CSS NAMES · ΔE
HEX値や画像のピクセルを、最も近いCSSキーワード、測定した5候補、Toon Toneのキャラクター目標色と照合します。
この色の名前を調べるHSB · HEX · RGB
色相・彩度・明度を動かしながら、HEXとRGBを同じ画面で確認できます。
HSBピッカーを開くWHEEL · 5 RULES · CSS · PNG
基準HEXを選び、色相環の5つの配色ルールを比較し、実用的な役割を確認して再利用できるパレットを書き出します。
カラーハーモニーを作るHEX · TINTS · SHADES · WCAG
1つのHEXから、コントラスト値・CSS変数・PNG付きの明るい色から影までの配色を作れます。
シェードを生成WCAG 2.2 · AA · AAA · HEX
2色のWCAG AA・AAA判定、UIプレビュー、前景色の自動調整、最大8色の比較表を一つの画面で確認できます。
コントラストを確認IMAGE · PROTAN · DEUTAN · TRITAN
1枚の画像を3種類の色覚モデルで比較し、表示強度を調整して、ラベル付きPNGをサーバー送信なしで書き出せます。
色の見え方を確認CIEDE2000 · HEX · HSB
2つのHEXカラーを無料のCIEDE2000 Delta E計算機で比較。色見本、HSB差分、実用的な読み方、判断時の注意点を同じ画面で確認できます。
Delta E 計算機を開く最新記事
画面向けの制作中は編集可能なRGBマスターを維持します。最終出力、印刷条件、校正方法が決まり、印刷会社から指定されたときだけ、複製したファイルを目的のCMYKプロファイルへ変換します。
Toon Tone は、覚えているはずのキャラ色を正確な色相・彩度・明度まで合わせる練習です。Toon Tone の各問題は具体的なので、そのズレがゲームになります。
方法・根拠・編集上の責任
Toon Tone は、答えを見る前に指定されたアニメキャラの色を記憶だけで再現する無料ブラウザゲームです。このゲームは色相・彩度・明度を記録し、推測色と目標色を画面向けの色へ変換し、CIEDE2000で比較して0から100の説明可能なゲームスコアを返します。結果画面には両方の色と数値が残るため、次のラウンドで何を直すかを確認できます。
Toon Tone の1ラウンドは、名前のない色見本ではなく、キャラクター名と対象パーツから始まります。ゲームでは色相を0°から360°、彩度と明度を0%から100%の範囲で設定します。送信後、2組のHSB値を表示向けの色へ変換し、CIEDE2000色差を計算します。距離が小さいほど高得点になり、公開している式 score = round(100 − 2 × ΔE00) を0から100の範囲に収めます。
この数値はゲーム内のフィードバックであり、診断結果や工業規格の許容差ではありません。5ラウンド合計は最大500点で、共有結果は0から100の平均値です。画面には推測色と目標色、そのHSB値も並べて表示します。そのため、単なる点数ではなく、色相・彩度・明度のどこが最もずれたかを確認し、次の調整につなげられます。
デイリーseedは、その日に全員へ同じ5つの目標を再現します。ランキング保存時には、サーバーが送信されたHSB値と同じseedからスコアを再計算します。これは結果の一貫性を高めますが、ランキングを科学研究の標本にはしません。表示名とライブスコアは利用者が送信する変動データで、編集本文、出典、キーワード密度、構造化データの根拠には使いません。
このゲームは色差とアクセシビリティ上のコントラストを別の判断として扱います。CIEDE2000は2色の知覚的な差を比較しますが、WCAGのコントラスト比は文字と背景の読みやすさを確認します。そこでDelta E計算機とコントラストチェッカーを別々に提供します。高得点でも、WCAG監査、公式ブランド色、校正済み測定、印刷工程の承認を置き換えることはできません。
画面の見え方もゲーム体験に影響します。ディスプレイの色設定、明るさ、周囲光、OSのカラーマネジメントが違えば、同じ数値でも印象が変わる場合があります。入力範囲、推測値、目標値、計算結果を公開して手順を再現可能にしますが、すべての端末で同じ知覚を保証しません。制作物や印刷物では、承認された元データ、指定色空間、校正済み機器、適用される規格を使う必要があります。
色ツールはブラウザ内で動作し、入力したHEX、画像ピクセル、HSB値から確認可能な出力を作ります。しかしその出力は、元画像が正しい色管理を持つことや、スクリーンショットが公式資料であることを証明しません。照明、圧縮、透明度、広色域、画像プロファイルも結果へ影響します。計算内容と限界を表示し、最終的な権限や判断を隠さないことを編集方針にしています。
サイトは英語、スペイン語、日本語、韓国語、フランス語、ドイツ語、ロシア語、ポルトガル語の8言語で同等ルートを提供します。言語切替は、現在見ているページに対応するローカライズ先へ移動します。翻訳によって数値、式、出典、注意事項の意味を変えず、日付や文章だけを自然な表現へ調整します。
Toon Tone は、答え合わせのたびに次の Toon Tone ラウンドで直す項目を1つ決めると使いやすくなります。
| 項目 | 公開値 | 意味 |
|---|---|---|
| デイリー形式 | 5ラウンド | 指定された5つの目標を1つの結果にまとめます。 |
| HSB操作 | 3チャンネル | Toon Tone は色相・彩度・明度を分けて調整します。 |
| 入力範囲 | 0–360°; 0–100%; 0–100% | Toon Tone は各スライダーの範囲を画面に表示します。 |
| ラウンドと合計 | 0–100; 0–500 | Toon Tone は1問の点数と5問の合計を公開します。 |
| 言語ルート | 8言語 | Toon Tone は対応言語ごとに同等ページを維持します。 |
Toon Tone は測定に関する主張を一次規格または原著研究へ結び付けます。Toon Tone の問題数や点数範囲は公開中の画面とコードで確認し、Web色とアクセシビリティの定義は外部仕様を正とします。
W3C CSS Color仕様の原文:
“Hue is represented as an angle of the color circle.”
Toon Tone は精密な数値の過大解釈を避けるため限界を公開します。Toon Tone は娯楽と練習のためのツールです。
Toon Tone が出典を選び、変動するランキング投稿を分離し、公開情報を訂正する方法を読み、その後Delta E計算機で2色を直接比較できます。
FAQ
Toon Tone はアニメキャラの代表色を記憶だけで再現する色当てゲームです。
はい。Toon Tone はブラウザで無料プレイでき、アカウントも不要です。
Toon Tone は自分の色と正解色の見た目の差を測り、0から100点に変換します。
Toon Tone の初期素材はテスト用で、必要に応じて画像や問題を差し替えられる構造です。