색상 이름 찾기

HEX 또는 RGB 값에 가장 가까운 CSS 색상 이름 찾기

예시 시도

색상 (HEX)

가장 가까운 CSS 색상 이름

MediumSlateBlue가장 가까운
#7B68EE
Δ 24
RoyalBlue
#4169E1
Δ 38
SlateBlue
#6A5ACD
Δ 39
CornflowerBlue
#6495ED
Δ 47
MediumPurple
#9370DB
Δ 54

Δ = 색상 거리 (낮을수록 가까움)

CSS 색상 이름이란?

CSS는 브라우저가 숫자 코드 대신 키워드로 인식하는 148개의 색상 이름을 정의합니다. 스타일시트에 #ff6347 대신 Tomato를, #6a5acd 대신 SlateBlue를 사용할 수 있습니다. 이 이름들은 CSS Color Level 3(2011)과 Level 4(2022)를 통해 표준화되었으며, CSS 2.1의 기본 17가지 색상과 초기 Unix 윈도우 시스템에서 상속된 140개의 X11 색상명을 기반으로 합니다.

색상 이름 찾기 도구는 임의의 HEX 또는 RGB 값을 입력받아 가장 가까운 CSS 색상 이름을 찾습니다. 매칭 알고리즘은 RGB 공간에서 두 색상 간의 거리를 계산합니다. 주로 유클리드 거리를 사용합니다: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). 입력값과의 거리가 가장 작은 색상 이름이 결과로 반환됩니다. 거리가 0이면 해당 이름과 정확히 일치하는 색상입니다.

이는 읽기 쉽고 의미가 명확한 CSS를 작성할 때 중요합니다. background-color: Tomato는 background-color: #ff6347보다 의도를 더 빠르게 전달합니다. 디자인 검토, 접근성 감사, 문서 작성 시 색상을 언어로 설명해야 할 때도 유용합니다. '그 붉은 주황색'이라고 하는 대신 'Tomato'라고 말할 수 있습니다.

이 색상 이름 찾기를 사용하는 이유

가장 가까운 색상 이름을 수작업으로 찾으려면 148개 항목의 참조 표를 스크롤하며 HEX 값을 눈으로 비교해야 합니다. 이 도구는 거리 계산을 자동으로 처리하고, 정확한 HEX 코드와 거리 점수와 함께 상위 5개의 가장 가까운 색상을 반환합니다.

🔍
색상 이름으로 즉시 식별
디자인 파일, 색상 선택기, 또는 스크린샷의 HEX 코드를 붙여넣으면 가장 가까운 CSS 색상 이름을 즉시 확인할 수 있습니다. 도구는 거리 순으로 정렬된 5개의 결과를 반환하여 최적의 선택을 할 수 있게 해줍니다.
🔒
개인정보 보호 우선 처리
모든 색상 매칭은 브라우저에서 실행됩니다. 색상 값은 어떤 서버에도 전송되지 않습니다. 페이지가 로드된 후에는 오프라인에서도 작동합니다.
즉각적인 결과
거리 계산은 키 입력마다 실행됩니다. HEX 입력에서 한 글자만 바꿔도 서버 왕복 없이 순위별 결과가 즉시 업데이트됩니다.
📋
이름과 HEX 코드 복사
결과를 클릭하면 색상 이름 또는 HEX 값을 클립보드에 복사합니다. CSS, Sass 변수, Tailwind 설정, 또는 디자인 도구 필드에 바로 붙여넣을 수 있습니다.

색상 이름 찾기 활용 사례

가독성 높은 CSS 작성
HEX 리터럴을 색상 이름으로 대체하는 프런트엔드 개발자는 코드 리뷰 중 더 읽기 쉬운 스타일시트를 얻습니다. 색상 이름은 색상 미리보기 확장 프로그램 없이도 의도를 명확히 전달합니다.
API 응답 레이블링
색상 관련 API를 개발하는 백엔드 엔지니어는 HEX 코드와 함께 사람이 읽을 수 있는 레이블을 반환할 수 있습니다. 가장 가까운 CSS 색상 이름을 찾으면 사용자 정의 이름 사전을 유지할 필요 없이 친숙한 기준점을 제공합니다.
접근성 문서화
색상 대비 문제를 문서화하는 QA 엔지니어는 버그 리포트에서 색상을 이름으로 참조할 수 있습니다. 'DarkSlateGray 배경의 Crimson 텍스트가 AA 대비 기준에 실패합니다'라고 쓰는 것이 HEX 쌍을 나열하는 것보다 명확합니다.
데이터 시각화 범례
차트 시리즈에 색상 이름을 레이블로 사용하는 데이터 엔지니어는 색상 견본 없이도 읽기 쉬운 범례를 만들 수 있습니다. 'CornflowerBlue'라는 이름은 인쇄 또는 단색 환경에서 '#6495ed'보다 훨씬 유용합니다.
디자인 핸드오프
디자이너가 Figma나 Sketch에서 HEX 값으로 색상을 공유할 때, 개발자는 가장 가까운 CSS 이름을 찾아 Slack이나 풀 리퀘스트 댓글에서 이름으로 논의할 수 있습니다.
CSS 색상 학습
CSS를 배우는 학생들은 임의의 HEX 값을 입력하여 근처에 어떤 색상 이름이 있는지 발견할 수 있습니다. 거리 결과를 탐색하면 148개의 내장 색상 키워드에 대한 친숙도를 높일 수 있습니다.

그룹별 CSS 색상 이름 참조

CSS Color Level 4 사양은 148개의 색상 이름 키워드를 정의합니다. 아래 표는 색조 그룹별로 정리하며, 각 그룹의 수와 대표 이름을 포함합니다. 여기 나열된 모든 이름은 모든 최신 브라우저에서 작동하는 유효한 CSS 색상 키워드입니다.

색상 그룹예시 이름
Red / Pink14IndianRed, LightCoral, Salmon, DarkSalmon, Crimson, Red, +8 more
Orange5Coral, Tomato, OrangeRed, DarkOrange, Orange
Yellow10Gold, Yellow, LightYellow, LemonChiffon, PapayaWhip, Moccasin, +4 more
Green19GreenYellow, Chartreuse, LawnGreen, Lime, LimeGreen, SpringGreen, +13 more
Blue / Cyan24Aqua, Cyan, LightCyan, PaleTurquoise, Aquamarine, Turquoise, +18 more
Purple19Lavender, Thistle, Plum, Violet, Orchid, Fuchsia, +13 more
Brown17Cornsilk, BlanchedAlmond, Bisque, NavajoWhite, Wheat, BurlyWood, +11 more
Gray / White27White, Snow, HoneyDew, MintCream, Azure, AliceBlue, +21 more

색상 거리: 유클리드 RGB 대 지각적 거리

색상 거리를 측정하는 방법에 따라 가장 가까운 색상 이름이 달라질 수 있습니다. 두 가지 접근 방식이 있으며, 동일한 입력에 대해 다른 결과를 반환할 수 있습니다.

유클리드 RGB 거리
R, G, B를 3D 공간의 축으로 처리하고 직선 거리를 계산합니다: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). 단순하고 빠르며 이 도구에서 사용하는 방식입니다. 대부분의 실용적인 경우에 잘 작동하지만, 사람의 눈이 파란색보다 녹색에 더 민감하기 때문에 특정 녹색-파란색 전환에서 인간 지각과 다른 결과를 보일 수 있습니다.
CIEDE2000 (Delta E)
국제 조명 위원회(CIE)가 정의한 지각적 거리 공식입니다. 색상을 CIELAB 색 공간으로 먼저 변환한 후, 인간 지각에 맞게 밝기, 채도, 색조 보정을 적용합니다. 엣지 케이스에서 더 정확하지만 계산이 훨씬 복잡합니다. 산업용 색상 매칭에는 필요하지만, CSS 키워드 근접 검색에는 과도한 방식입니다.

코드 예제

RGB 공간의 유클리드 거리를 사용하여 프로그래밍 방식으로 가장 가까운 CSS 색상 이름을 찾습니다. 각 예제는 HEX 문자열을 받아 CSS 사양에서 가장 가까운 색상 이름을 반환합니다.

JavaScript
// Euclidean distance in RGB space
function nearestCssColor(hex) {
  const r = parseInt(hex.slice(1, 3), 16)
  const g = parseInt(hex.slice(3, 5), 16)
  const b = parseInt(hex.slice(5, 7), 16)

  let bestName = ''
  let bestDist = Infinity

  for (const [name, value] of Object.entries(cssColors)) {
    const r2 = parseInt(value.slice(1, 3), 16)
    const g2 = parseInt(value.slice(3, 5), 16)
    const b2 = parseInt(value.slice(5, 7), 16)
    const dist = Math.sqrt((r - r2) ** 2 + (g - g2) ** 2 + (b - b2) ** 2)
    if (dist < bestDist) { bestDist = dist; bestName = name }
  }
  return bestName
}

nearestCssColor('#6366f1') // → "SlateBlue"
nearestCssColor('#1e293b') // → "DarkSlateGray"
Python
import math

CSS_COLORS = {
    "Crimson": (220, 20, 60), "SlateBlue": (106, 90, 205),
    "Tomato": (255, 99, 71), "Teal": (0, 128, 128),
    # ... full list of 148 entries
}

def hex_to_rgb(hex_str: str) -> tuple[int, int, int]:
    h = hex_str.lstrip("#")
    return (int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16))

def nearest_css_color(hex_str: str) -> str:
    r, g, b = hex_to_rgb(hex_str)
    best = min(
        CSS_COLORS.items(),
        key=lambda item: math.dist((r, g, b), item[1])
    )
    return best[0]

print(nearest_css_color("#6366f1"))  # → SlateBlue
print(nearest_css_color("#ff6347"))  # → Tomato (exact match, distance 0)
Go
package main

import (
	"fmt"
	"math"
	"strconv"
)

type CSSColor struct {
	Name    string
	R, G, B int
}

var colors = []CSSColor{
	{"Crimson", 220, 20, 60},
	{"SlateBlue", 106, 90, 205},
	{"Tomato", 255, 99, 71},
	// ... full list
}

func hexToRGB(hex string) (int, int, int) {
	r, _ := strconv.ParseInt(hex[1:3], 16, 64)
	g, _ := strconv.ParseInt(hex[3:5], 16, 64)
	b, _ := strconv.ParseInt(hex[5:7], 16, 64)
	return int(r), int(g), int(b)
}

func nearest(hex string) string {
	r, g, b := hexToRGB(hex)
	best := ""
	bestDist := math.MaxFloat64
	for _, c := range colors {
		d := math.Sqrt(float64((r-c.R)*(r-c.R) + (g-c.G)*(g-c.G) + (b-c.B)*(b-c.B)))
		if d < bestDist {
			bestDist = d
			best = c.Name
		}
	}
	return best
}

func main() {
	fmt.Println(nearest("#6366f1")) // → SlateBlue
}

자주 묻는 질문

CSS는 몇 개의 색상 이름을 지원하나요?
CSS Color Level 4는 148개의 색상 이름 키워드를 정의합니다. 여기에는 CSS 2.1의 기본 17가지 색상(black, white, red, blue 등), CSS 3에서 추가된 140개의 X11 색상 이름, 그리고 CSS 4에서 CSS 작성자 Eric Meyer의 딸을 기리기 위해 추가된 RebeccaPurple 키워드가 포함됩니다. 148개의 이름은 모두 대소문자를 구분하지 않으며 모든 최신 브라우저에서 작동합니다.
색상 이름 찾기와 색상 변환기의 차이는?
색상 변환기는 색상을 형식 간에 변환합니다: HEX를 RGB로, HSL을 HEX로, RGB를 CMYK로 변환합니다. 색상 이름 찾기는 다른 작업을 합니다. 148개의 CSS 색상 이름을 검색하여 입력값과 가장 작은 거리를 가진 색상을 반환합니다. 출력은 숫자 표현이 아닌 키워드(Tomato 또는 SlateBlue 등)입니다.
유클리드 RGB 거리는 색상 매칭에 얼마나 정확한가요?
유클리드 RGB 거리는 대부분의 색상 조회에서 올바른 결과를 제공합니다. RGB 모델은 세 채널을 동등하게 처리하지만 인간의 눈은 파란색보다 녹색을 더 강하게 인식하기 때문에 녹색-파란색 범위에서 예상치 못한 매칭이 발생할 수 있습니다. 하지만 가장 가까운 CSS 키워드를 찾는 웹 개발 작업에서는 이 차이가 실제로 거의 문제가 되지 않습니다.
JavaScript에서 CSS 색상 이름을 사용할 수 있나요?
네. CSS.supports() API, 캔버스 2D 컨텍스트, SVG fill/stroke 속성 모두 색상 이름을 허용합니다. element.style.backgroundColor = 'Tomato'를 직접 설정할 수 있습니다. 색상 이름은 CSS 사용자 정의 속성과 getComputedStyle() 메서드에서도 작동하지만, 브라우저는 설정 방식에 관계없이 계산된 값을 rgb() 형식으로 반환합니다.
왜 PapayaWhip이나 BlanchedAlmond 같은 이상한 이름이 있나요?
이 이름들은 1980년대 Unix 워크스테이션의 X 윈도우 시스템을 위해 만들어진 X11 색상 데이터베이스에서 유래했습니다. 이름은 공식적인 명명 규칙 없이 원래 작성자들이 선택했습니다. CSS Level 3에서 X11 색상을 채택할 때 하위 호환성을 위해 기존 이름을 유지했습니다. 그 결과 설명적인 이름(DarkRed), 음식 이름(PapayaWhip, Chocolate, Salmon), 지명(Peru, Sienna)이 혼재하게 되었습니다.
RebeccaPurple은 공식 CSS 색상인가요?
네. RebeccaPurple(#663399)은 2014년 CSS Color Level 4 사양에 추가되었습니다. CSS 작성자 Eric Meyer의 딸 Rebecca Meyer를 기리기 위해 CSS 워킹 그룹이 제안했으며, 그녀는 여섯 살에 뇌종양으로 세상을 떠났습니다. 이 색상은 2014년 이후 출시된 모든 브라우저에서 지원됩니다.
입력한 HEX 값이 두 색상에서 동일한 거리일 때는 어떻게 되나요?
두 색상이 입력값과 동일한 유클리드 거리를 가질 때, 결과는 순회 순서에 따라 달라집니다. 이 도구는 CSS 색상 목록을 알파벳 순서로 순회하며 처음 발견된 매칭을 유지합니다. 실제로 완전한 동점은 거의 발생하지 않습니다. 148개의 색상 이름은 RGB 공간에서 불균등하게 분포되어 있기 때문에 대부분의 HEX 입력에는 단일한 가장 가까운 매칭이 존재합니다.