Test 24: Dedicated Color Cases

ครอบคลุม named colors, hex (3/4/6/8), rgb/rgba syntax แบบ comma และ modern syntax, hsl/hsla, รวมถึง alpha ในพื้นหลัง, สีข้อความ, และเส้นขอบ

A) Direct swatch matrix

CSS expression Rendered swatch
black swatch black
white swatch white
red swatch red
aliceblue swatch aliceblue
#0f8 swatch #0f8
#0f8c swatch #0f8c
#0f3460 swatch #0f3460
#336699cc swatch #336699cc
rgb(255, 128, 0) swatch rgb comma
rgba(64, 32, 16, 0.35) swatch rgba comma
rgb(20 40 60 / 75%) swatch rgb modern
hsl(210 100% 56% / 0.5) swatch hsl modern
hsla(330, 100%, 45%, 0.6) swatch hsla comma

B) Alpha composition on dark base

rgba(255, 99, 71, 0.45)
#22c55e99
hsl(42 95% 55% / 0.55)

C) Text color alpha

ข้อความตัวอย่าง #1: color: #1d4ed8cc (hex with alpha)

ข้อความตัวอย่าง #2: color: rgba(220, 38, 38, 0.65)

Sample #3: color: hsl(280 75% 42% / 0.75)

D) Border color alpha

border sample #0284c799
border sample rgba(16,185,129,0.45)
border sample hsl(24 94% 50% / 0.58)

E) Foreground / background palette ramps

step Background palette Foreground palette
01 BG #0f172a FG #0f172a - The quick brown fox jumps over the lazy dog.
02 BG #1e3a8a FG #1e3a8a - ตัวอย่างข้อความภาษาไทย
03 BG #0369a1 FG #0369a1 - Color parser diagnostic sample
04 BG #0f766e FG #0f766e - พื้นฐานการทดสอบสี
05 BG #65a30d FG #65a30d - Visual spectrum midpoint
06 BG #d97706 FG #d97706 - โทนอุ่นสำหรับทดสอบ contrast
07 BG #c2410c FG #c2410c - Hue ramp for foreground test
08 BG #be123c FG #be123c - สีเข้มสำหรับตรวจ alpha blend