Toon Tone

Toon Tone は、アニメキャラの代表色を記憶だけで再現する色当てゲームです。Toon Tone では色相・彩度・明度のスライダーで近い色を作ります。

初期問題 46 件毎日5ラウンドアカウント不要
1/5

色を合わせる対象

Leonardoの青いアイマスク

インスピレーション元 Teenage Mutant Ninja Turtles (1987)

あなたの色

Leonardo from Teenage Mutant Ninja Turtles (1987)
青いアイマスク
H239 S52 B72

正解

Leonardo from Teenage Mutant Ninja Turtles (1987)
青いアイマスク
送信後に表示
新しいインタラクティブテストキャラクター色記憶テストキャラクターの色を3秒だけ観察し、見本が消えたあとにHSBで再現して、5ラウンドの平均スコアを確認できます。色記憶テストを始める新しい赤色ガイド赤いアニメキャラクター赤いアニメキャラクターを、遊べるHEX・HSB値、対象パーツ、色の比較、Toon Toneの個別練習リンク付きで紹介します。赤色を練習

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

HSBカラーピッカー

色相・彩度・明度を動かしながら、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

Delta E 計算機

2つのHEXカラーを無料のCIEDE2000 Delta E計算機で比較。色見本、HSB差分、実用的な読み方、判断時の注意点を同じ画面で確認できます。

Delta E 計算機を開く

最新記事

RGB vs CMYK:画面と印刷の実践カラーモードガイド

画面向けの制作中は編集可能なRGBマスターを維持します。最終出力、印刷条件、校正方法が決まり、印刷会社から指定されたときだけ、複製したファイルを目的のCMYKプロファイルへ変換します。

Toon Tone でランダムな色ではなく、キャラの記憶色を当てる。

Toon Tone は、覚えているはずのキャラ色を正確な色相・彩度・明度まで合わせる練習です。Toon Tone の各問題は具体的なので、そのズレがゲームになります。

ライブ

色当て上位

  1. 1TonePlayer 30742026-08-1275.60/100
  2. 2TonePlayer 29532026-08-1267.80/100
ランキングを見る

方法・根拠・編集上の責任

Toon Tone が記憶した色を測定可能なゲームにする方法

Toon Tone は、答えを見る前に指定されたアニメキャラの色を記憶だけで再現する無料ブラウザゲームです。このゲームは色相・彩度・明度を記録し、推測色と目標色を画面向けの色へ変換し、CIEDE2000で比較して0から100の説明可能なゲームスコアを返します。結果画面には両方の色と数値が残るため、次のラウンドで何を直すかを確認できます。

Toon Tone の採点方法

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 は、答え合わせのたびに次の Toon Tone ラウンドで直す項目を1つ決めると使いやすくなります。

  1. 1. Toon Tone の目標を言葉にする対象パーツを読み、色の系統を思い浮かべ、送信するまで Toon Tone に保存済みの答えを隠します。
  2. 2. Toon Tone の推測色を作る最初に色相、次に彩度、最後に明度を合わせると、Toon Tone の修正理由を説明しやすくなります。
  3. 3. Toon Tone の結果を見直すHSBの各値とCIEDE2000を使った Toon Tone スコアを比べ、最大のずれを次の問題で修正します。

Toon Tone の確認可能な基本データ

2026年8月1日に確認した Toon Tone の再現可能な製品データ
項目公開値意味
デイリー形式5ラウンド指定された5つの目標を1つの結果にまとめます。
HSB操作3チャンネルToon Tone は色相・彩度・明度を分けて調整します。
入力範囲0–360°; 0–100%; 0–100%Toon Tone は各スライダーの範囲を画面に表示します。
ラウンドと合計0–100; 0–500Toon Tone は1問の点数と5問の合計を公開します。
言語ルート8言語Toon Tone は対応言語ごとに同等ページを維持します。

Toon Tone の色説明を支える規格

Toon Tone は測定に関する主張を一次規格または原著研究へ結び付けます。Toon Tone の問題数や点数範囲は公開中の画面とコードで確認し、Web色とアクセシビリティの定義は外部仕様を正とします。

W3C CSS Color仕様の原文:

“Hue is represented as an angle of the color circle.”

Toon Tone が参照する一次資料

  1. CSS Color Module Level 4CSS Color Level 4は、Toon Tone が説明する色相角とsRGB表現を定義します。
  2. Web Content Accessibility Guidelines (WCAG) 2.2WCAG 2.2は、別の Toon Tone コントラストツールで使う4.5:1と3:1の基準を公開しています。
  3. The CIEDE2000 color-difference formulaSharma、Wu、Dalalの原著は、Toon Tone の色差計算に関係するCIEDE2000実装と試験データを示します。

Toon Tone スコアが証明しないこと

Toon Tone は精密な数値の過大解釈を避けるため限界を公開します。Toon Tone は娯楽と練習のためのツールです。

  • Toon Tone は色覚、視力、記憶、健康状態を診断しません。
  • Toon Tone はスタジオ、ブランド、印刷、塗料、製造の公式色を証明しません。
  • Toon Tone はWCAG検査、校正済み測定、適用規格による審査を置き換えません。

Toon Tone の方法を確認する

Toon Tone が出典を選び、変動するランキング投稿を分離し、公開情報を訂正する方法を読み、その後Delta E計算機で2色を直接比較できます。

FAQ

Toon Tone のよくある質問

Toon Tone とは?

Toon Tone はアニメキャラの代表色を記憶だけで再現する色当てゲームです。

無料で遊べますか?

はい。Toon Tone はブラウザで無料プレイでき、アカウントも不要です。

スコアはどう決まる?

Toon Tone は自分の色と正解色の見た目の差を測り、0から100点に変換します。

キャラ素材は差し替えできますか?

Toon Tone の初期素材はテスト用で、必要に応じて画像や問題を差し替えられる構造です。