색상 코드 퀴즈

색을 보고 코드를, 코드를 보고 색을 고르는 10문제 퀴즈입니다

색상 코드 퀴즈는 화면의 색과 CSS 색 코드를 이어 주는 연습 도구입니다. ‘색 → 코드’에서는 큰 견본을 보고 네 개의 HEX 또는 RGB 코드 중 하나를 고르고, ‘코드 → 색’에서는 코드를 보고 네 개의 견본 중 하나를 고릅니다. 한 판은 10문제이고 시간 제한은 없습니다.

난이도는 색을 뽑는 범위와 선택지 사이의 색 차이로 정합니다. 쉬움은 채널마다 00·33·66·99·CC·FF만 쓰는 216색, 보통은 #RGB 세 자리로 줄여 쓸 수 있는 4,096색, 어려움은 1,677만 7,216색 전체에서 내며, 네 선택지끼리의 색 차이(ΔE00)는 각각 20~60, 10~25, 4~10입니다. 답할 때마다 정답 코드를 빨강·초록·파랑 값으로 풀어 읽어 주고, 고른 색과 정답이 채널마다 얼마나 다른지 보여 줍니다. 판이 끝나면 이번 판 팔레트, 틀린 문제만 다시 풀기, 같은 10문제로 도전하는 링크가 나옵니다.

색각 검사가 아닙니다 점수는 색 코드를 읽는 연습의 결과입니다. 같은 코드도 화면 밝기, 야간 모드, 색 관리 설정에 따라 다르게 보일 수 있습니다.

왜 색 코드를 눈으로 읽는 연습을 할까요?

웹 페이지와 앱의 색은 대부분 #3A7BD5나 rgb(58, 123, 213) 같은 숫자로 적혀 있습니다. 코드를 보고 대략 어떤 색인지 떠올릴 수 있으면, 매번 색 고르기 도구를 열지 않아도 그 값이 맞는지 먼저 짐작할 수 있습니다. 이 퀴즈는 그 짐작을 빠르게 해 보고, 틀렸을 때 어느 채널을 잘못 읽었는지 바로 확인하도록 만들었습니다.

• CSS를 고치거나 코드 리뷰를 할 때: 버튼 배경이 #E4572E라면 빨강(E4)이 가장 크고 초록(57)이 조금 섞였으니 주황빛 빨강이라는 것을 코드만 보고 알 수 있습니다.
• 디자인 시안을 코드로 옮길 때: 디자이너가 건넨 값과 화면 색이 다를 때, 숫자 하나가 바뀌었는지 채널 순서가 뒤바뀌었는지 가려낼 수 있습니다.
• 비슷한 색이 여러 개일 때: 디자인 토큰에 회색이나 파랑 계열이 열 개씩 있으면, 어느 쪽이 더 밝고 더 푸른지 코드로 비교해야 합니다. 보통·어려움 단계가 이런 비교를 연습합니다.
• 색 코드를 처음 배울 때: 쉬움 단계는 33 단위 값만 쓰므로 ‘FF는 최대, 00은 없음, 99는 중간보다 조금 위’ 같은 기준점을 먼저 익힐 수 있습니다.

퀴즈 하는 법

1. 문제 방향을 고릅니다. ‘색 → 코드’는 견본을 보고 코드를 고르고, ‘코드 → 색’은 코드를 보고 견본을 고릅니다.
2. 코드 형식(HEX, RGB, 문제마다 섞기)과 난이도(쉬움, 보통, 어려움)를 고릅니다. 설정을 바꾸면 그 설정으로 새 판이 바로 시작됩니다.
3. A~D 중 하나를 누릅니다. 키보드에서는 1~4나 A~D 키를 씁니다.
4. 답하면 맞았는지와 점수가 나오고, 문제 카드에 정답 코드가 채널별 막대로 풀립니다. 틀렸다면 막대 위의 검은 눈금이 고른 색의 값이고, ‘색 → 코드’에서는 견본 오른쪽 반이 고른 색으로 바뀝니다.
5. ‘다음 문제’(키보드 Enter·→)로 넘어갑니다. 10문제를 마치면 점수, 정답률, 최고 연속 정답과 이번 판 팔레트가 나옵니다.
6. 틀린 문제가 있으면 ‘틀린 문제만 다시’로 그 문제들을 선택지 순서만 바꿔 다시 풉니다. ‘결과·도전 링크 복사’를 누르면 같은 10문제를 푸는 링크가 결과와 함께 복사됩니다.

HEX 코드 읽는 법

HEX 코드는 # 뒤의 여섯 자리를 두 자리씩 끊어 빨강(R), 초록(G), 파랑(B) 순서로 읽습니다. W3C CSS Color Module Level 4 5.2절은 첫 두 자리가 빨강이고, 00이 최솟값, ff(십진수 255)가 최댓값이라고 정합니다. 두 자리 16진수는 첫 자리 × 16 + 둘째 자리로 십진수가 됩니다. A~F는 10~15이므로 D5는 13 × 16 + 5 = 213입니다.

빨리 읽을 때는 첫 자리만 보아도 됩니다. 첫 자리 하나가 16씩 바꾸고 둘째 자리는 최대 15만 바꾸기 때문입니다. 첫 자리가 0~3이면 그 채널이 거의 없고, 8 언저리면 절반, C~F면 강합니다.

표의 밝기는 WCAG 2.2의 상대 휘도입니다. 코드 값은 감마가 걸린 sRGB 값이라, 절반 값인 #808080의 실제 빛의 양은 흰색의 21.6%에 그칩니다. 빛의 양이 흰색의 절반이 되는 회색은 #BCBCBC 근처입니다.

RGB 표기와 세 자리·여덟 자리 HEX

rgb(255, 102, 0)은 같은 세 채널을 십진수로 적은 것이고, #FF6600과 같은 색입니다. CSS Color 4는 쉼표 없이 rgb(255 102 0)으로 적는 문법을 기본으로 두고, 예전 명세의 쉼표 문법도 웹 호환을 위해 계속 받습니다. 이 퀴즈의 RGB 선택지는 널리 쓰이는 쉼표 문법으로 보여 줍니다.

세 자리 #RGB는 각 자리를 두 번 겹쳐 쓴 여섯 자리와 같습니다. CSS Color 4의 예시대로 #123은 #112233이고, #102030이 아닙니다. 보통 단계의 4,096색은 모두 이렇게 세 자리로 줄일 수 있는 색입니다. 여덟 자리 #RRGGBBAA의 마지막 두 자리는 투명도(00 투명, ff 불투명)이며, 이 퀴즈는 불투명한 색만 냅니다.

세 원색의 밝기가 크게 다른 까닭은 상대 휘도 식이 L = 0.2126 R + 0.7152 G + 0.0722 B(R·G·B는 감마를 푼 값)이기 때문입니다. 같은 FF라도 초록은 파랑보다 열 배 가까이 밝게 보입니다.

난이도와 선택지는 이렇게 만듭니다

한 문제는 먼저 난이도 범위에서 중심 색 하나를 고르고, 그 둘레에서 네 색을 같은 방법으로 따로 뽑습니다. 채널마다 중심에서 쉬움은 최대 ±102(33 두 칸), 보통은 ±51(11 세 칸), 어려움은 ±20까지 움직입니다. 네 색의 여섯 쌍이 모두 그 단계의 ΔE00 범위 안에 들 때만 문제로 내고, 아니면 다시 뽑습니다. 정답은 네 색 중 하나를 무작위로 정합니다.

정답을 따로 두고 오답만 정답 둘레에 만들면, 정답이 선택지의 가운데 값이나 가장 자주 나오는 값이 되어 색을 보지 않고도 맞힐 수 있습니다. 이 방식에서는 네 색이 같은 방법으로 나오므로 그런 단서가 없습니다. 2,000판(2만 문제)씩 만들어 보면 정답 위치는 단계마다 A~D가 각각 24.7~25.5%였습니다.

쉬움의 216색은 채널마다 여섯 단계(6 × 6 × 6)입니다. 256색(8비트) 화면을 고려하던 1990년대 웹에서 ‘브라우저 안전 팔레트’, ‘216 팔레트’, ‘6×6×6 색 정육면체’로 부르던 색 묶음이 이 구성입니다. 값이 51 간격이라 처음 배우는 사람이 기준점을 익히기 좋습니다.

해설의 ΔE00 읽기

답한 뒤 선택지마다 붙는 ΔE00은 정답 색과 그 색의 차이입니다. 코드를 sRGB에서 D65 백색 기준 CIELAB으로 바꾼 뒤, 국제조명위원회의 CIEDE2000 식으로 계산합니다. 이 도구의 계산은 Sharma·Wu·Dalal(2005)이 공개한 시험 자료 34쌍과 소수 넷째 자리까지 같습니다. 0이면 같은 색이고 클수록 다르게 보입니다.

코드 숫자의 차이와 눈에 보이는 차이는 같지 않습니다. 아래 표는 채널 하나를 똑같이 51(0x33)만큼 바꾼 경우인데, ΔE00은 3.6에서 25.2까지 일곱 배 가까이 벌어집니다. 어두운 색과 회색에서는 작은 숫자 변화도 크게 보이고, 원색 빨강에 초록을 조금 더한 변화는 작게 보입니다.

나란히 놓은 두 색의 차이를 관찰자 절반이 알아보는 문턱은 ΔE00 0.8, 절반이 ‘색이 맞지 않아 받아들일 수 없다’고 보는 문턱은 1.8이라는 연구가 있습니다(Paravina 외 2015, 치과 재료 색 연구). 어려움의 가장 가까운 쌍도 4 이상이므로 나란히 놓으면 구별되는 차이이지만, 견본 하나만 보고 코드를 고르기는 어렵습니다.

점수와 기록

만점은 10문제를 모두 맞혀 3번째부터 10번째까지 여덟 번 보너스를 받은 점수입니다. 예를 들어 보통에서 처음 세 문제를 맞히고 네 번째를 틀리면 20 + 20 + 25 − 5 = 60점입니다. 보통과 어려움은 오답 감점이 있어서 점수가 0 아래로 내려갈 수 있습니다.

판을 끝낼 때마다 판 수, 정답 수, 최고 연속 정답, 난이도별 최고 점수가 이 브라우저의 저장소에만 쌓입니다. 서버로 보내지 않으며 ‘기록 지우기’로 지울 수 있습니다. 틀린 문제 복습 판은 기록에 넣지 않습니다. 도전 링크에는 문제를 만드는 난수 시작값과 방향·형식·난이도만 들어 있어, 받은 사람은 같은 10문제를 같은 순서와 같은 선택지 배치로 풉니다.

빨리 맞히는 요령

1. 가장 큰 채널부터 찾습니다. 세 쌍의 첫 자리만 비교해 가장 큰 쪽이 색의 방향입니다. 빨강이 크면 붉은 쪽, 파랑이 크면 푸른 쪽입니다.
2. 두 채널이 함께 높으면 섞인 색입니다. 빨강 + 초록은 노랑, 초록 + 파랑은 청록, 빨강 + 파랑은 자홍 쪽입니다. 빨강이 가장 크고 초록이 중간이면 주황입니다.
3. 세 값이 비슷하면 회색입니다. 세 값의 차이가 작을수록 채도가 낮고, 세 값이 모두 크면 밝은 회색, 모두 작으면 어두운 회색입니다.
4. 밝기는 초록이 좌우합니다. 밝기를 비교할 때는 초록 값을 먼저 보고, 파랑은 가장 적게 반영합니다.
5. ‘코드 → 색’에서는 남는 선택지를 지웁니다. 가장 큰 채널이 다른 견본부터 빼고, 남은 견본끼리 두 번째로 큰 채널을 비교합니다.

자주 틀리는 경우

• 80을 ‘중간 밝기’로 읽는 경우: 값은 절반이지만 빛의 양은 21.6%라서 #808080은 생각보다 어둡게 보입니다.
• 파랑이 큰 색을 밝게 예상하는 경우: #0000FF의 밝기는 0.072로 빨강(0.213)보다도 어둡습니다. 파랑 위주의 색은 대체로 어둡게 보입니다.
• 채널 순서를 뒤바꿔 읽는 경우: CSS는 항상 빨강·초록·파랑 순서입니다. Windows의 COLORREF처럼 0x00bbggrr로 파랑을 먼저 적는 형식도 있으니, 다른 프로그램에서 가져온 값은 순서를 확인해야 합니다.
• 세 자리 코드를 0으로 채워 읽는 경우: #4AC는 #44AACC이고 #40A0C0이 아닙니다.
• 화면 설정이 색을 바꾸는 경우: 야간 모드, 블루라이트 필터, 색 반전, 저전력 모드는 견본 색을 바꿉니다. 어려움 단계처럼 가까운 색을 비교할 때는 이런 설정을 끄고 푸는 편이 정확합니다.

한계와 주의

• 견본은 코드를 표준 sRGB 색으로 칠합니다. 넓은 색역 모니터, 색 관리 설정, 화면 밝기와 주변 조명에 따라 같은 코드도 다르게 보일 수 있으며, 정답은 화면에 보이는 모습이 아니라 코드 값으로 정합니다.
• ΔE00은 작은 색 차이를 비교하려고 만든 식입니다. 쉬움 단계처럼 차이가 큰 색끼리는 숫자의 크기와 실제로 느끼는 차이가 덜 비례할 수 있습니다.
• 점수는 코드 읽기 연습의 결과이며 색각을 판정하지 않습니다. 색 구별이 걱정되면 색맹 테스트를 참고로 보고, 불편이 있으면 안과에서 검사를 받으세요.
• 기록은 이 브라우저에만 저장되므로 다른 기기나 다른 브라우저와 공유되지 않고, 사이트 데이터를 지우면 함께 사라집니다.
• 도전 링크는 브라우저의 같은 계산을 다시 하는 방식이라, 브라우저마다 소수점 계산 결과가 아주 드물게 달라지면 다른 문제가 나올 수 있습니다.

기준일 이 글의 명세·식·연구 수치는 2026-10-23에 W3C·Microsoft 문서, 논문 저자 페이지와 초록으로 확인했습니다.

출처

• 01W3C. CSS Color Module Level 4 (Candidate Recommendation Draft, 2026-10-22)5.2절 HEX 표기(여섯·세·여덟 자리, #123 = #112233), 4.1.2절 쉼표 문법
• 02W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — relative luminanceL = 0.2126 R + 0.7152 G + 0.0722 B, 감마 풀기 문턱 0.04045
• 03Stokes M, Anderson M, Chandrasekar S, Motta R. A Standard Default Color Space for the Internet – sRGB (1996)sRGB 원색과 D65 백색점
• 04Sharma G, Wu W, Dalal EN. The CIEDE2000 color-difference formula: Implementation notes, supplementary test data, and mathematical observations. Color Research & Application 2005;30(1):21–30CIEDE2000 계산 순서와 시험 자료 34쌍
• 05Paravina RD 외. Color difference thresholds in dentistry. J Esthet Restor Dent 2015;27 Suppl 1:S1–950:50% 지각 문턱 ΔE00 0.8, 수용 문턱 1.8
• 06Microsoft Learn. COLORREFWindows GDI 색 값은 0x00bbggrr(낮은 바이트가 빨강)
• 07Weinman L. The Web-Safe Color Dilemma (웹 보관본)브라우저 안전 팔레트·216 팔레트·6×6×6 색 정육면체가 같은 색 묶음이고 256색(8비트) 화면 때문에 쓰였다는 설명

자주 묻는 질문

함께 쓰는 도구