필요한 툴을, 바로 쓸 수 있게

색상 코드 퀴즈로 HEX·RGB 읽기

문제 방향과 코드 형식, 난이도를 고른 뒤 시작하세요. 색 견본이나 코드를 보고 네 선택지 중 하나를 고르면 바로 정답과 채널 설명이 나옵니다.

01 / QUIZ

어떤 순서로 연습할까요?

문제 방향

코드 형식

난이도 선택지 색 차이

10문항 · 시간 제한 없음 · 선택 후 바로 해설

COLOR / STUDY CARD미리보기

#3469D1HEX 코드는 RGB 세 채널의 값을 16진수로 적습니다.

이 퀴즈는 CSS 색상 코드를 익히는 연습입니다. 색각 검사나 진단에 사용할 수 없습니다.

마지막 수정일: 2026-09-24

ROBERIN 기준필요한 툴을,
바로 쓸 수 있게.

바로 보이는 화면입력 위치와 결과 위치를 또렷하게 둡니다.
결과 먼저핵심 결과를 앞에 두고, 과정은 필요할 때만 보여줍니다.
요구 줄이기가입이나 불필요한 정보 입력 없이 바로 쓰게 합니다.

ROBERIN

색상 코드를 읽고 푸는 방법

색상 코드 퀴즈는 화면의 색과 HEX·RGB 숫자를 연결하는 연습입니다. 색을 보고 코드를 고르거나, 코드에 맞는 색을 찾아보세요. 네 선택지 중 하나를 누르면 정답과 빨강·초록·파랑 채널 값이 바로 나옵니다.

웹 디자인에서 색상값을 읽고 수정할 때 어떤 숫자가 어떤 색을 뜻하는지 익히는 데 사용할 수 있습니다. 총 10문항이며 시간 제한은 없습니다. 색각 검사나 진단 결과로 해석하지 마세요.

색상 코드 퀴즈는 무엇을 연습하나요?

화면에 표시된 색과 CSS 색상값을 연결하는 연습입니다. 웹 페이지의 버튼이나 배경에 쓰인 색을 읽을 때 HEX와 RGB 표기를 자주 만납니다. 이 퀴즈는 색을 보고 코드를 고르는 방향과 코드를 보고 색을 찾는 방향을 모두 제공합니다. 디자인 작업 중 색을 바꿀 때 숫자가 어떻게 보이는 색으로 이어지는지 익히는 데 맞춰져 있습니다.

색 견본을 보고 코드 고르기: 보이는 색에서 숫자를 추측합니다.
코드를 보고 색 찾기: 숫자에서 색의 모습을 예상합니다.
두 방향 모두 네 선택지 중 하나를 고르고 정답 설명을 바로 봅니다.

10문항을 시작하는 방법

문제 방향, 코드 형식, 난이도를 고른 뒤 퀴즈 시작을 누르세요. 문제 카드와 네 선택지가 함께 열립니다. 선택지 하나를 누르면 정답 여부와 정답 코드가 나타나며, 다음 문제 버튼으로 이동합니다. 시간 제한은 없습니다. 컴퓨터에서는 숫자 1~4 키로 답을 고를 수 있습니다.

처음이라면 색 보고 코드 고르기·HEX·쉬움으로 시작하세요.
한 문제에는 답을 한 번만 낼 수 있습니다. 다시 눌러 점수를 바꾸지 못합니다.
마지막 문제를 마치면 점수와 정답률, 틀린 문항을 한 화면에서 봅니다.

HEX 코드는 어떻게 읽나요?

HEX 색상 코드는 # 뒤에 빨강(R), 초록(G), 파랑(B)의 값을 두 자리씩 쓰는 방식입니다. 각 쌍은 16진수 00부터 FF까지이고, 10진수로 바꾸면 0부터 255까지입니다. 예를 들어 #FF6600은 빨강 FF(255), 초록 66(102), 파랑 00(0)을 뜻합니다. 화면에서는 주황색 계열로 보입니다.

#000000은 세 채널이 모두 0이므로 검정입니다.
#FFFFFF는 세 채널이 모두 255이므로 흰색입니다.
#FF0000은 빨강 채널만 255인 빨강입니다.

RGB는 HEX와 무엇이 다른가요?

RGB는 같은 빨강·초록·파랑 채널을 10진수로 적습니다. #FF6600과 rgb(255, 102, 0)은 같은 sRGB 색을 나타냅니다. 이 퀴즈의 RGB 선택지는 0~255 정수 세 개로만 나옵니다. 화면에 보이는 코드를 CSS에 옮길 때는 두 표기 중 편한 쪽을 골라도 됩니다.

HEX: 짧은 여섯 자리 코드가 필요한 팔레트나 디자인 파일에 편합니다.
RGB: 빨강·초록·파랑 채널 값을 숫자로 바로 비교할 때 읽기 쉽습니다.
섞어서 모드: 문항마다 HEX 또는 RGB 표기가 나옵니다. 한 문항의 네 선택지는 같은 형식입니다.

정답 뒤에 어떤 정보를 보나요?

답을 고르면 정답 코드와 RGB 세 채널 값이 함께 표시됩니다. 빨강, 초록, 파랑 막대를 보면 어떤 채널이 강한지 비교할 수 있습니다. 예를 들어 rgb(255, 102, 0)에서는 빨강이 가장 크고 파랑은 0입니다. 막대는 값의 크기를 보여 주는 학습 보조이며 색의 이름이나 심리 효과를 판정하지 않습니다.

HEX 문제에서도 정답 뒤에는 RGB 채널 설명을 볼 수 있습니다.
색 찾기 문제에서는 선택할 때까지 선택지의 코드가 정답 단서로 표시되지 않습니다.
선택 후에는 맞고 틀림을 색만이 아니라 글자로도 알려 줍니다.

쉬움·보통·어려움은 어떻게 다르나요?

난이도는 정답과 오답 색상의 간격을 만드는 설정입니다. 쉬움은 차이가 큰 색을, 보통은 중간 정도를, 어려움은 가까운 색을 선택지로 만듭니다. 실제 화면에서 보이는 차이는 모니터 밝기, 색 보정, 주변 조명에 따라 달라질 수 있습니다. 따라서 어려움 점수가 낮다고 색각 상태를 해석해서는 안 됩니다.

쉬움: HEX/RGB 코드와 채널의 큰 차이를 먼저 익히는 단계입니다.
보통: 비슷한 계열 안에서 채널 차이를 비교합니다.
어려움: 작은 채널 차이를 읽는 연습이므로 충분한 화면 크기와 밝기에서 이용하세요.

점수와 연속 정답은 어떻게 계산하나요?

10문항을 모두 풀면 이번 회차의 점수와 정답률을 보여 줍니다. 쉬움은 정답 10점·오답 0점, 보통은 정답 20점·오답 -5점, 어려움은 정답 30점·오답 -10점입니다. 연속 정답이 세 번째에 이르면 그 문제부터 5점이 추가됩니다. 점수는 이 게임 안의 재미 요소이며 다른 사람의 감각이나 건강 상태와 비교하는 기준이 아닙니다.

보통에서 정답 2개 뒤 오답 1개라면 20 + 20 - 5 = 35점입니다.
쉬움에서 3문제를 연달아 맞히면 10 + 10 + 15 = 35점입니다.
정답률은 맞힌 문항 수 ÷ 10 × 100으로 표시합니다.

틀린 문제는 어떻게 복습하나요?

결과 화면의 틀린 문제 다시 보기에 이번 회차에서 놓친 색과 정답 코드를 모아 둡니다. 다시 처음부터 풀 때에는 같은 설정을 유지하거나 설정 화면으로 돌아가 문제 방향을 바꿀 수 있습니다. 이전 문항을 그대로 외우기보다 코드의 두 자리씩을 RGB 채널과 연결해 보면 다음 문제에서 더 도움이 됩니다.

색을 보고 틀렸다면 코드의 R·G·B 중 어느 쌍을 크게 잘못 읽었는지 살펴보세요.
코드를 보고 틀렸다면 가장 큰 채널이 어느 색인지 먼저 확인하세요.
한 회차에서 모두 맞혔다면 복습 목록에는 틀린 문항이 없다고 표시됩니다.

화면에 따라 색이 다르게 보일 수 있나요?

같은 sRGB 값도 화면 밝기와 색 관리, 야간 모드, 주변 조명에 따라 달라 보일 수 있습니다. 가까운 색을 비교하는 어려움 모드에서는 이 차이가 더 크게 느껴질 수 있습니다. 문제의 정답은 표시된 색상 코드의 값으로 정해지며, 화면을 눈으로만 본 인상에 대한 보편적 판정은 아닙니다. 화면을 확대하거나 밝기를 조절한 뒤 다시 풀어도 좋습니다.

색을 구별하기 어렵다면 쉬움으로 바꾸고 정답 해설의 숫자를 함께 보세요.
정답·오답 상태는 색뿐 아니라 문구와 모양으로 표시합니다.
이 도구는 색각 이상을 확인하는 검사가 아닙니다.

웹 디자인과 개발에서는 언제 유용한가요?

CSS의 color, background-color, border-color 같은 속성에는 색상값을 넣습니다. 퀴즈로 익힌 HEX와 RGB를 알면 디자인 시안에 적힌 #3469D1 같은 값을 코드에서 바로 알아보고, 비슷한 색을 수정할 때 어떤 채널을 바꿀지 판단하기 쉬워집니다. 실제 배색의 읽기 편의는 별도의 대비 확인이 필요합니다.

색을 정확히 집어내려면 색상 추출기를 사용하세요.
HEX와 RGB를 서로 바꾸려면 변환 도구가 더 빠릅니다.
텍스트와 배경색을 함께 쓸 때는 대비를 따로 확인하세요.

색상 코드 퀴즈 자주 묻는 질문

색상 코드 퀴즈는 무료인가요?

네. 가입 없이 이 페이지에서 10문항을 풀 수 있습니다. 문제 방향, HEX/RGB 형식, 난이도도 무료로 바꿀 수 있습니다.

HEX 코드가 처음인데 무엇부터 보면 되나요?

색 보고 코드 고르기와 쉬움을 선택하세요. #FF6600처럼 # 다음 여섯 자리를 두 글자씩 나누면 빨강 FF, 초록 66, 파랑 00입니다.

#FF6600은 RGB로 얼마인가요?

rgb(255, 102, 0)입니다. FF는 255, 66은 102, 00은 0이라 두 표기가 같은 sRGB 색을 가리킵니다.

RGB의 숫자는 몇까지 쓸 수 있나요?

이 퀴즈의 각 빨강·초록·파랑 채널은 0부터 255까지의 정수입니다. 0은 해당 채널이 없다는 뜻이고 255는 가장 큰 값입니다.

섞어서 모드는 선택지에도 HEX와 RGB가 섞이나요?

아니요. 문항마다 HEX 또는 RGB 한 형식이 정해집니다. 그 문항의 네 선택지는 모두 같은 형식이라 색을 비교하는 데 집중할 수 있습니다.

틀린 뒤 바로 답을 고칠 수 있나요?

한 문항에는 답을 한 번만 낼 수 있습니다. 정답 코드와 RGB 채널 설명을 확인한 뒤 다음 문제로 이동하세요. 결과 화면에는 틀린 문항을 모아 보여 줍니다.

정답률은 어떻게 계산하나요?

10문항 중 맞힌 문항 수를 10으로 나눈 뒤 100을 곱합니다. 예를 들어 7문항을 맞혔다면 정답률은 70%입니다. 난이도별 점수와는 다른 값입니다.

점수가 낮으면 색각 이상이 있다는 뜻인가요?

아닙니다. 이 게임은 CSS 색상값 학습용이며 색각 검사나 진단에 사용할 수 없습니다. 가까운 색은 화면과 조명에 따라서도 다르게 보일 수 있습니다.

휴대전화에서도 풀 수 있나요?

네. 휴대전화에서는 문제 카드 아래에 네 선택지가 이어집니다. 색 찾기 문제는 선택지가 색 견본으로 표시되며, 답을 고른 뒤 정답 코드를 확인할 수 있습니다.

이전 퀴즈 기록은 어디에 남나요?

완료한 회차의 게임 횟수와 정답 수, 최고 점수·연속 정답은 사용 중인 브라우저에만 저장되며 결과 화면에서 볼 수 있습니다. 기록 지우기로 삭제할 수 있습니다. 이번 회차의 틀린 문제 목록은 새로고침하면 사라집니다.

색상 표기와 접근성 참고 자료

HEX와 RGB의 표기법, 색을 정보의 유일한 단서로 쓰지 않아야 한다는 기준은 아래 자료를 참고했습니다. 확인일: 2026-09-24.

W3C · CSS Color Module Level 4 MDN · CSS color values W3C · 색 외의 정보 단서

색상값을 실제 작업에 쓰려면

퀴즈에서 익힌 표기를 입력하거나 변환할 때 사용할 수 있는 도구입니다.

화면에서 색상값 고르기 HEX·RGB 변환하기 다른 색상 형식 비교하기