ตัวค้นหาชื่อสี CSS
ค้นหาชื่อสี CSS ที่ใกล้ที่สุดสำหรับค่า HEX หรือ RGB ใดก็ได้
สี (HEX)
ชื่อสี CSS ที่ใกล้ที่สุด
Δ = ระยะห่างสี (ค่าน้อยกว่า = ใกล้กว่า)
ชื่อสี CSS คืออะไร?
CSS กำหนดชื่อสีไว้ 148 ชื่อที่เบราว์เซอร์รู้จักด้วยคีย์เวิร์ดแทนที่จะใช้รหัสตัวเลข แทนที่จะเขียน #ff6347 ใน stylesheet คุณสามารถเขียน Tomato แทนที่จะเขียน #6a5acd คุณสามารถเขียน SlateBlue ชื่อเหล่านี้ถูกกำหนดมาตรฐานใน CSS Color Level 3 (2011) และ Level 4 (2022) โดยสร้างต่อจาก 17 สีดั้งเดิมใน CSS 2.1 และชื่อสีจาก X11 อีก 140 ชื่อที่สืบทอดมาจากระบบ Unix window รุ่นแรก
ตัวค้นหาชื่อสีรับค่า hex หรือ RGB ใดก็ได้และค้นหาชื่อสี CSS ที่ใกล้ที่สุด อัลกอริทึมการจับคู่คำนวณระยะห่างระหว่างสองสีใน RGB space โดยทั่วไปใช้ Euclidean distance: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2) ชื่อสีที่มีระยะห่างน้อยที่สุดจากอินพุตของคุณคือผู้ชนะ หากระยะห่างเป็นศูนย์ อินพุตของคุณตรงกับชื่อนั้นพอดี
สิ่งนี้มีความสำคัญเมื่อคุณต้องการ CSS ที่อ่านง่ายและสื่อความหมายในตัว กฎอย่าง background-color: Tomato สื่อเจตนาได้เร็วกว่า background-color: #ff6347 นอกจากนี้ยังช่วยเมื่อคุณต้องอ้างอิงสีด้วยคำพูดในการรีวิวการออกแบบ การตรวจสอบ accessibility หรือเอกสาร แทนที่จะพูดว่า 'สีส้มแดงนั้น' คุณสามารถพูดว่า 'Tomato'
ทำไมต้องใช้ตัวค้นหาชื่อสีนี้?
การค้นหาชื่อสีที่ใกล้ที่สุดด้วยตนเองหมายถึงการเลื่อนดูตารางอ้างอิง 148 รายการและเปรียบเทียบค่า hex ด้วยสายตา เครื่องมือนี้คำนวณระยะห่างให้คุณและคืนค่า 5 สีที่ใกล้ที่สุดพร้อมรหัส hex และคะแนนระยะห่างที่แน่นอน
กรณีการใช้งานตัวค้นหาชื่อสี
ตารางอ้างอิงชื่อสี 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 |
ระยะห่างสี: Euclidean RGB กับ Perceptual
วิธีที่ใช้วัดระยะห่างสีส่งผลต่อว่าชื่อสีใดจะถูกรายงานว่าใกล้ที่สุด มีสองแนวทางที่อาจให้ผลลัพธ์ต่างกันสำหรับอินพุตเดียวกัน
ตัวอย่างโค้ด
ค้นหาชื่อสี CSS ที่ใกล้ที่สุดด้วยโปรแกรมโดยใช้ Euclidean distance ใน RGB space แต่ละตัวอย่างรับ hex string และคืนค่าชื่อสีที่ใกล้ที่สุดจากข้อกำหนด 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
}