총 54개 서포트 유틸리티
100% 브라우저 자체 연산 (서버 전송 없음)
Zero Latency 실시간 결과
완전 프라이빗 개인정보 보호
디자인 및 컬러 Client Local

웹 안전 색상(Web Safe Colors) 표

초기 8비트(256색) 모니터 환경에서 운영체제에 상관없이 동일한 색상을 표시하기 위해 고안된 216가지 클래식 웹 안전 색상(Web Safe Color Palette) 모음입니다. 색상환(Hue), 명도(Luminance), RGB 계열별 정렬과 실시간 검색을 지원하며, 임의의 색상을 가장 가까운 웹 안전 색상으로 실시간 양자화 변환하고 CSS/JSON 코드로 내보낼 수 있습니다.

복사 포맷:
총 216개 색상 표시 중
#FFFFFF
#CCCCCC
#999999
#666666
#333333
#000000
#FFCCCC
#FF9999
#CC9999
#FF6666
#CC6666
#996666
#FF3333
#CC3333
#993333
#663333
#FF0000
#CC0000
#990000
#660000
#330000
#FF3300
#FF6633
#CC3300
#FF9966
#CC6633
#993300
#FF6600
#FFCC99
#FF9933
#CC9966
#CC6600
#996633
#663300
#FF9900
#FFCC66
#CC9933
#996600
#FFCC33
#CC9900
#FFCC00
#FFFFCC
#FFFF99
#FFFF66
#FFFF33
#FFFF00
#CCCC99
#CCCC66
#CCCC33
#CCCC00
#999966
#999933
#999900
#666633
#666600
#333300
#CCFF00
#CCFF33
#99CC00
#CCFF66
#99CC33
#669900
#99FF00
#CCFF99
#99FF33
#99CC66
#66CC00
#669933
#336600
#66FF00
#99FF66
#66CC33
#339900
#66FF33
#33CC00
#33FF00
#CCFFCC
#99FF99
#66FF66
#33FF33
#99CC99
#00FF00
#66CC66
#33CC33
#00CC00
#669966
#339933
#009900
#336633
#006600
#003300
#00FF33
#33FF66
#00CC33
#66FF99
#33CC66
#009933
#00FF66
#99FFCC
#33FF99
#66CC99
#00CC66
#339966
#006633
#00FF99
#66FFCC
#33CC99
#009966
#33FFCC
#00CC99
#00FFCC
#CCFFFF
#99FFFF
#66FFFF
#33FFFF
#00FFFF
#99CCCC
#66CCCC
#33CCCC
#00CCCC
#669999
#339999
#009999
#336666
#006666
#003333
#00CCFF
#33CCFF
#0099CC
#66CCFF
#3399CC
#006699
#0099FF
#99CCFF
#6699CC
#3399FF
#336699
#0066CC
#003366
#0066FF
#6699FF
#3366CC
#003399
#3366FF
#0033CC
#0033FF
#CCCCFF
#9999FF
#9999CC
#6666FF
#6666CC
#666699
#3333FF
#3333CC
#333399
#333366
#0000FF
#0000CC
#000099
#000066
#000033
#3300FF
#6633FF
#3300CC
#9966FF
#6633CC
#330099
#6600FF
#CC99FF
#9966CC
#9933FF
#663399
#6600CC
#330066
#9900FF
#CC66FF
#9933CC
#660099
#CC33FF
#9900CC
#CC00FF
#FFCCFF
#FF99FF
#CC99CC
#FF66FF
#CC66CC
#996699
#FF33FF
#CC33CC
#993399
#FF00FF
#663366
#CC00CC
#990099
#660066
#330033
#FF00CC
#FF33CC
#CC0099
#FF66CC
#CC3399
#990066
#FF0099
#FF99CC
#CC6699
#FF3399
#993366
#CC0066
#660033
#FF0066
#FF6699
#CC3366
#990033
#FF3366
#CC0033
#FF0033

선택 색상 상세 정보 (Color Inspector)

#FF0066
#FF0066
HEX
#FF0066
RGBrgb(255, 0, 102)
HSLhsl(336, 100%, 50%)
WCAG 텍스트 대비율 (Contrast Ratio)
on White
3.86:1
Fail
on Black
5.44:1
AA
실시간 UI 컴포넌트 프리뷰
배지 라벨

카드 배경 및 텍스트 렌더링 예시

가장 가까운 웹 안전 색상 찾기 (Nearest Web Safe Color)

임의의 색상을 입력하면 216가지 웹 안전 색상 중 가장 오차가 적은 최적의 색상을 유클리드 거리 알고리즘으로 즉시 찾아줍니다.

#E35205
Original
#CC6600
Web Safe (Click)
색상 유클리드 거리(오차): 30.9

216 전체 팔레트 내보내기 (Export Palette)

216개 웹 안전 색상 코드 전체를 원하는 개발 형식으로 복사하거나 다운로드하세요.

모든 색상 검색, 유클리드 근사 계산 및 팔레트 내보내기는 서버 통신 없이 사용자의 브라우저에서 로컬로 즉시 처리됩니다.

216 웹 안전 색상 사양
총 색상 수216개 (6 × 6 × 6)
HEX 단계00, 33, 66, 99, CC, FF
RGB 단계0, 51, 102, 153, 204, 255
웹 컬러 이론 & 디지털 디자인 역사 가이드

216 웹 안전 색상(Web Safe Colors)의 역사적 배경과 수학적 원리 및 현대적 활용

웹 안전 색상(Web Safe Colors)은 1990년대 중반 월드 와이드 웹(WWW)이 태동하던 초기 시절, 8비트(256색) 컬러 디스플레이를 탑재한 컴퓨터에서 운영체제(Windows, Mac OS)나 브라우저(Netscape Navigator, Mosaic)에 상관없이 디더링(Dithering, 색상 깨짐 및 망점 현상) 없이 일관되게 표시되도록 표준화한 216가지 색상의 집합입니다.

오늘날 대부분의 디지털 기기는 24비트 트루 컬러(True Color, 1,677만 색) 및 10비트 HDR 디스플레이를 지원하여 기술적 제약은 사라졌으나, 웹 안전 색상은 디지털 색채학의 근본적인 기하학적 모델이자 레트로 감성(Y2K, 8-bit 픽셀 아트, 사이버펑크, 인디 웹)을 구현하는 핵심 디자인 팔레트로 여전히 널리 사랑받고 있습니다.

본 가이드는 216 웹 안전 색상의 탄생 비화부터 RGB 3차원 큐브 수학 공식, 임의의 색상을 웹 안전 색상으로 변환하는 유클리드 거리 알고리즘, 그리고 현대 프론트엔드 개발에서의 실전 활용법까지 완벽하게 정리합니다.

6×6×6 정육면체 RGB 컬러 큐브 216색 완벽 지원

00부터 FF까지 51 간격으로 구성된 216개 표준 색상을 인터랙티브하게 탐색하고 1초 복사합니다.

실시간 최근접 웹 안전 색상 매핑 알고리즘

3차원 RGB 유클리드 거리 공식을 통해 임의의 HEX 색상을 가장 가까운 웹 안전 색상으로 즉시 양자화합니다.

격자·목록·색상군 3대 뷰 & 색상·명도 정렬

사용자 작업 스타일에 맞춘 3가지 뷰 모드와 색상환(Hue), 명도(Luminance) 기준 정밀 소팅을 제공합니다.

JSON / CSS / SCSS / Tailwind 4대 포맷 일괄 내보내기

216색 팔레트 전체를 최신 웹 프론트엔드 프로젝트에 즉시 붙여넣을 수 있는 개발 코드로 내보냅니다.

1. 웹 안전 색상의 탄생 역사 (왜 하필 256색 중 216색일까요?)

① 8비트 디스플레이(256색)의 기술적 한계:
- 1990년대 초중반의 컴퓨터 모니터는 비디오 메모리 용량의 한계로 화면에 동시에 최대 256가지 색상(28=2562^8 = 256)만 표시할 수 있는 8비트 컬러 팔레트 모드를 사용했습니다.
- 모니터가 표현할 수 없는 색상이 웹페이지에 포함되어 있으면, 브라우저는 인접한 색상의 점들을 모자이크처럼 섞어서 표시하는 디더링(Dithering)을 수행하여 화면이 거칠어지고 가독성이 심각하게 훼손되었습니다.
② 운영체제 예약 색상(40색)과 216색의 도출:
- 전체 256색 중에서 마이크로소프트 윈도우(Windows)는 창 테두리, 버튼, 스크롤바 등 OS 기본 UI 렌더링을 위해 16~20가지 고유 색상을 시스템 전용으로 예약했습니다.
- 애플 매킨토시(Mac OS) 역시 자체적인 20가지 고유 색상을 예약했습니다.
- 넷스케이프(Netscape)의 개발자들은 윈도우와 맥 양쪽 OS에서 시스템 색상과 충돌하지 않으면서 공통으로 사용할 수 있는 색상 수를 계산하여, 256−40=216256 - 40 = 216개의 교집합 색상을 표준 "Netscape Web Safe Palette"로 제정했습니다.

2. 6×6×6 RGB 컬러 큐브의 수학적 원리

① 51 간격의 균등 분할 기하학:
- 24비트 RGB 색상 모델에서 Red, Green, Blue 각 채널은 0∼2550 \sim 255까지 총 256단계의 값을 가집니다.
- 216216이라는 숫자는 정확히 6×6×6=63=2166 \times 6 \times 6 = 6^3 = 216의 3차원 정육면체(Cube) 구조를 이룹니다.
- 00부터 255255까지의 범위를 55개의 균등한 구간(66개의 꼭짓점)으로 분할하면 다음과 같은 수학적 수열이 얻어집니다:
- Valuek=k×2555=k×51(k=0,1,2,3,4,5)\displaystyle \text{Value}_k = k \times \frac{255}{5} = k \times 51 \quad (k = 0, 1, 2, 3, 4, 5)
② 10진수 및 16진수(HEX) 단계 대응표:
- k=0:0  ⟹  0016k=0: 0 \implies \mathbf{00_{16}}
- k=1:51  ⟹  3316k=1: 51 \implies \mathbf{33_{16}}
- k=2:102  ⟹  6616k=2: 102 \implies \mathbf{66_{16}}
- k=3:153  ⟹  9916k=3: 153 \implies \mathbf{99_{16}}
- k=4:204  ⟹  CC16k=4: 204 \implies \mathbf{CC_{16}}
- k=5:255  ⟹  FF16k=5: 255 \implies \mathbf{FF_{16}}
- 따라서 모든 웹 안전 색상의 HEX 코드는 오직 00, 33, 66, 99, CC, FF 6가지 쌍의 조합(예: #336699, #FFCC00, #00FF66)으로만 이루어집니다.

3. 최근접 웹 안전 색상 변환 알고리즘 (Nearest Neighbor Quantization)

① 각 채널별 독립적 반올림 양자화 공식:
- 임의의 24비트 색상 (R,G,B)(R, G, B)가 주어졌을 때, 각 채널을 가장 가까운 51의 배수로 반올림하여 근사 웹 안전 색상 (R′,G′,B′)(R', G', B')를 구합니다:
- R′=Round(R51)×51\displaystyle R' = \text{Round}\left(\frac{R}{51}\right) \times 51
- G′=Round(G51)×51\displaystyle G' = \text{Round}\left(\frac{G}{51}\right) \times 51
- B′=Round(B51)×51\displaystyle B' = \text{Round}\left(\frac{B}{51}\right) \times 51
② 3차원 RGB 유클리드 색상 거리 공식 (DeltaEDelta E):
- 원래 색상과 변환된 웹 안전 색상 사이의 시각적 오차(거리)는 3차원 피타고라스 공간 거리로 정량화됩니다:
- ΔE=(R−R′)2+(G−G′)2+(B−B′)2\displaystyle \Delta E = \sqrt{(R - R')^2 + (G - G')^2 + (B - B')^2}
- 본 도구의 [가장 가까운 웹 안전 색상 찾기] 기능은 위 수식을 실시간으로 연산하여 시각적 왜곡이 가장 적은 최적의 매핑 결과를 제공합니다.

4. 24비트 트루컬러 시대, 웹 안전 색상이 현대 디자인에서 주목받는 이유

① 레트로(Retro) & Y2K / 사이버펑크 디자인 트렌드:
- 1990년대 후반~2000년대 초반의 초창기 인터넷 감성을 오마주하는 네오 브루탈리즘(Neo-brutalism), Y2K, 베이퍼웨이브(Vaporwave) 그래픽 디자인에서 216 웹 안전 색상은 독보적인 아이덴티티를 부여합니다.
② 8비트 도트/픽셀 아트(Pixel Art) 및 인디 게임 개발:
- 제한된 색상 팔레트 내에서 명암을 조절하는 도트 그래픽 작업 시, 216색은 색상 간의 채도와 명도가 수학적으로 균등하게 분포되어 있어 레트로 게임 텍스처 제작에 매우 이상적입니다.
③ 전자잉크(E-Ink) 및 저전력/임베디드 IoT 디스플레이 호환:
- 컬러 전자종이(Color E-paper)나 스마트워치, 저전력 마이크로컨트롤러(MCU) 디스플레이 등 색상 표현력이 제한된 하드웨어에서 왜곡 없는 완벽한 색상 렌더링을 보장합니다.
④ 미니멀리즘 디자인 시스템의 컬러 제약(Constraint):
- 1,677만 가지의 무제한 색상 속에서 길을 잃지 않고, 엄격하게 절제된 216색 팔레트를 기반으로 독창적이고 일관된 UI 시스템을 구축할 수 있습니다.

디자인 & 컬러 유틸리티 FAQ

Q.현대 스마트폰이나 고해상도 모니터에서도 웹 안전 색상을 꼭 써야 하나요?

기술적인 강제성은 전혀 없습니다. 현대의 모든 스마트폰, 모니터, 태블릿은 1,677만 가지 이상의 트루컬러(24비트/32비트)를 완벽하게 표현하므로 디더링 깨짐 현상이 발생하지 않습니다. 하지만 레트로 웹 스타일, 픽셀 아트, 브루탈리즘 디자인을 구현하거나, 전자종이(E-Ink) 등 특수 디스플레이와의 호환성을 고려할 때 훌륭한 디자인 자산으로 활용됩니다.

Q.웹 안전 색상 216개 중 순수한 무채색(회색조, Grayscale)은 몇 개가 있나요?

Red, Green, Blue 성분 값이 서로 완전히 동일한 색상은 R=G=BR=G=B 조건을 만족하는 총 6개입니다: #000000(검정), #333333(짙은 회색), #666666(중간 회색), #999999(밝은 회색), #CCCCCC(아주 밝은 회색), #FFFFFF(흰색).

Q.웹 안전 색상과 W3C 표준 HTML 명명된 색상(Named Colors 140종)은 같은 것인가요?

아닙니다. W3C의 명명된 색상(Named Colors, 예: red, tomato, rebeccapurple 등 140종)은 사람이 읽기 쉬운 영문 이름으로 정의된 색상 목록이며, 웹 안전 색상 216종과는 별개의 표준입니다. 두 목록의 교집합은 black(#000000), white(#FFFFFF), red(#FF0000), lime(#00FF00), blue(#0000FF) 등 일부에 불과합니다.

Q.유클리드 색상 거리(ΔE\Delta E)가 0이면 무슨 뜻인가요?

입력하신 색상의 RGB 각 성분이 이미 51의 배수(0,51,102,153,204,2550, 51, 102, 153, 204, 255)로 정확히 일치하여, 완벽한 웹 안전 색상임을 의미합니다.

Q.웹 안전 색상을 CSS 변수나 Tailwind CSS 프로젝트에 어떻게 적용하나요?

본 도구 우측의 [전체 팔레트 내보내기] 영역에서 CSS Variables 또는 Tailwind Config 탭을 선택한 후 [전체 코드 복사] 버튼을 누르면, 프로젝트의 globals.css 또는 tailwind.config.js에 바로 붙여넣어 bg-websafe-336699 형태로 즉시 활용할 수 있습니다.

Q.검색하거나 변환한 색상 정보가 외부 서버에 기록되나요?

전송되지 않습니다. 본 도구의 216색 렌더링, 색상 소팅, 유클리드 거리 매핑 및 코드 내보내기 모든 기능은 사용자의 브라우저 클라이언트 사이드 메모리에서만 동작합니다.