색상 이름 찾기
HEX 또는 RGB 값에 가장 가까운 CSS 색상 이름 찾기
색상 (HEX)
가장 가까운 CSS 색상 이름
Δ = 색상 거리 (낮을수록 가까움)
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개의 가장 가까운 색상을 반환합니다.
색상 이름 찾기 활용 사례
그룹별 CSS 색상 이름 참조
CSS Color Level 4 사양은 148개의 색상 이름 키워드를 정의합니다. 아래 표는 색조 그룹별로 정리하며, 각 그룹의 수와 대표 이름을 포함합니다. 여기 나열된 모든 이름은 모든 최신 브라우저에서 작동하는 유효한 CSS 색상 키워드입니다.
| 색상 그룹 | 수 | 예시 이름 |
|---|---|---|
| Red / Pink | 14 | IndianRed, LightCoral, Salmon, DarkSalmon, Crimson, Red, +8 more |
| Orange | 5 | Coral, Tomato, OrangeRed, DarkOrange, Orange |
| Yellow | 10 | Gold, Yellow, LightYellow, LemonChiffon, PapayaWhip, Moccasin, +4 more |
| Green | 19 | GreenYellow, Chartreuse, LawnGreen, Lime, LimeGreen, SpringGreen, +13 more |
| Blue / Cyan | 24 | Aqua, Cyan, LightCyan, PaleTurquoise, Aquamarine, Turquoise, +18 more |
| Purple | 19 | Lavender, Thistle, Plum, Violet, Orchid, Fuchsia, +13 more |
| Brown | 17 | Cornsilk, BlanchedAlmond, Bisque, NavajoWhite, Wheat, BurlyWood, +11 more |
| Gray / White | 27 | White, Snow, HoneyDew, MintCream, Azure, AliceBlue, +21 more |
색상 거리: 유클리드 RGB 대 지각적 거리
색상 거리를 측정하는 방법에 따라 가장 가까운 색상 이름이 달라질 수 있습니다. 두 가지 접근 방식이 있으며, 동일한 입력에 대해 다른 결과를 반환할 수 있습니다.
코드 예제
RGB 공간의 유클리드 거리를 사용하여 프로그래밍 방식으로 가장 가까운 CSS 색상 이름을 찾습니다. 각 예제는 HEX 문자열을 받아 CSS 사양에서 가장 가까운 색상 이름을 반환합니다.
// 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"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)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
}