必要なツールを、すぐに使えるように

色コードクイズ

出題方向、コード形式、難易度を選んで始めましょう。色見本かコードを見て4択から答えると、その場で正解とRGBの内訳が表示されます。

01 / クイズ

どちらの方向で練習しますか？

出題方向

コード形式

難易度選択肢の色の差

全10問 · 時間制限なし · 回答後すぐに解説

色 / 練習カードプレビュー

#3469D1HEXはRGBの3チャンネルを16進数で表します。

CSSの色コードを学ぶためのクイズです。色覚の検査や診断には使えません。

最終更新日: 2026年9月29日

ROBERIN基準必要なツールを、
すぐ使える形で。

すぐ見える画面入力場所と結果の場所をはっきり分けます。
結果を先に大事な数字を先に出し、過程は必要な分だけ見せます。
求めるものを減らす登録や余計な入力なしで使えるようにします。

ROBERIN

色コードの読み方とクイズの解き方

色コードクイズは画面の色とHEX・RGBの数値を結びつける練習です。色からコードを選ぶか、コードから色を選びます。4つの選択肢から答えると正解と赤・緑・青の値を確認できます。

Webデザインで色を読み、調整するための練習です。10問で時間制限はありません。色覚検査や診断の結果として解釈しないでください。

この色コードクイズで何を練習しますか？

画面の色とCSSのHEX・RGB値を結びつけます。ボタンや背景の色を扱うWeb制作では、色見本と数値の行き来が役に立ちます。色からコード、コードから色の両方向を試せます。

色見本からコードを選び、見た目と数値を比べます。
コードから色を選び、数値から見た目を予想します。
どちらも4択で、回答後すぐにRGBの内訳が分かります。

10問をどう進めますか？

方向、HEX・RGB・ランダムの形式、難易度を選んで開始します。各問で1つ答えると解説が開き、「次の問題」で進みます。時間制限はなく、数字キー1～4でも回答できます。

初めてなら「色からコード」「HEX」「やさしい」から始めましょう。
各問は一度だけ回答できます。二度押しても得点は変わりません。
終了後は得点、正答率、間違えた問題を確認できます。

HEXコードの読み方は？

HEXは#の後に赤(R)・緑(G)・青(B)を2桁ずつ並べます。各組は16進数の00～FFで、10進数では0～255です。たとえば#FF6600は赤FF(255)、緑66(102)、青00(0)のオレンジ系の色です。

#000000は3チャンネルとも0で黒です。
#FFFFFFは3チャンネルとも255で白です。
#FF0000は赤だけが255の赤です。

RGBとHEXの違いは？

同じ赤・緑・青の値をRGBは10進数で、HEXは16進数で書きます。#FF6600とrgb(255, 102, 0)は同じsRGBの色です。このクイズのRGB選択肢は各チャンネル0～255の整数です。

HEX: デザイン資料の短い6桁コードに向きます。
RGB: 各チャンネルの量を数値で比較しやすい表記です。
ランダム: 問題ごとに形式が決まり、1問内の4択は同じ形式です。

回答後に分かることは？

正解コードと3つのRGBチャンネル値が表示されます。棒の長さで各値の大小を確認できます。rgb(255, 102, 0)なら赤が最大、青が0です。棒は学習の補助であり、色名や感情的な効果を判定しません。

HEXの問題でもRGBチャンネルの内訳が見られます。
コードから色を選ぶ問題では、回答前の色見本にコードを表示しません。
正誤は色だけでなく文字でも示します。

難易度は何が違いますか？

難易度は正解と不正解の色の距離を変えるゲーム設定です。やさしい問題は差が大きく、難しい問題は近い色になります。画面の明るさや色管理、周囲の照明でも見え方は変わるため、得点から色覚を判断できません。

やさしい: 大きなチャンネル差を読む練習です。
ふつう: 似た色の中で数値を比べます。
むずかしい: 小さな差を、十分な画面の大きさと明るさで確認します。

得点と連続正解の計算は？

やさしいは正解+10点・不正解0点、ふつうは+20点・-5点、むずかしいは+30点・-10点です。3問目以降の連続正解には1問につき+5点が加わります。これはゲーム独自の採点で、色覚や健康状態の指標ではありません。

ふつうで2問正解後に1問不正解なら20 + 20 - 5 = 35点です。
やさしいで3問連続正解なら10 + 10 + 15 = 35点です。
正答率は正解数 ÷ 10 × 100で、7問なら70%です。

間違えた問題の復習方法は？

結果画面には今回間違えた色、正解コード、選んだコードが並びます。同じ設定でもう一度解くか、設定に戻って方向を逆にできます。数値を2桁ごとにRGBチャンネルへ対応させると、暗記だけに頼らず確認できます。

色からコードの問題では、どのチャンネルの値を読み違えたか見ます。
コードから色の問題では、一番大きなチャンネルを先に確認します。
全問正解なら、復習一覧にその旨が表示されます。

画面によって色は変わって見えますか？

同じsRGBの値でも画面の明るさ、色管理、夜間モード、周囲の光で見え方は変わります。近い色を比べる難しいモードでは特に注意しましょう。正解はコードの数値で決まり、目で見た印象の普遍的な判定ではありません。

見分けにくい場合は難易度を下げ、解説の数値も確認します。
正誤の表示には文字も使っています。
色覚の検査が必要ならこのクイズを代用しないでください。

Web制作ではいつ役立ちますか？

CSSのcolor、background-color、border-colorには色の値を指定します。#3469D1のようなデザイン資料の値を読んだり、近い色へ調整する際にどのチャンネルを変えるか考えたりできます。文字の読みやすさには別途コントラストの確認が必要です。

画面の色を正確に取得するときはカラーピッカーを使います。
HEXとRGBの相互変換には変換ツールが便利です。
文字と背景を組み合わせるときはコントラストを確認します。