Color Code Quiz
Choose a direction, code format and difficulty, then start. Pick one of four answers for each color or code to see the correct answer and RGB channels right away.
Which way would you like to practice?
Question direction
Code format
Difficulty Difference between choices
10 questions · No time limit · Instant explanation
Question card
What is the code for this color?
You can also answer with number keys 1–4.
Choices Choose one
Correct code
Your results
Scores follow this game’s rules; they do not assess color vision.
Records in this browser
- Games played
- 0
- Total correct
- 0
- High score
- 0
- Best streak
- 0
Review missed questions
This quiz helps you learn CSS color codes. It is not a color-vision test or diagnosis.
ready to use.
- Visible firstKeep the input and result positions clear.
- Results firstPut the main number up front and keep the process secondary.
- Less to askNo sign-up or extra information before using the tool.
How to read color codes and answer the quiz
This quiz connects the colors on screen with HEX and RGB numbers. Choose a code for a color, or choose a color for a code. After each of the four-choice questions, see the answer and its red, green and blue channels.
Use it to practice reading and editing color values in web design. There are 10 questions and no time limit. Your score is not a color-vision assessment or diagnosis.
What does the color code quiz teach?
The quiz connects a color on screen with its CSS color value. You may encounter HEX and RGB when editing a button, background or border. Practice both reading a swatch as a code and picturing a swatch from a code.
- Color to code: estimate the numbers from a visible swatch.
- Code to color: predict the swatch from its numbers.
- Both directions give four choices and immediate channel explanations.
How do I play the 10 questions?
Select a direction, HEX, RGB or mixed format, and a difficulty. Choose one of four answers, read the explanation, then move to the next question. There is no timer. On a keyboard, use number keys 1–4 to answer.
- Start with color to code, HEX and Easy if you are new.
- You can answer each question only once; clicking again will not change the score.
- At the end, review your score, accuracy and missed questions together.
How do I read a HEX code?
A six-digit HEX code starts with #, followed by two digits each for red (R), green (G) and blue (B). Each pair runs from 00 to FF in base 16, equivalent to 0–255 in decimal. In #FF6600, red FF is 255, green 66 is 102 and blue 00 is 0, producing an orange color.
- #000000 has three zero channels and appears black.
- #FFFFFF has three 255 channels and appears white.
- #FF0000 has only the red channel at 255.
How is RGB different from HEX?
RGB writes the same red, green and blue channels as decimal numbers. #FF6600 and rgb(255, 102, 0) represent the same sRGB color. In this quiz, each RGB choice uses integer channel values from 0 to 255. Both forms can be used for a CSS color value.
- HEX: handy for six-digit palette codes in design files.
- RGB: makes channel amounts easier to compare numerically.
- Mixed: chooses HEX or RGB per question; all four choices in a question share one format.
What appears after I answer?
The correct code and all three RGB channel values are shown. The bars compare their magnitudes: in rgb(255, 102, 0), red is largest and blue is zero. These bars help explain the numbers; they do not assign a color name or judge an emotional effect.
- Even a HEX question reveals the RGB channel breakdown.
- In code-to-color mode, choice codes are hidden until you answer.
- Correct and incorrect states use text as well as visual styling.
What changes with difficulty?
Difficulty changes the distance between the correct color and the distractors. Easy choices differ more; Hard choices are closer together. The perceived difference varies with screen brightness, color settings and ambient light, so a Hard score cannot assess color vision.
- Easy: learn to recognize larger channel differences.
- Normal: compare channels in colors that are more similar.
- Hard: look closely at small differences on a sufficiently bright screen.
How are points and streaks calculated?
Easy awards 10 for correct and 0 for wrong answers; Normal gives 20 and −5; Hard gives 30 and −10. Starting with the third consecutive correct answer, each correct answer gains another 5 points. This is a local game rule, not a measure of sensory or medical ability.
- On Normal, two correct then one wrong gives 20 + 20 − 5 = 35 points.
- On Easy, three consecutive correct gives 10 + 10 + 15 = 35 points.
- Accuracy is correct answers ÷ 10 × 100, so seven correct is 70%.
How do I review mistakes?
The results screen lists the swatch, correct code and your selected code for each missed question in the current game. Play again with the same settings or change direction. Breaking a HEX code into three pairs and matching them to RGB channels is more useful than memorizing an answer.
- If you missed color to code, check which channel pair you misread.
- If you missed code to color, first identify the strongest channel.
- If all answers are correct, the review list says so.
Can the same code look different on another screen?
Yes. Screen brightness, color management, night modes and surrounding light change how an sRGB value appears. This is especially noticeable for nearby choices on Hard. The answer is defined by the color value, not a universal judgment of your visual impression.
- If colors are hard to distinguish, switch to Easy and read the channel numbers.
- Answers are marked with words, not only with color.
- This tool is not a substitute for a color-vision examination.
Where are these values useful in web design?
CSS properties such as color, background-color and border-color accept color values. Recognizing #3469D1 in a design specification can help you find it in code and decide which channel to adjust for a nearby color. You still need a separate contrast check for readable text.
- Use a color picker to capture a color precisely.
- Use a converter when you need HEX and RGB equivalents.
- Check text/background contrast separately before publishing.
Color Code Quiz FAQ
Is the Color Code Quiz free?
Yes. You can play 10 questions without signing up and change direction, HEX/RGB format or difficulty at no charge.
Where should I start if HEX is new to me?
Try color to code on Easy. Split #FF6600 after # into three pairs: red FF, green 66 and blue 00.
What is #FF6600 in RGB?
It is rgb(255, 102, 0). FF means 255, 66 means 102 and 00 means 0, so both notations represent the same sRGB color.
What is the RGB channel range?
Each red, green and blue channel in this quiz is an integer from 0 to 255. Zero means none of that channel; 255 is its maximum value.
Does Mixed combine HEX and RGB within a question?
No. Each question uses either HEX or RGB, and its four choices all have the same format so you can focus on comparing colors.
Can I change an answer after selecting it?
No. Each question accepts one answer. Check the correct code and RGB channels before moving on; missed questions are listed in the results.
How is accuracy calculated?
Divide the number correct by 10 and multiply by 100. Seven correct answers mean 70% accuracy. This is separate from difficulty-based points.
Does a low score mean I have a color-vision condition?
No. This is practice for CSS color codes, not a test or diagnosis. Similar colors can also appear different depending on the screen and lighting.
Can I play on a phone?
Yes. The four choices appear below the question card on phones. In code-to-color mode, choose a swatch and then check the revealed code.
Where are previous quiz records stored?
Completed game counts, correct answers, high score and best streak are saved only in this browser and can be deleted with Clear records. The current missed-question list disappears on refresh.
References for color notation and accessibility
The following sources cover HEX and RGB notation and why color should not be the only way to convey information. Checked: 2026-09-24.
Using color values in a project
These tools let you pick and convert the formats practiced in the quiz.