색상 이름·근접색 찾기
색상 이름·근접색 찾기는 입력한 색과 가장 가까운 「색상 이름」을 찾거나, 색상 이름으로 색상 코드를 역으로 조회할 수 있는 도구입니다. #FF6347 같은 HEX나 rgb(255, 99, 71) 을 입력하면 CSS 색상 이름(웹 색상 이름) 중 가까운 순으로 후보를 보여 주고, 각 HEX와 근접도(ΔE)도 함께 확인할 수 있습니다. 반대로 tomato 같은 색상 이름을 입력하면 그 색의 HEX·RGB를 바로 조회할 수 있습니다.
HEX/RGB/HSL 색상 코드를 입력하면 가장 가까운 색상 이름을, 색상 이름을 입력하면 해당 색상을 보여 줍니다.
가장 가까운 CSS 색상 이름
- dodgerblue정확히 일치#1E90FF · ΔE 0.000
- cornflowerblue#6495ED · ΔE 0.059
- royalblue#4169E1 · ΔE 0.102
- steelblue#4682B4 · ΔE 0.113
- mediumslateblue#7B68EE · ΔE 0.117
- deepskyblue#00BFFF · ΔE 0.127
- mediumpurple#9370DB · ΔE 0.135
- slateblue#6A5ACD · ΔE 0.149
“ΔE”는 OKLab 색 공간에서의 지각적 근접도 지표입니다(작을수록 가까운 색). CIE ΔE2000 과는 다른 근사값입니다.
모든 처리는 웹 브라우저만으로 완결되며, 입력한 색상이 외부 서버로 전송되지 않습니다.
관련 도구
컬러 피커
이미지에서 색을 추출해 HEX·RGB·HSL 컬러 코드를 얻는 무료 컬러 피커입니다. 돋보기로 확대해 픽셀 단위로 정확히 색을 고르고 팔레트를 내보낼 수 있습니다. 가입 없이 바로 사용할 수 있습니다.
- 디자인 & 색상
- 생산성
색상 팔레트 추출
이미지를 업로드하면 주요 색상(대표 색상)을 자동으로 추출해 팔레트를 만드는 무료 도구. HEX/RGB/HSL 확인, 색상별 비율 표시, 4~12색 조절, CSS 변수·SCSS·Tailwind·JSON 내보내기 지원. 이미지는 서버로 전송되지 않고 브라우저만으로 완결됩니다.
- 추출
- 디자인 & 색상
색상 팔레트 생성기
베이스 컬러를 한 가지만 고르면 보색·유사색·트라이어드 등 색채 이론에 기반한 색상 팔레트를 자동으로 만들어 주는 무료 배색 생성기입니다. CSS 변수·Tailwind·SCSS·JSON 형식으로 내보낼 수 있고 명암 대비의 기준도 확인할 수 있습니다. 웹 브라우저만으로 완결됩니다.
- 생성기
- 디자인 & 색상
컬러 코드 변환
HEX·RGB·HSL·HSV·OKLCH 컬러 코드를 서로 변환하는 무료 도구입니다. 투명도(RGBA·8자리 HEX·HSLA)와 CMYK 참고값도 지원하며, 입력한 색을 모든 형식으로 한 번에 변환해 원클릭 복사할 수 있습니다. 웹 브라우저만으로 완결됩니다.
- 변환
- 디자인 & 색상
명도 대비 검사
전경색과 배경색의 명도 대비(콘트라스트 비율)를 실시간으로 계산하는 무료 명도 대비 검사 도구입니다. WCAG 2.1·2.2 AA·AAA 판정과 통과색 자동 제안, 색각 시뮬레이션, APCA를 지원합니다. 웹 브라우저만으로 완결됩니다.
- 검사기
- 디자인 & 색상
- 접근성
CSS 그래디언트 생성기
색·방향·컬러 스톱을 GUI 로 조작해 CSS 그래디언트를 자동 생성하는 무료 도구입니다. 선형·방사형·원뿔형(conic) 그라데이션과 투명도 조정을 지원하고 CSS 변수·Tailwind·SCSS 형식 내보내기와 공유 URL 도 제공합니다. 복사해서 바로 쓸 수 있고 웹 브라우저만으로 완결됩니다.
- 생성기
- 개발
- 디자인 & 색상
색상 이름·근접색 찾기 도구란?
색상 이름·근접색 찾기는 입력한 색과 가장 가까운 「색상 이름」을 찾거나, 색상 이름으로 색상 코드를 역으로 조회할 수 있는 도구입니다. #FF6347 같은 HEX나 rgb(255, 99, 71) 을 입력하면 CSS 색상 이름(웹 색상 이름) 중 가까운 순으로 후보를 보여 주고, 각 HEX와 근접도(ΔE)도 함께 확인할 수 있습니다. 반대로 tomato 같은 색상 이름을 입력하면 그 색의 HEX·RGB를 바로 조회할 수 있습니다.
「이 HEX는 무슨 색상 이름일까」 「이 색은 뭐라고 부를까」가 궁금할 때, 색상 이름 찾기와 hex 색상 이름·rgb 색상 이름 확인을 한 번에 끝낼 수 있습니다. CSS 의 color 속성을 색상 이름으로 지정하고 싶을 때나, 색에 알기 쉬운 이름을 붙이고 싶을 때 편리합니다.
단순한 수치 차이가 아니라 사람의 시각에 가까운 OKLab 색 공간에서 거리(ΔE)를 계산하므로, 「눈으로 봤을 때 비슷한 색」이 위에 표시됩니다. 입력란은 색상 코드와 색상 이름을 모두 받아들이므로 형식을 먼저 고를 필요가 없습니다. 컬러 피커로 색을 고르거나, 색상 이름 목록에서 선택할 수도 있습니다.
검색과 계산은 모두 웹 브라우저 안에서 이루어지며, 입력한 색이 외부 서버로 전송되지 않습니다. 회원가입이나 설치 없이 바로 사용할 수 있으며, 웹 브라우저만으로 완결됩니다.
사용 방법
- 입력란에 HEX·RGB·HSL 색상 코드를 붙여 넣습니다(형식은 자동으로 인식됩니다). 컬러 피커로 색을 고를 수도 있습니다.
- 가장 가까운 CSS 색상 이름이 근접도 순으로 표시됩니다. 정확히 일치하는 이름이 있으면 「정확히 일치」로 표시됩니다.
- 복사 버튼으로 색상 이름이나 HEX 값을 복사해 CSS·디자인 도구에 사용합니다.
- 이름으로 색을 찾고 싶을 때는 색상 이름(예: tomato)을 입력하면 해당 색의 HEX·RGB가 표시됩니다.
- 「이름 있는 색상 목록에서 찾기」를 열면 전체 CSS 색상 이름 목록에서 색을 골라 확인할 수 있습니다.
활용 사례
- 시안의 HEX와 비슷하면서 알기 쉬운 색상 이름을 찾고 싶은 웹 디자이너.
- CSS 의 color 속성을 수치 대신 색상 이름으로 지정하고 싶은 프런트엔드 개발자.
- tomato, teal 같은 CSS 색상 이름이 실제로 어떤 HEX·RGB인지 확인하려는 개발자.
- 브랜드 색이나 추출한 색에 공유하기 쉬운 이름을 붙이고 싶은 디자이너·기획자.
- hex 색상 이름을 빠르게 찾거나 rgb 색상 이름을 색상 코드로 확인하려는 사용자.
주의사항
- 색상 이름은 CSS로 표준화된 색상 이름(웹 색상 이름) 148가지를 대상으로 합니다. 이름 자체가 CSS 키워드이므로 어떤 언어에서도 영어 그대로 표시됩니다.
- 근접도 「ΔE」는 사람의 시각에 가까운 OKLab 색 공간에서의 유클리드 거리입니다. 인쇄 분야에서 쓰는 CIE ΔE2000 과는 다른 근사값으로, 순위의 기준으로 활용하세요.
- 같은 색을 가리키는 별칭(aqua와 cyan, gray와 grey 등)은 근접 결과에서 HEX 기준으로 하나로 묶어 표시합니다. 역조회와 목록에서는 모든 이름을 확인할 수 있습니다.
- 검색과 계산은 모두 웹 브라우저 안에서 이루어지며, 입력한 색은 외부로 전송되지 않습니다.