ToolDeck

ตัวค้นหาชื่อสี CSS

ค้นหาชื่อสี CSS ที่ใกล้ที่สุดสำหรับค่า HEX หรือ RGB ใดก็ได้

ลองตัวอย่าง

สี (HEX)

ชื่อสี CSS ที่ใกล้ที่สุด

MediumSlateBlueใกล้ที่สุด
#7B68EE
Δ 24
RoyalBlue
#4169E1
Δ 38
SlateBlue
#6A5ACD
Δ 39
CornflowerBlue
#6495ED
Δ 47
MediumPurple
#9370DB
Δ 54

Δ = ระยะห่างสี (ค่าน้อยกว่า = ใกล้กว่า)

ชื่อสี 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 และคะแนนระยะห่างที่แน่นอน

🔍
ระบุสีใดก็ได้ด้วยชื่อ
วางรหัส hex จากไฟล์ออกแบบ color picker หรือภาพหน้าจอ แล้วรับชื่อสี CSS ที่ใกล้ที่สุดทันที เครื่องมือคืนค่า 5 ผลลัพธ์เรียงตามระยะห่างเพื่อให้คุณเลือกที่เหมาะสมที่สุด
🔒
ประมวลผลโดยให้ความเป็นส่วนตัวเป็นหลัก
การจับคู่สีทั้งหมดทำงานในเบราว์เซอร์ของคุณ ไม่มีค่าสีถูกส่งไปยังเซิร์ฟเวอร์ใด เครื่องมือทำงานแบบออฟไลน์หลังจากโหลดหน้าแล้ว
ผลลัพธ์ทันที
การคำนวณระยะห่างทำงานทุกครั้งที่กดแป้นพิมพ์ เปลี่ยนอักขระเดียวใน hex และผลลัพธ์ที่เรียงลำดับจะอัปเดตทันทีโดยไม่มีความล่าช้า
📋
คัดลอกชื่อและรหัส Hex
คลิกผลลัพธ์ใดก็ได้เพื่อคัดลอกชื่อสีหรือค่า hex ไปยังคลิปบอร์ด วางลงใน CSS, Sass variables, Tailwind config หรือฟิลด์ในเครื่องมือออกแบบได้โดยตรง

กรณีการใช้งานตัวค้นหาชื่อสี

การเขียน CSS ที่อ่านง่าย
นักพัฒนา Frontend ที่แทนที่ค่า hex ด้วยชื่อสีจะได้ stylesheet ที่ง่ายต่อการตรวจสอบในระหว่าง code review ชื่อสีสื่อเจตนาโดยไม่ต้องใช้ extension ดูตัวอย่างสี
การติดป้ายกำกับ API Response
วิศวกร Backend ที่สร้าง API เกี่ยวกับสีสามารถคืนค่าป้ายกำกับที่มนุษย์อ่านได้พร้อมกับรหัส hex การค้นหาชื่อสี CSS ที่ใกล้ที่สุดให้จุดอ้างอิงที่คุ้นเคยแก่ผู้ใช้โดยไม่ต้องดูแล dictionary ชื่อสีเอง
เอกสาร Accessibility
วิศวกร QA ที่จัดทำเอกสารปัญหาคอนทราสต์สีสามารถอ้างอิงสีด้วยชื่อในรายงานข้อบกพร่อง การเขียนว่า 'ข้อความ Crimson บนพื้นหลัง DarkSlateGray ไม่ผ่านคอนทราสต์ระดับ AA' ชัดเจนกว่าการอ้างคู่ค่า hex
ป้ายกำกับในการแสดงข้อมูลด้วยภาพ
วิศวกรข้อมูลที่ติดป้ายกำกับชุดข้อมูลในกราฟด้วยชื่อสีจะได้ legend ที่อ่านได้โดยไม่ต้องมีตัวอย่างสี ชื่อ 'CornflowerBlue' มีประโยชน์กว่าในบริบทสิ่งพิมพ์หรือขาวดำมากกว่า '#6495ed'
การส่งมอบงานออกแบบ
เมื่อนักออกแบบแชร์สีจาก Figma หรือ Sketch เป็นค่า hex นักพัฒนาสามารถค้นหาชื่อ CSS ที่ใกล้ที่สุดและพูดคุยด้วยชื่อนั้นใน Slack หรือใน pull request comment
การเรียนรู้สี 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

ระยะห่างสี: Euclidean RGB กับ Perceptual

วิธีที่ใช้วัดระยะห่างสีส่งผลต่อว่าชื่อสีใดจะถูกรายงานว่าใกล้ที่สุด มีสองแนวทางที่อาจให้ผลลัพธ์ต่างกันสำหรับอินพุตเดียวกัน

Euclidean RGB Distance
ถือว่า R, G, B เป็นแกนใน 3D space และคำนวณระยะทางเส้นตรง: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2) เรียบง่าย รวดเร็ว และเป็นวิธีที่เครื่องมือนี้ใช้ ทำงานได้ดีสำหรับกรณีส่วนใหญ่ แต่อาจไม่ตรงกับการรับรู้ของมนุษย์สำหรับการเปลี่ยนผ่านจากสีเขียวเป็นสีน้ำเงินบางช่วง เพราะดวงตามนุษย์ไวต่อสีเขียวมากกว่าสีน้ำเงิน
CIEDE2000 (Delta E)
สูตรระยะห่างเชิงการรับรู้ที่กำหนดโดย International Commission on Illumination (CIE) แปลงสีเป็น CIELAB color space ก่อน จากนั้นปรับค่าความสว่าง chroma และ hue ให้ตรงกับการรับรู้ของมนุษย์ แม่นยำกว่าสำหรับกรณีพิเศษแต่ซับซ้อนกว่ามากในการคำนวณ จำเป็นสำหรับการจับคู่สีในอุตสาหกรรม แต่มากเกินไปสำหรับการค้นหาคีย์เวิร์ด CSS ที่ใกล้ที่สุด

ตัวอย่างโค้ด

ค้นหาชื่อสี CSS ที่ใกล้ที่สุดด้วยโปรแกรมโดยใช้ Euclidean distance ใน RGB space แต่ละตัวอย่างรับ hex string และคืนค่าชื่อสีที่ใกล้ที่สุดจากข้อกำหนด 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 คำ ได้แก่ 17 สีดั้งเดิมจาก CSS 2.1 (เช่น black, white, red, blue) ชื่อสีจาก X11 อีก 140 ชื่อที่เพิ่มใน CSS 3 และคีย์เวิร์ด RebeccaPurple ที่เพิ่มใน CSS 4 เพื่อรำลึกถึงลูกสาวของ Eric Meyer ชื่อทั้ง 148 ชื่อไม่คำนึงถึงตัวพิมพ์เล็กใหญ่และทำงานได้ในเบราว์เซอร์สมัยใหม่ทุกตัว
ความแตกต่างระหว่างตัวค้นหาชื่อสีและตัวแปลงสีคืออะไร?
ตัวแปลงสีเปลี่ยนสีระหว่างรูปแบบ: hex เป็น RGB, HSL เป็น hex, RGB เป็น CMYK ตัวค้นหาชื่อสีทำสิ่งที่แตกต่าง โดยค้นหาในชื่อสี CSS 148 ชื่อและคืนค่าที่มีระยะห่างน้อยที่สุดจากอินพุต ผลลัพธ์คือคีย์เวิร์ด (เช่น Tomato หรือ SlateBlue) ไม่ใช่การแทนด้วยตัวเลข
Euclidean RGB distance แม่นยำเพียงใดสำหรับการจับคู่สี?
Euclidean RGB distance ให้ผลลัพธ์ที่ถูกต้องสำหรับการค้นหาสีส่วนใหญ่ อาจสร้างผลลัพธ์ที่ไม่คาดคิดในช่วงสีเขียว-น้ำเงิน เพราะดวงตามนุษย์รับรู้สีเขียวได้เข้มข้นกว่าสีน้ำเงิน แต่โมเดล RGB ถือว่าสามช่องเท่ากัน สำหรับงานพัฒนา web อย่างการค้นหาคีย์เวิร์ด CSS ที่ใกล้ที่สุด ความแตกต่างนี้แทบไม่มีผลในทางปฏิบัติ
ใช้ชื่อสี CSS ใน JavaScript ได้หรือไม่?
ได้ CSS.supports() API, canvas 2D context และ attribute fill/stroke ของ SVG ล้วนรับชื่อสีได้ คุณสามารถตั้งค่า element.style.backgroundColor = 'Tomato' ได้โดยตรง ชื่อสียังทำงานใน CSS custom properties และกับ getComputedStyle() method แม้ว่าเบราว์เซอร์จะคืนค่าที่คำนวณในรูปแบบ rgb() ไม่ว่าคุณจะตั้งค่าอย่างไร
ทำไมบางสีถึงมีชื่อแปลก ๆ อย่าง PapayaWhip หรือ BlanchedAlmond?
ชื่อเหล่านี้มาจากฐานข้อมูลสี X11 ซึ่งสร้างขึ้นสำหรับ X Window System บนเวิร์กสเตชัน Unix ในทศวรรษ 1980 ชื่อถูกเลือกโดยผู้สร้างดั้งเดิมโดยไม่มีรูปแบบการตั้งชื่ออย่างเป็นทางการ เมื่อ CSS นำชื่อสี X11 มาใช้ใน Level 3 ก็รักษาชื่อเดิมไว้เพื่อความเข้ากันได้ ผลลัพธ์คือชื่อที่เป็นการผสมผสานของชื่อเชิงพรรณนา (DarkRed) การอ้างอิงอาหาร (PapayaWhip, Chocolate, Salmon) และชื่อทางภูมิศาสตร์ (Peru, Sienna)
RebeccaPurple เป็นสี CSS อย่างเป็นทางการหรือไม่?
ใช่ RebeccaPurple (#663399) ถูกเพิ่มเข้าในข้อกำหนด CSS Color Level 4 ในปี 2014 โดยเสนอโดย CSS Working Group เพื่อรำลึกถึง Rebecca Meyer ลูกสาวของ Eric Meyer ผู้เขียน CSS ซึ่งเสียชีวิตด้วยโรคมะเร็งสมองตอนอายุหกขวบ สีนี้รองรับในเบราว์เซอร์ทุกตัวที่เปิดตัวหลังปี 2014
จะเกิดอะไรขึ้นเมื่อค่า hex อินพุตมีระยะห่างเท่ากันจากสองชื่อสี?
เมื่อสองชื่อสีมี Euclidean distance เท่ากันจากอินพุต ผลลัพธ์ขึ้นอยู่กับลำดับการวนซ้ำ เครื่องมือนี้วนซ้ำรายการสี CSS ตามลำดับตัวอักษรและเก็บค่าที่พบก่อน ในทางปฏิบัติ การผูกแบบเท่ากันพอดีนั้นหายาก เพราะชื่อสี 148 ชื่อกระจายอย่างไม่สม่ำเสมอใน RGB space อินพุต hex ส่วนใหญ่มีผลลัพธ์ที่ใกล้ที่สุดเพียงชื่อเดียว