สี

The CSS Podcast - 006: Color Part One

สีเป็นส่วนสำคัญของเว็บไซต์ทุกแห่ง และ CSS มีตัวเลือกมากมายสำหรับการระบุและจัดการสี

คุณตัดสินใจเลือกประเภทสีที่จะใช้อย่างไร คุณทำให้สีกึ่งโปร่งใสได้อย่างไร ในบทเรียนนี้ คุณจะได้เรียนรู้ตัวเลือกที่มีเพื่อช่วยในการตัดสินใจที่ถูกต้องสำหรับโปรเจ็กต์และทีม

CSS มีประเภทข้อมูลที่แตกต่างกันมากมาย เช่น สตริงและตัวเลข สีเป็นหนึ่งในประเภทเหล่านี้และใช้ประเภทอื่นๆ เช่น ตัวเลขสําหรับคําจํากัดความของตนเอง

การเลือกสี

สีที่มีชื่อ

วิธีที่ง่ายที่สุดในการเลือกสีคือเลือกจากสีที่มีชื่อ 148 สีใน CSS โดยใช้ชื่อภาษาอังกฤษธรรมดา เช่น purple, tomato และ goldenrod สารานุกรมเว็บระบุว่าชื่อยอดนิยมบางชื่อ ได้แก่ black, white, red, blue และ gray รายการโปรดของเรา ได้แก่ goldenrod, aliceblue และ hotpink

สีตัวเลข

แม้ว่าสีที่มีชื่อจะสะดวก แต่คุณอาจต้องใช้สีที่เฉพาะเจาะจงซึ่งไม่มีในชุดนั้น คุณสามารถระบุสีด้วยค่าตัวเลขได้หลายรูปแบบ

สีแบบเลขฐาน 16

h1 {
  color: #b71540;
}

รูปแบบเลขฐานสิบหก (มักเรียกสั้นๆ ว่า Hex) คือไวยากรณ์แบบย่อสำหรับ RGB ซึ่งกำหนดค่าตัวเลขให้กับสีแดง เขียว และน้ำเงิน ซึ่งเป็นสีหลัก 3 สี

ช่วงของเลขฐานสิบหกคือ 0-9 และ A-F เมื่อใช้ตามลำดับ 6 หลัก ระบบจะแปลงเป็นช่วงตัวเลข RGB ซึ่งอยู่ในช่วง 0-255 ซึ่งสอดคล้องกับช่องสีสีแดง เขียว และน้ำเงินตามลำดับ

นอกจากนี้ คุณยังกําหนดค่าอัลฟ่าด้วยสีตัวเลขใดก็ได้ ค่าอัลฟ่าคือเปอร์เซ็นต์ของความโปร่งใส ในรหัสฐาน 16 คุณจะเพิ่มตัวเลขอีก 2 หลักลงในลำดับ 6 หลัก ซึ่งจะเป็นลำดับ 8 หลัก เช่น หากต้องการตั้งค่าสีดําเป็นรหัสฐาน 16 ให้เขียน #000000 หากต้องการเพิ่มความโปร่งใส 50% ให้เปลี่ยนเป็น #00000080

เนื่องจากรูปแบบฐาน 16 คือ 0-9 และ A-F ค่าความโปร่งใสจึงอาจไม่ตรงกับที่คุณคาดไว้ ค่าหลักที่พบบ่อยซึ่งเพิ่มลงในรหัสฐาน 16 สีดํา #000000 มีดังนี้

• อัลฟ่า 0% ซึ่งโปร่งใสทั้งหมดคือ 00: #00000000
• อัลฟ่า 50% คือ 80: #00000080
• อัลฟ่า 75% คือ BF: #000000BF

หากต้องการแปลงเลขฐาน 16 2 หลักเป็นฐาน 10 ให้นำตัวเลขแรกไปคูณด้วย 16 (เนื่องจากเลขฐาน 16 เป็นฐาน 16) แล้วบวกตัวเลขที่ 2 โดยใช้ BF เป็นตัวอย่างสำหรับอัลฟ่า 75%

1. B เท่ากับ 11 เมื่อคูณด้วย 16 เท่ากับ 176
2. F เท่ากับ 15
3. 176 + 15 = 191
4. ค่าอัลฟาคือ 191 ซึ่งเท่ากับ 75% ของ 255

RGB (แดง เขียว น้ำเงิน)

h1 {
  color: rgb(183 21 64);
}

สี RGB จะกำหนดด้วยฟังก์ชันสี rgb() โดยจะใช้ตัวเลขหรือเปอร์เซ็นต์เป็นพารามิเตอร์ก็ได้ ตัวเลขต้องอยู่ในช่วง 0-255 และเปอร์เซ็นต์ต้องอยู่ระหว่าง 0% ถึง 100% RGB ทำงานในรูปแบบ 0-255 ดังนั้น 255 จะเท่ากับ 100% และ 0 จะเท่ากับ 0%

หากต้องการตั้งค่าสีดําเป็น RGB ให้กําหนดเป็น rgb(0 0 0) ซึ่งก็คือ 0 สีแดง 0 สีเขียว และ 0 น้ำเงิน หรือจะกําหนดสีดําเป็น rgb(0% 0% 0%) ก็ได้ สีขาวตรงข้ามกับ rgb(255 255 255) หรือ rgb(100% 100% 100%)

การตั้งค่าอัลฟ่าใน rgb() ทำได้ 2 วิธีดังนี้ เพิ่ม / หลังพารามิเตอร์สีแดง เขียว และน้ำเงิน หรือใช้ฟังก์ชัน rgba() โดยสามารถกําหนดค่าอัลฟ่าเป็นเปอร์เซ็นต์หรือทศนิยมระหว่าง 0 ถึง 1 เช่น หากต้องการตั้งค่าสีดำอัลฟ่า 50% ในเบราว์เซอร์สมัยใหม่ ให้เขียน rgb(0 0 0 / 50%) หรือ rgb(0 0 0 / 0.5)

HSL (Hue, Saturation, Lightness)

h1 {
  color: hsl(344 79% 40%);
}

HSL ย่อมาจาก Hue, Saturation และ Lightness เฉดสีจะอธิบายค่าในวงล้อสีตั้งแต่ 0 ถึง 360 องศา โดยเริ่มจากสีแดง (ทั้ง 0 และ 360) ส่วนสีที่มีค่า 180 หรือ 50% จะอยู่ในช่วงสีน้ำเงิน ซึ่งเป็นต้นกำเนิดของสีที่เราเห็น

ความอิ่มตัวคือระดับความสดของสีที่เลือก สีที่ลดความอิ่มตัวจนหมด (มีความอิ่มตัว 0%) จะปรากฏเป็นสีเทา และสุดท้ายคือความสว่าง ซึ่งเป็นพารามิเตอร์ที่อธิบายระดับความสว่างที่เพิ่มจากสีขาวเป็นสีดำ ความสว่าง 100% จะให้สีขาวเสมอ

เมื่อใช้ฟังก์ชันสี hsl() คุณกำหนดสีดําจริงได้โดยเขียน hsl(0 0% 0%) หรือแม้แต่ hsl(0deg 0% 0%) เนื่องจากพารามิเตอร์สีกำหนดองศาในวงล้อสี ซึ่งหากใช้ประเภทตัวเลขจะเป็น 0-360 นอกจากนี้ คุณยังใช้ประเภทมุม ซึ่งก็คือ (0deg) หรือ (0turn) ได้ด้วย ทั้งความอิ่มตัวและความสว่างจะกำหนดด้วยเปอร์เซ็นต์

ระบบจะกำหนดอัลฟ่าใน hsl() ในลักษณะเดียวกันกับ rgb() ด้วยการเพิ่ม / หลังพารามิเตอร์โทนสี ความอิ่มตัว และความสว่าง หรือ โดยใช้ฟังก์ชัน hsla() โดยสามารถกําหนดค่าอัลฟ่าเป็นเปอร์เซ็นต์หรือทศนิยมระหว่าง 0 ถึง 1 เช่น หากต้องการตั้งค่าสีดําอัลฟ่า 50% ให้ใช้ hsl(0 0% 0% / 50%) หรือ hsl(0 0% 0% / 0.5) ใช้ฟังก์ชัน hsla() โดยเขียน hsla(0, 0%, 0%, 50%) หรือ hsla(0, 0%, 0%, 0.5)

สีความละเอียดสูง

RGB และ HSL จะกำหนดสีในขอบเขตสี sRGB จอภาพรุ่นใหม่รองรับสีได้มากกว่าที่รูปแบบเหล่านี้จะแสดงได้ และอยู่นอกช่วงสี sRGB คุณเลือกสีเหล่านี้ได้ด้วยฟังก์ชัน CSS ที่หลากหลาย

ฟังก์ชัน color()

h1 {
  color: color(srgb 0.9 0.2 0.4);
}

ฟังก์ชัน color() ของ CSS ช่วยให้คุณเลือกสีในพื้นที่สีที่เฉพาะเจาะจงได้ อาร์กิวเมนต์แรกคือพื้นที่สีที่จะใช้ ซึ่งจะกำหนดตัวเลือกสำหรับแชแนลต่อไปนี้ เช่นเดียวกับ rgb() คุณสามารถตั้งค่าแชแนลอัลฟ่าได้โดยการตั้งค่าตัวเลขระหว่าง 0 ถึง 1 หรือเปอร์เซ็นต์หลัง /

เช่น สี RGB สีแดงเข้มในข้อมูลโค้ดก่อนหน้าซึ่งกําหนดเป็น rgb(183 21 64) สามารถกําหนดด้วยเปอร์เซ็นต์เป็น rgb(72% 8% 25%) คุณสามารถใช้ฟังก์ชัน color() กับคีย์เวิร์ด srgb เพื่อระบุสีเดียวกันกับ color(srgb .72 .08 .25)

srgb จะกำหนดพื้นที่สีและบอกเราว่าอาร์กิวเมนต์ 3 รายการถัดไปคือสีแดง เขียว และน้ำเงิน ค่ามีตั้งแต่ 0 ถึง 1 แทนที่จะเป็น 0 ถึง 255

เช่นเดียวกับ rgb() เราสามารถตั้งค่าอัลฟ่าด้วย / และเปอร์เซ็นต์ หรือทศนิยมระหว่าง 0 และ 1

คุณสามารถใช้พื้นที่สีได้หลายแบบกับฟังก์ชัน color() โดยแต่ละแบบจะมีจุดแข็งและกรณีการใช้งานที่แตกต่างกัน

Display P3

h1 {
  color: color(display-p3 0.9 0.2 0.4);
}

ช่วงสี Display P3 มีสีมากกว่า sRGB 50% คุณสามารถระบุสีทั้งหมดในช่วงสี Display P3 ด้วยพื้นที่สี Display P3 โดยใช้ฟังก์ชัน color()

หากต้องการตั้งค่าสีดําใน Display P3 ให้กําหนดเป็น color(display-p3 0 0 0) หลังจากระบุพื้นที่สี display-p3 สำหรับฟังก์ชัน color() แล้ว คุณจะมี 3 ช่อง ได้แก่ สีแดง เขียว และน้ำเงิน ซึ่งคล้ายกับ color(srgb) แต่เนื่องจากค่าของช่องแสดงพิกัดในพื้นที่สีที่กว้างขึ้น ค่าของช่องเดียวกันจึงมีความหมายต่างกัน

color(srgb 1 .5 0) คือสีส้มที่เทียบเท่ากับ color(display-p3 0.93596 0.52724 0.1983) เราทำให้สีส้มดูมีชีวิตชีวายิ่งขึ้นได้ด้วยการขยายสีส้มจากพื้นที่สี sRGB ไปยัง color(display-p3 1 .5 0)

Oklab

Oklab กำหนดด้วยฟังก์ชัน oklab() ที่มีช่องความสว่าง a และ b ซึ่งมีประโยชน์ในการสร้างการไล่สีที่ราบรื่นและปรับความอิ่มตัวของสี ขณะเดียวกันก็คงโทนสีและความสว่างไว้

h1 {
  color: oklab(75% 0.1 0.1)
}

ช่องความสว่างมีตั้งแต่ 0 ถึง 1 หรือ 0% ถึง 100% สีที่มีความสว่าง 0 จะเป็นสีดําเสมอ

แชแนล a เริ่มจาก -0.4 ถึง 0.4 หรือ 0% ถึง 100% ค่าที่ต่ำจะดูเป็นสีเขียวมากขึ้น และค่าที่สูงจะดูเป็นสีแดงมากขึ้น

แชแนล b เริ่มจาก -0.4 ถึง 0.4 หรือ 0% ถึง 100% ค่าที่ต่ำจะมีสีน้ำเงินมากกว่า และค่าที่สูงจะมีสีเหลืองมากกว่า

OkLCh

OkLCh เป็นรูปแบบขั้วโลกหรือทรงกระบอกของ OKLab และกำหนดด้วยแชแนลความสว่าง ความเข้ม และสี ซึ่งมีประโยชน์ในการปรับสีในลักษณะที่รับรู้ได้เหมือนกัน ซึ่งหมายความว่าการเปลี่ยนแปลงสีจะไม่ส่งผลต่อความสว่างหรือความอิ่มตัวของสี

h1 {
  color: oklch(80% 0.1 200)
}

คุณได้ทำงานกับความสว่างและสีใน HSL และ Chroma ก็คล้ายกับความอิ่มตัว คุณตั้งค่าเป็นสีดําได้โดยใช้ oklch(0 0 0) และตั้งค่าเป็นสีขาวได้โดยใช้ oklch(1 0 0)

ช่องความสว่างมีตั้งแต่ 0 ถึง 1 หรือ 0% ถึง 100% สีที่มีความสว่าง 0 จะเป็นสีดําเสมอ

ช่องโครมาจะกำหนดความสดใสของสี โดยค่า 0 หรือ 0% จะเป็นสีซีด และค่าที่สูงขึ้นจะมีสีมากขึ้น ค่า 100% เหมือนกับ .4 แต่อาจอยู่นอกช่วงสีได้อย่างรวดเร็วเมื่อใช้ค่าที่ใกล้เคียงกับ .4

ค่าสีจะระบุเป็นองศาเช่นเดียวกับ hsl()

OkLCh ไม่ได้ถูกจำกัดด้วยช่วงสีอย่าง Display P3 คุณจึงต้องตรวจสอบว่าคุณกำลังสร้างสีที่แสดงได้ oklch(80% 50% 200) เป็นสีน้ำเงินสดที่ดูเหมือนสีที่เหมาะสมเมื่อดูจากตัวเลข แต่อยู่นอกช่วงสีของ Display P3

พื้นที่ทำงานอื่นๆ

การระบุสีใน CSS มีหลายวิธี และคุณไม่จำเป็นต้องเรียนรู้ทั้งหมด รูปแบบ rgb() และ Hex ใช้กันโดยทั่วไปในเครื่องมือออกแบบและโค้ดที่มีอยู่ และเป็นสิ่งที่ควรทราบ นอกจากนี้ คุณควรทำความคุ้นเคยกับรูปแบบที่ควบคุมได้อย่างคาดการณ์ได้ คุณเปลี่ยนค่า hsl หรือ oklch ได้โดยตรงและดูตัวอย่างสีที่ออกมา

อ่านเพิ่มเติมในหัวข้อเข้าถึงสีและพื้นที่ทำงานใหม่

สีของระบบ

นอกจากสีที่มีชื่อ เช่น ม่วงหรือเทอร์ควอยซ์ แล้วยังมีคีย์เวิร์ดพิเศษต่อไปนี้

• transparent คือสีโปร่งแสงทั้งหมด และเป็นค่าเริ่มต้นของ background-color ด้วย
• currentColor คือค่าแบบไดนามิกที่คำนวณตามบริบทของพร็อพเพอร์ตี้ color หากคุณมีสีข้อความเป็น red แล้วตั้งค่า border-color เป็น currentColor border-color ก็จะเป็น red ด้วย หากองค์ประกอบที่คุณกำหนดcurrentColorให้ไม่มีค่าสำหรับสีที่กําหนดไว้ ระบบจะคํานวณcurrentColorตามลําดับชั้นแทน

การจัดการสี

แม้ว่าคุณอาจมีชุดสีที่จะใช้ในเว็บไซต์ แต่คุณอาจต้องใช้สีเหล่านั้นในเฉดต่างๆ สำหรับสถานะการโฮเวอร์ เส้นขอบ และองค์ประกอบ UI อื่นๆ คุณระบุสีแต่ละสีได้ แต่ CSS ยังมีวิธีเปลี่ยนสีเพื่อสร้างผลิตภัณฑ์ย่อยเหล่านี้ด้วย

color-mix()

หากต้องการใช้ผลลัพธ์จากการผสมสี 2 สี ให้ใช้เมธอด color-mix() ซึ่งมีประโยชน์สำหรับการผสมสีกับสีขาวหรือสีดําเพื่อสร้างตัวแปรที่อ่อนหรือเข้มขึ้น

หากต้องการใช้ color-mix() คุณจะต้องกําหนด 2 สี วิธีการผสมสี (วิธีการหาค่าเฉลี่ย) และปริมาณสีแต่ละสีที่ต้องการ

สำหรับพื้นที่สีที่มีสี คุณสามารถเลือกทิศทางในวงล้อสีที่ต้องการได้ โดยค่าเริ่มต้นจะใช้เส้นทาง shorter แต่คุณก็เลือก longer หรือ increasing และ decreasing ก็ได้

ระบบสีและทิศทางคือวิธีการใช้การประมาณ

นอกจากนี้ คุณยังระบุปริมาณสีแต่ละสีที่จะผสมได้ด้วย

ไวยากรณ์สีสัมพัทธ์

นอกจากนี้ คุณยังใช้สีได้โดยตรงมากขึ้นโดยใช้ไวยากรณ์สีแบบสัมพัทธ์ ซึ่งจะช่วยให้คุณใช้สีใดก็ได้และทำการคํานวณเพื่อสร้างสีใหม่

h1 {
  color: oklch(from red l c h);
}

การใช้ฟังก์ชัน oklch() หมายความว่าคุณจะทำงานกับแชแนลความสว่าง ความเข้ม และสี หลังคีย์เวิร์ด from คุณสามารถระบุสีใดก็ได้ในไวยากรณ์ใดก็ได้ จากนั้นระบบจะแสดงค่าของแชแนลแต่ละรายการให้คุณใช้เป็นตัวหนังสือ ซึ่งจะแสดงเป็นสีแดงโดยไม่มีการปรับเปลี่ยน

หากต้องการปรับเปลี่ยน ให้ใช้ฟังก์ชัน calc() เพื่อเปลี่ยนค่าของแชแนล หรือจะแทนที่แชแนลทั้งหมดเลยก็ได้ ที่นี่เราใช้ red สีเดียวกัน แต่กำหนดด้วย oklch(62% 0.25 29)

h1 {
  color: oklch(from oklch(62% 0.25 29) calc(l / 2) c 180);
}

แชแนลความสว่างคือ 62% / 2 หรือ 31% แชแนลความเข้มไม่เปลี่ยนแปลง จึงเป็น 0.25 ช่องสีคือ 180 ซึ่งจะเป็นการสร้างสีใหม่ นั่นคือ oklch(31% 0.25 180) ซึ่งเป็นสีเขียวเข้ม

คุณมักจะใช้พร็อพเพอร์ตี้ที่กำหนดเองเป็นสีอินพุต ซึ่งจะช่วยให้คุณสร้างรูปแบบสีต่างๆ ได้อย่างยืดหยุ่น

คุณทําเช่นนี้ได้โดยใช้ฟังก์ชันสีใดก็ได้ และควรทําเช่นนี้กับฟังก์ชันสีที่มีแชแนลที่อธิบายการเปลี่ยนแปลงที่คุณต้องการทำ เช่น หากต้องการปรับความสว่างของสี ให้เลือก oklch หรือ hsl เนื่องจากคุณจะเปลี่ยนช่องทางความสว่างได้โดยตรง

h1 {
  color: oklch(from var(--primary-color) calc(l * 0.9) c h);
}

เมื่อใช้ไวยากรณ์สีแบบสัมพัทธ์หรือ RCS คุณสามารถสร้างชุดสีเพื่อใช้ในเว็บไซต์ได้

สีที่อยู่นอกขอบเขตสี

เนื้อหาจะแสดงบนหน้าจอต่างๆ ที่อาจรองรับหรือไม่รองรับสีแบบกว้าง หากคุณระบุสีที่หน้าจอไม่รองรับ ระบบจะดำเนินการตามกระบวนการที่เรียกว่าการแมปช่วงสีเพื่อค้นหาสีที่คล้ายกันซึ่งแสดงบนหน้าจอได้ หากต้องการกำหนดสีที่เฉพาะเจาะจงในกรณีดังกล่าว ให้ใช้คำค้นหาสื่อ color-gamut

ตำแหน่งที่จะใช้สีในกฎ CSS

หากพร็อพเพอร์ตี้ CSS ยอมรับประเภทข้อมูล <color> เป็นค่า ก็จะยอมรับวิธีการแสดงสีที่ระบุไว้ก่อนหน้านี้ หากต้องการจัดรูปแบบข้อความ ให้ใช้พร็อพเพอร์ตี้ color, text-shadow และ text-decoration-color ซึ่งทั้งหมดยอมรับสีเป็นค่าหรือสีเป็นส่วนหนึ่งของค่า

สำหรับพื้นหลัง คุณสามารถตั้งค่าสีเป็นค่าสำหรับ background หรือ background-color นอกจากนี้ คุณยังใช้สีในไล่ระดับสีได้ด้วย เช่น linear-gradient การไล่ระดับสีคือรูปภาพประเภทหนึ่งที่กําหนดแบบเป็นโปรแกรมได้ใน CSS ไล่ระดับสียอมรับสีตั้งแต่ 2 สีขึ้นไปในชุดค่าผสมรูปแบบสีใดก็ได้ เช่น Hex, RGB หรือ HSL

สุดท้าย border-color และ outline-color จะกำหนดสีสำหรับเส้นขอบและขอบในกล่อง พร็อพเพอร์ตี้ box-shadow ยังยอมรับสีเป็นหนึ่งในค่าด้วย

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับสี

แหล่งข้อมูล

• การสาธิตที่มีประโยชน์ซึ่งแสดงวิธีใช้มุมกับ HSL
• คู่มือที่ครอบคลุมเกี่ยวกับสี
• คู่มือที่ครอบคลุมเกี่ยวกับสีแบบขอบเขตสีกว้าง
• [วิดีโอ] คําอธิบายวิธีอ่านรหัสฐานสิบหก
• วิธีการทำงานของรหัสฐาน 16