CSS 색상 이름 찾기 — 16진수에서 가장 가까운 명명된 색상
16진수 색상 코드를 입력하거나 색상 선택기를 사용하여 가장 가까운 CSS4 명명된 색상을 찾습니다. 지각적 색상 거리를 사용하여 모든 148가지 표준 CSS 명명된 색상과 비교하고 가장 가까운 5가지를 순위별로 보여줍니다. 코드와 문서에 읽기 쉬운 색상 이름을 찾기에 적합합니다.
가장 가까운 CSS 명명된 색상 5가지:
작동 방식
CSS 명명된 색상의 간략한 역사
CSS 명명된 색상은 여러 사양 버전을 거쳐 발전해 왔습니다. 원래 CSS 1(1996)은 16가지 기본 색상만 정의했습니다: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. CSS 2에서 orange가 추가되었습니다. CSS 3은 1980년대 MIT에서 유지 관리한 X Window 시스템 색상 데이터베이스로 거슬러 올라가는 X11 색상 목록을 기반으로 목록을 147가지 색상으로 확장했습니다.
CSS Color Level 4는 rebeccapurple(#663399)이라는 이름을 하나 더 추가했습니다. 이 색상은 2014년에 6세의 나이로 뇌암으로 사망한 웹 개발자 Eric Meyer의 딸 Rebecca Alissa Meyer를 기리기 위해 추가되었습니다. 그녀가 가장 좋아하는 색상은 보라색이었으며, CSS 실무 그룹은 그녀의 이름을 표준에 포함하기로 투표했습니다. 이 추가로 CSS4 사양은 정확히 148가지 명명된 색상을 정의하며, 이것이 이 도구가 검색하는 전체 집합입니다.
색상 거리 계산 방법
단순히 RGB 값을 유클리드 거리로 비교하는 것은 인간의 인식과 잘 맞지 않습니다. 우리 눈은 파란색보다 녹색의 차이에 더 민감하고, 밝기 범위에 걸쳐 민감도도 변합니다. 이 도구는 Thiadmer Riemersma의 '색상 메트릭'을 기반으로 한 가중 유클리드 공식을 사용하여 평균 빨간색 값을 기반으로 R, G, B 채널의 가중치를 조정합니다. 결과는 인간이 실제로 색상 차이를 인식하는 방식에 훨씬 더 가깝습니다.
공식은 ΔE = √[(2 + R̄/256)·ΔR² + 4·ΔG² + (2 + (255-R̄)/256)·ΔB²]로, R̄은 두 색상의 평균 빨간색 성분입니다. 이것은 단순화된 지각적 메트릭입니다. 전문 색상 과학은 밝기, 채도, 색상을 별도로 고려하는 CIELAB ΔE 계산을 사용하지만, 실제 명명 목적으로는 단순화된 메트릭이 대부분의 색상에 대해 직관적인 결과를 제공합니다.
CSS에서 명명된 색상을 사용할 때
명명된 색상은 빠른 프로토타이핑, 코드 가독성 및 디버깅에 가장 유용합니다. `color: tomato`를 쓰는 것이 `color: #FF6347`보다 입력하기 빠르고 기억하기 쉽습니다. 교육 맥락, 데이터 시각화(의미론적 이름이 의미를 전달하는 데 도움이 되는 경우), 그리고 제한된 명명된 색상 집합이 팔레트를 형성하는 디자인 시스템에서도 유용합니다. W3C는 가독성 향상을 위해 예제와 튜토리얼에서 명명된 색상을 사용하도록 권장합니다.
프로덕션 디자인 시스템에서는 명명된 색상이 주요 팔레트가 되는 경우가 드뭅니다. 사용자 정의 16진수 값, HSL 또는 디자인 토큰 이름이 선호됩니다. 하지만 사용자 정의 값에 가장 가까운 명명된 색상을 아는 것은 문서 작성, 코드 리뷰의 색상 설명, 그리고 색상을 구두로 표현할 때 빠른 이름을 원할 때 유용합니다. 이 도구는 임의의 16진수 색상을 가장 잘 설명하는 CSS 이름을 찾아 이 격차를 해소합니다.
자주 묻는 질문
›CSS 명명된 색상은 몇 가지입니까?
CSS Color Level 4는 148가지 명명된 색상을 정의합니다. CSS 1의 원래 16가지 기본 색상, CSS 2의 orange, CSS 3의 130가지 X11 기반 색상, 그리고 Rebecca Meyer를 기리기 위해 CSS 4에서 추가된 rebeccapurple이 포함됩니다. aqua와 cyan은 별칭(동일한 16진수 #00FFFF)이고, fuchsia와 magenta도 마찬가지입니다(#FF00FF).
›CSS 색상 이름은 대소문자를 구분합니까?
아니요. CSS 색상 이름은 사양에 따라 대소문자를 구분하지 않습니다. 'Red', 'RED', 'red', 'rEd'는 모두 같은 색상을 가리킵니다. 관례적으로 소문자가 현대 CSS에서 가장 일반적인 스타일입니다.
›rebeccapurple은 무엇입니까?
rebeccapurple(#663399)은 2014년 6세의 나이로 뇌암으로 사망한 CSS 전문가 Eric Meyer의 딸 Rebecca Alissa Meyer를 기리기 위해 CSS Color Level 4에 추가되었습니다. 그녀가 가장 좋아하는 색상은 보라색이었으며, CSS 실무 그룹은 그녀의 이름을 이 색상에 붙여 기념했습니다. CSS 4에서 추가된 유일한 색상이자 CSS 2 이후 처음으로 추가된 새로운 명명된 색상입니다.
›CSS 명명된 색상이 모든 가능한 색상을 포함하지 않는 이유는 무엇입니까?
148가지 명명된 색상은 역사적인 X11 색상 목록을 기반으로 선별된 집합입니다. 일반적인 색상은 포함하지만 많은 색상이 이름 없이 남아 있습니다. 대부분의 청록색, 분홍-주황색, 갈색-빨간색 계열에는 CSS 이름이 없습니다. 정밀한 디자인 작업에는 16진수 코드, rgb() 또는 hsl()이 대신 사용됩니다.
›CSS에서 gray와 grey의 차이는 무엇입니까?
두 철자 모두 CSS에서 허용됩니다. 'gray'는 사양의 공식 미국식 영어 철자이지만, 'grey'(영국식 영어)도 동일한 색상(#808080)의 유효한 동의어입니다. 마찬가지로 'lightgray'/'lightgrey', 'darkgray'/'darkgrey', 'dimgray'/'dimgrey', 'slategray'/'slategrey', 'darkslategray'/'darkslategrey'도 모두 유효합니다.
›가장 가까운 색상 일치는 얼마나 정확합니까?
일치는 인간 눈의 민감도로 RGB 채널을 가중하는 지각적 거리 공식을 사용합니다. 대부분의 일상적인 색상(채도 높은 빨강, 파랑, 초록)에서 가장 가까운 명명된 색상은 직관적으로 올바르게 느껴집니다. 매우 흐릿하거나, 어둡거나, 갈색빛 색상의 경우 인간의 인식이 더 가변적이며 '가장 가까운' 명명된 색상이 주관적으로 맞지 않게 느껴질 수 있습니다. 표시된 거리 점수(Δ)가 작을수록 일치가 더 가깝습니다.
›alt 텍스트를 위한 접근 가능한 색상 이름을 찾는 데 사용할 수 있습니까?
네. 이 도구는 alt 텍스트, 문서 또는 디자인 설명에 색상 이름을 작성하는 데 유용합니다. UI 요소의 색상을 볼 수 없는 독자에게 설명해야 하는 경우 가장 가까운 CSS 명명된 색상이 널리 인식되는 이름을 제공합니다. 매우 특정한 색조의 경우 CSS 이름과 수식어를 결합하세요(예: #008080의 경우 '다크 틸').
›어떤 16진수 색상이 정확한 CSS 이름 일치를 가집니까?
148가지 표준 CSS 명명된 색상 중 어느 것이든 정확한 일치를 생성합니다. 일반적인 예: red = #FF0000, blue = #0000FF, white = #FFFFFF, black = #000000, coral = #FF7F50, tomato = #FF6347, skyblue = #87CEEB. 16진수를 입력하고 '정확히 일치' 메시지를 찾아 확인할 수 있습니다.
관련 도구
최종 업데이트: