색상 이름과 HEX 코드

색상 이름으로 HEX, RGB, HSL 값을 찾거나 코드에서 가장 가까운 색상 이름을 확인하세요. CSS 148색의 음영과 명도 변화, WCAG 대비율까지 제공합니다.


색상 이름을 입력하거나 HEX, RGB, HSL 값을 붙여 넣으세요. 네 가지 형식 모두 지원합니다.
지우기

CSS의 모든 이름 있는 색

CSS에 내장된 148개 색상 이름 전체와 HEX, RGB 값입니다. 아무 행이나 클릭하면 위쪽에서 열립니다.

HEX 색상 코드의 원리

HEX 코드는 16진수로 적은 세 개의 숫자일 뿐입니다. 빨강이 얼마, 초록이 얼마, 파랑이 얼마인지를 각각 00부터 FF까지로 나타냅니다. 그래서 #FFD700은 빨강 최대, 초록 255 중 215, 파랑은 전혀 없음을 뜻하며 눈에는 금색으로 보입니다. 의미가 있는 것은 두 자리 짝뿐이라 #FFF와 #FFFFFF는 둘 다 흰색입니다.

HEX, RGB, HSL 비교

셋 다 같은 색을 나타내며 담고 있는 정보만 다릅니다. HEX는 간결해서 CSS에서 흔히 쓰입니다. RGB는 같은 숫자를 10진수로 적은 것이라 계산에 편합니다. HSL은 색조를 채도, 명도와 분리하므로 손으로 팔레트를 만들기가 훨씬 쉽습니다. 색조는 그대로 두고 명도만 바꾸면 어울리는 톤이 나옵니다.

명암비가 중요한 이유

글자는 시력이 약한 사람이나 어두운 화면에서도 읽을 수 있을 만큼 배경과 충분히 구분되어야 합니다. 접근성 지침은 본문 글자에 4.5 대 1(AA), 더 엄격한 AAA 등급에는 7 대 1을 요구합니다. 큰 글자는 3 대 1이면 됩니다. 이 도구는 흰색과 검정 양쪽에 대한 비율을 계산하므로 어느 쪽을 위에 올릴지 바로 알 수 있습니다.

알아두면 좋은 점

  • CSS에는 148개의 이름 있는 색이 있고 그중 몇 개는 중복입니다. grey와 gray, aqua와 cyan은 각각 같은 색입니다.
  • HEX 축약형은 각 짝이 반복될 때만 쓸 수 있습니다. #FFCC00은 #FC0으로 쓸 수 있지만 #FFD700은 줄일 수 없습니다.
  • HEX 자리를 두 개 더 붙이면 투명도를 지정합니다. #FFD70080은 불투명도가 약 절반인 금색입니다.
  • 팔레트를 만들 때는 HSL에서 색조를 고정하고 명도만 바꾸세요. 색들이 언제나 한 계열로 보입니다.

자주 묻는 질문

gold라는 이름의 CSS 색상은 #FFD700, 즉 rgb(255, 215, 0)입니다. 금속 질감이라기보다 밝은 노란 금색인데, 단색으로는 진짜 금의 광택을 재현할 수 없기 때문입니다. 더 금속처럼 보이게 하려면 디자이너들은 보통 CSS에서 darkgoldenrod라 부르는 #B8860B 같은 짙은 금색과 함께 씁니다.

위 입력란에 이름을 넣으면 HEX, RGB, HSL 값을 한꺼번에 얻을 수 있습니다. CSS의 이름 있는 색 148개 모두에 적용되며 반대로도 됩니다. HEX 코드를 붙여 넣으면 가장 가까운 이름 있는 색과 정확한 거리를 알려 줍니다.

표기법만 다를 뿐 정확히 같은 정보를 담습니다. HEX는 세 채널을 각각 16진수 두 자리로 적으므로 #FF7F50은 빨강 255, 초록 127, 파랑 80입니다. RGB는 같은 숫자를 10진수로 rgb(255, 127, 80)처럼 씁니다. 어느 쪽이 더 정확한 것은 아니며 HEX가 CSS에서 타이핑이 짧을 뿐입니다.

색조, 채도, 명도입니다. 색조는 0도에서 360도까지 색상환에서의 위치, 채도는 색이 얼마나 선명한지, 명도는 0%의 검정부터 100%의 흰색까지를 나타냅니다. 디자인에는 가장 실용적인 형식인데, 색조를 유지한 채 명도만 바꾸면 확실히 한 묶음으로 보이는 톤 세트를 얻을 수 있기 때문입니다.

CSS 명세에는 transparent를 포함해 148개의 이름 있는 색이 있습니다. 여러 이름이 같은 값을 가리키기도 하는데 특히 grey와 gray, aqua와 cyan, magenta와 fuchsia가 그렇습니다. HEX와 RGB 값이 포함된 전체 목록은 이 페이지에 있습니다.

접근성 지침은 일반 본문에 최소 4.5 대 1, 큰 글자에 3 대 1을 요구하며 이것이 AA 등급입니다. 더 엄격한 AAA 등급은 7 대 1을 요구합니다. 이 도구는 여러분의 색상과 흰색, 검정 사이의 비율을 계산해 어느 쪽이 통과하는지 알려 주므로 읽기 쉬운 쪽을 바로 고를 수 있습니다.

가능합니다. 여덟 자리 HEX 코드는 끝에 알파 두 자리를 붙이며 00은 완전 투명, FF는 완전 불투명입니다. 따라서 #FF000080은 불투명도가 약 50%인 빨강입니다. 현재 모든 브라우저가 지원하지만 예전 표기인 rgba()도 여전히 매우 흔합니다.

이름 있는 색 148개는 화면이 표시할 수 있는 약 1670만 색 중 아주 작은 표본이기 때문입니다. 입력하신 값이 그 정확한 지점들에 해당하지 않으면, 이 도구는 RGB 공간에서 둘 사이의 거리를 재어 가장 가까운 이름 있는 색을 찾고, 일치가 아니라 근사값임을 알려 드립니다.

색상의 HEX 코드는 무엇인가요?

색상 이름을 입력하면 HEX, RGB, HSL 값을 한 번에 얻을 수 있고, 아무 코드나 붙여 넣으면 가장 가까운 CSS 이름 있는 색을 찾을 수 있습니다. gold는 #FFD700, coral은 #FF7F50, teal은 #008080입니다. 모든 결과에는 어두운 톤과 밝은 톤, 그리고 검정과 흰색에 대한 명암비도 함께 표시됩니다.