ข้ามไปยังเนื้อหา
Theme

สี

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

พาเลต F5 ใช้สีแบรนด์หลักเจ็ดสี บวกกับสีดำและสีขาว โดยแต่ละสีมีตัวแปรทินต์/เฉดสี่ระดับ รวมทั้งหมด 45 สี หน้านี้เป็นแหล่งข้อมูลเดียวที่น่าเชื่อถือสำหรับการแมปสีแบรนด์ไปยัง CSS custom properties ของ Starlight ในระหว่างการพัฒนาธีม

สีหลัก

หัวข้อที่มีชื่อว่า “สีหลัก”
#e4002b
F5 Red—f5-red
#f29a36
Tangerine—f5-tangerine
#0e41aa
River—f5-river
#ab2782
Raspberry—f5-raspberry
#009639
Jade—f5-jade
#62228b
Eggplant—f5-eggplant
#0072b0
Bay—f5-bay
#ffffff
White—f5-white
#000000
Black—f5-black
ชื่อHEXRGBCMYKLESSPMSCSS Variable
F5 Red#e4002b228, 0, 430, 100, 81, 11monza185--f5-red
Tangerine#f29a36242, 154, 540, 36, 78, 5carrot-orange1375--f5-tangerine
River#0e41aa14, 65, 17092, 62, 0, 33tory-blue293--f5-river
Raspberry#ab2782171, 39, 1300, 77, 24, 33—241--f5-raspberry
Jade#0096390, 150, 57100, 0, 62, 41fun-green355--f5-jade
Eggplant#62228b98, 34, 13929, 76, 0, 45honey-flower2617--f5-eggplant
Bay#0072b00, 114, 176100, 35, 0, 31—7461--f5-bay
White#ffffff255, 255, 2550, 0, 0, 0alabaster—--f5-white
Black#0000000, 0, 060, 50, 40, 100blackBlack--f5-black

หมายเหตุเกี่ยวกับชื่อ LESS: Brand Center แสดง Raspberry เป็น tory-blue และ Bay เป็น honey-flower — ซึ่งเป็นข้อผิดพลาดจากการคัดลอกวางของรายการ River และ Eggplant ตามลำดับ จึงถูกทำเครื่องหมาย — ไว้ด้านบนเพื่อหลีกเลี่ยงการเผยแพร่ค่าที่ไม่ถูกต้อง

สีรอง (ทินต์ & เฉดสี)

หัวข้อที่มีชื่อว่า “สีรอง (ทินต์ & เฉดสี)”

แต่ละสีหลักมีสี่ตัวแปร เรียงลำดับจากอ่อนที่สุด (ระดับ 1) ไปยังเข้มที่สุด (ระดับ 4)

Brand Center กำหนดชื่อตัวแปร LESS ให้กับสีรอง ตัวแปรของ Cloud Red และ Tangerine มีชื่อที่เป็นเอกลักษณ์และมีความหมาย กลุ่มสีอื่นๆ ทั้งหมดแสดงชื่อ placeholder เดียวกัน (wewak, froly, carmine, venetian-red) — ซึ่งเป็นค่าเริ่มต้นของเทมเพลตจากแพลตฟอร์มแบรนด์ และรวมไว้ด้านล่างเพื่อความสมบูรณ์ แต่ไม่ควรนำมาใช้เป็นตัวระบุที่เป็นมาตรฐาน

F5 Red

หัวข้อที่มีชื่อว่า “F5 Red”
#e4002b
F5 Red (base)—f5-red
#f7b2bf
Level 1—f5-red-1
#f06680
Level 2—f5-red-2
#a70020
Level 3—f5-red-3
#720016
Level 4—f5-red-4
ระดับHEXRGBCMYKLESS
1 (อ่อนที่สุด)#f7b2bf247, 178, 1910, 28, 23, 3wewak
2#f06680240, 102, 1280, 57, 47, 6froly
3#a70020167, 0, 320, 100, 81, 35carmine
4 (เข้มที่สุด)#720016114, 0, 220, 100, 81, 55venetian-red

Tangerine

หัวข้อที่มีชื่อว่า “Tangerine”
#f29a36
Tangerine (base)—f5-tangerine
#ffe4c4
Level 1—f5-tangerine-1
#ffbd61
Level 2—f5-tangerine-2
#a35700
Level 3—f5-tangerine-3
#7a4100
Level 4—f5-tangerine-4
ระดับHEXRGBCMYKLESS
1 (อ่อนที่สุด)#ffe4c4255, 228, 1960, 11, 23, 0tequila
2#ffbd61255, 189, 970, 26, 62, 0koromiko
3#a35700163, 87, 00, 47, 100, 36chelsea-gem
4 (เข้มที่สุด)#7a4100122, 65, 00, 47, 100, 52cinnamon

River

หัวข้อที่มีชื่อว่า “River”
#0e41aa
River (base)—f5-river
#b7c6e5
Level 1—f5-river-1
#6e8dcc
Level 2—f5-river-2
#0b3180
Level 3—f5-river-3
#072155
Level 4—f5-river-4
ระดับHEXRGBCMYKLESS
1 (อ่อนที่สุด)#b7c6e5183, 198, 2290, 28, 23, 3wewak
2#6e8dcc110, 141, 2040, 58, 47, 6froly
3#0b318011, 49, 1280, 100, 81, 35carmine
4 (เข้มที่สุด)#0721557, 33, 850, 100, 81, 55venetian-red

Raspberry

หัวข้อที่มีชื่อว่า “Raspberry”
#ab2782
Raspberry (base)—f5-raspberry
#e6bed9
Level 1—f5-raspberry-1
#cd7db4
Level 2—f5-raspberry-2
#801d62
Level 3—f5-raspberry-3
#561441
Level 4—f5-raspberry-4
ระดับHEXRGBCMYKLESS
1 (อ่อนที่สุด)#e6bed9230, 190, 2170, 28, 23, 3wewak
2#cd7db4205, 125, 1800, 58, 47, 6froly
3#801d62128, 29, 980, 100, 81, 35carmine
4 (เข้มที่สุด)#56144186, 20, 650, 100, 81, 55venetian-red

Jade

หัวข้อที่มีชื่อว่า “Jade”
#009639
Jade (base)—f5-jade
#b2dfc4
Level 1—f5-jade-1
#66c088
Level 2—f5-jade-2
#00712b
Level 3—f5-jade-3
#004b1d
Level 4—f5-jade-4
ระดับHEXRGBCMYKLESS
1 (อ่อนที่สุด)#b2dfc4178, 223, 1960, 28, 23, 3wewak
2#66c088102, 192, 1360, 58, 47, 6froly
3#00712b0, 113, 430, 100, 81, 35carmine
4 (เข้มที่สุด)#004b1d0, 75, 290, 100, 81, 55venetian-red

Eggplant

หัวข้อที่มีชื่อว่า “Eggplant”
#62228b
Eggplant (base)—f5-eggplant
#cdabe3
Level 1—f5-eggplant-1
#9c59c9
Level 2—f5-eggplant-2
#822cb8
Level 3—f5-eggplant-3
#41175d
Level 4—f5-eggplant-4
ระดับHEXRGBCMYKLESS
1 (อ่อนที่สุด)#cdabe3205, 171, 2270, 28, 23, 3wewak
2#9c59c9156, 89, 2010, 58, 47, 6froly
3#822cb8130, 44, 1840, 100, 81, 35carmine
4 (เข้มที่สุด)#41175d65, 23, 930, 100, 81, 55venetian-red

Bay

หัวข้อที่มีชื่อว่า “Bay”
#0072b0
Bay (base)—f5-bay
#b2d7eb
Level 1—f5-bay-1
#66afd7
Level 2—f5-bay-2
#005c8d
Level 3—f5-bay-3
#003d5f
Level 4—f5-bay-4
ระดับHEXRGBCMYKLESS
1 (อ่อนที่สุด)#b2d7eb178, 215, 2350, 28, 23, 3wewak
2#66afd7102, 175, 2150, 58, 47, 6froly
3#005c8d0, 92, 1410, 100, 81, 35carmine
4 (เข้มที่สุด)#003d5f0, 61, 950, 100, 81, 55venetian-red

White (สีกลางอ่อน)

หัวข้อที่มีชื่อว่า “White (สีกลางอ่อน)”
#ffffff
White (base)—f5-white
#faf9f7
Level 1—f5-white-1
#f5f5f5
Level 2—f5-white-2
#e6e6e6
Level 3—f5-white-3
#cccccc
Level 4—f5-white-4
ระดับHEXRGBCMYKLESS
1 (อ่อนที่สุด)#faf9f7250, 249, 2470, 28, 23, 3wewak
2#f5f5f5245, 245, 2450, 58, 47, 6froly
3#e6e6e6230, 230, 2300, 100, 81, 35carmine
4 (เข้มที่สุด)#cccccc204, 204, 2040, 100, 81, 55venetian-red

Black (สีเทา)

หัวข้อที่มีชื่อว่า “Black (สีเทา)”
#000000
Black (base)—f5-black
#999999
Level 1—f5-black-1
#666666
Level 2—f5-black-2
#343434
Level 3—f5-black-3
#222222
Level 4—f5-black-4
ระดับHEXRGBCMYKLESS
1 (อ่อนที่สุด)#999999153, 153, 1530, 28, 23, 3wewak
2#666666102, 102, 1020, 58, 47, 6froly
3#34343452, 52, 520, 100, 81, 35carmine
4 (เข้มที่สุด)#22222234, 34, 340, 100, 81, 55venetian-red

การแมปไปยัง CSS Custom Properties ของ Starlight

หัวข้อที่มีชื่อว่า “การแมปไปยัง CSS Custom Properties ของ Starlight”

Starlight เปิดเผยตัวแปร --sl-color-* สำหรับการปรับแต่งธีม ด้านล่างนี้คือการแมปจากพาเลต F5 ไปยังช่องสีเชิง semantic ของ Starlight ซึ่งนำไปใช้งานใน styles/custom.css

วิธีการทำงานของธีม Starlight: ใน Starlight dark mode เป็นค่าเริ่มต้นของ :root — ไม่มี selector data-theme="dark" light mode ใช้ :root[data-theme='light'] ตัวแปรสเกลสีเทาเป็น semantic ไม่ได้เรียงลำดับตามความสว่าง: gray-1 คือ “ข้อความหลัก” เสมอ และ gray-6/gray-7 คือ “พื้นหลังที่ละเอียดอ่อน” เสมอ ไม่ว่าจะเป็นโหมดใด ค่าความสว่างจริงของพวกมันจะสลับกันระหว่างโหมด ในทำนองเดียวกัน accent-high คือสีข้อความ accent ที่มองเห็นได้ชัดเจนเสมอ และ accent-low คือพื้นหลัง accent ที่ละเอียดอ่อนเสมอ — ความสว่างของพวกมันจะกลับด้านระหว่างโหมด

/* Dark mode — Starlight default (:root) */
:root {
  --sl-color-white: #ffffff;      /* Heading text (brightest) */
  --sl-color-gray-1: #f5f5f5;    /* Primary text — White Level 2 */
  --sl-color-gray-2: #cccccc;    /* Body text — White Level 4 */
  --sl-color-gray-3: #999999;    /* Dim/muted text — Black Level 1 */
  --sl-color-gray-4: #666666;    /* Borders — Black Level 2 */
  --sl-color-gray-5: #343434;    /* Inline code bg — Black Level 3 */
  --sl-color-gray-6: #222222;    /* Sidebar bg — Black Level 4 */
  --sl-color-black: #000000;     /* Page background */
  --sl-color-accent-low: #720016;   /* Subtle accent bg — F5 Red Level 4 */
  --sl-color-accent: #f06680;       /* Links, active — F5 Red Level 2 */
  --sl-color-accent-high: #f7b2bf;  /* Accent text — F5 Red Level 1 */
}


/* Light mode — inverted gray scale and accent brightness */
:root[data-theme='light'] {
  --sl-color-white: #222222;      /* Heading text (darkest) — Black Level 4 */
  --sl-color-gray-1: #222222;    /* Primary text — Black Level 4 */
  --sl-color-gray-2: #343434;    /* Body text — Black Level 3 */
  --sl-color-gray-3: #666666;    /* Dim text — Black Level 2 */
  --sl-color-gray-4: #999999;    /* Borders — Black Level 1 */
  --sl-color-gray-5: #cccccc;    /* Light borders — White Level 4 */
  --sl-color-gray-6: #f5f5f5;    /* Sidebar bg — White Level 2 */
  --sl-color-gray-7: #faf9f7;    /* Nav bg — White Level 1 */
  --sl-color-black: #ffffff;     /* Page background */
  --sl-color-accent-low: #f7b2bf;   /* Subtle accent bg — F5 Red Level 1 (inverted) */
  --sl-color-accent: #e4002b;       /* Links, active — F5 Red */
  --sl-color-accent-high: #720016;  /* Accent text — F5 Red Level 4 (inverted) */
}

ตัวอย่างโทเค็นแบบภาพ

หัวข้อที่มีชื่อว่า “ตัวอย่างโทเค็นแบบภาพ”

สลับตัวเลือกธีมเพื่อดูการเปลี่ยนแปลงของโทเค็น semantic เหล่านี้ระหว่าง dark mode และ light mode

โทเค็นสเกลสีเทา

หัวข้อที่มีชื่อว่า “โทเค็นสเกลสีเทา”
white
ข้อความหัวเรื่อง—sl-color-white
gray-1
ข้อความหลัก—sl-color-gray-1
gray-2
ข้อความเนื้อหา—sl-color-gray-2
gray-3
ข้อความหรี่—sl-color-gray-3
gray-4
เส้นขอบ—sl-color-gray-4
gray-5
พื้นหลัง inline code—sl-color-gray-5
gray-6
พื้นหลัง Sidebar—sl-color-gray-6
black
พื้นหลังหน้า—sl-color-black

โทเค็น Accent

หัวข้อที่มีชื่อว่า “โทเค็น Accent”
accent-low
พื้นหลัง accent ละเอียดอ่อน—sl-color-accent-low
accent
ลิงก์, active—sl-color-accent
accent-high
ข้อความ accent—sl-color-accent-high

โทเค็น Badge

หัวข้อที่มีชื่อว่า “โทเค็น Badge”
default
Badge เริ่มต้น—sl-color-bg-badge-default
note
Badge note—sl-color-bg-badge-note
danger
Badge danger—sl-color-bg-badge-danger
success
Badge success—sl-color-bg-badge-success
caution
Badge caution—sl-color-bg-badge-caution
tip
Badge tip—sl-color-bg-badge-tip

การตรวจสอบความตัดกัน (WCAG AA)

หัวข้อที่มีชื่อว่า “การตรวจสอบความตัดกัน (WCAG AA)”

Dark mode (ข้อความบนพื้นหลังหน้า #000000):

  • ข้อความเนื้อหา #cccccc → 16.3:1 (AAA)
  • ข้อความหรี่ #999999 → 10:1 (AAA)
  • ลิงก์ accent #f06680 → 5.6:1 (AA)

Light mode (ข้อความบนพื้นหลังหน้า #ffffff):

  • ข้อความเนื้อหา #343434 → 11.6:1 (AAA)
  • ข้อความหรี่ #666666 → 5.7:1 (AA)
  • ลิงก์ accent #e4002b → 4.6:1 (AA)

ข้อเสนอแนะสีเชิง semantic

หัวข้อที่มีชื่อว่า “ข้อเสนอแนะสีเชิง semantic”
ตัวแปร Starlightสี F5กรณีการใช้งาน
--sl-color-accentF5 Red #e4002bลิงก์, ปุ่ม, สถานะ active
--sl-color-text-accentF5 Red Level 2 #f06680สถานะ hover ใน dark mode
--sl-color-bg-accentF5 Red Level 4 #720016พื้นหลัง accent
Custom: --sl-color-infoBay #0072b0คำอธิบายเชิงข้อมูล
Custom: --sl-color-successJade #009639ข้อความสำเร็จ
Custom: --sl-color-warningTangerine #f29a36คำอธิบายเตือน
Custom: --sl-color-dangerF5 Red #e4002bคำอธิบายข้อผิดพลาด/อันตราย

ความตัดกันของสี

หัวข้อที่มีชื่อว่า “ความตัดกันของสี”

เพื่อให้ทุกคนสามารถเข้าถึงและเข้าใจการสื่อสารของเราได้ ให้ใช้การผสมสีพื้นหลังและสีข้อความที่ตรงตามมาตรฐานการเข้าถึง เลือกคู่สีที่มีอัตราส่วนความตัดกันขั้นต่ำ 3:1 สำหรับข้อความขนาดใหญ่ และ 4.5:1 สำหรับข้อความปกติ

การจับคู่สีทั้งหมดต้องตรงตามข้อกำหนด WCAG AA:

  • ข้อความปกติ (< 18pt / 14pt ตัวหนา): อัตราส่วนความตัดกันขั้นต่ำ 4.5:1
  • ข้อความขนาดใหญ่ (≥ 18pt / 14pt ตัวหนา): อัตราส่วนความตัดกันขั้นต่ำ 3:1
  • ส่วนประกอบ UI และวัตถุกราฟิก: อัตราส่วนความตัดกันขั้นต่ำ 3:1

การจับคู่ที่ปลอดภัยที่แนะนำ

หัวข้อที่มีชื่อว่า “การจับคู่ที่ปลอดภัยที่แนะนำ”
สีหน้าสีพื้นหลังอัตราส่วนความตัดกันผ่าน
White #ffffffF5 Red #e4002b4.6:1AA
White #ffffffRiver #0e41aa6.4:1AA / AAA
White #ffffffBay #0072b04.6:1AA
White #ffffffJade #0096394.2:1AA (ข้อความขนาดใหญ่)
White #ffffffEggplant #62228b6.5:1AA / AAA
White #ffffffRaspberry #ab27824.7:1AA
Black #000000Tangerine #f29a367.8:1AA / AAA
Black #000000F5 Red Level 1 #f7b2bf10.1:1AA / AAA
Black #222222White Level 1 #faf9f715.8:1AA / AAA

เคล็ดลับ: ตรวจสอบอัตราส่วนความตัดกันด้วยเครื่องมืออย่าง WebAIM Contrast Checker เสมอเมื่อสร้างการผสมสีใหม่

แนวทางการใช้งาน

หัวข้อที่มีชื่อว่า “แนวทางการใช้งาน”
กลุ่มสีบทบาทเมื่อใดควรใช้
F5 Redเอกลักษณ์แบรนด์, CTA หลักส่วน Hero, ปุ่มหลัก, เครื่องหมายแบรนด์, สถานะข้อผิดพลาด
Riverข้อมูล, ความน่าเชื่อถือลิงก์นำทาง, แบนเนอร์ข้อมูล, การแสดงข้อมูล
Bayข้อมูล, รองลิงก์รอง, คำอธิบาย info, ส่วนเสริม code block
Jadeสำเร็จ, บวกข้อความสำเร็จ, สถานะยืนยัน, ตัวบ่งชี้ความคืบหน้า
Tangerineเตือน, ดึงดูดความสนใจคำอธิบายเตือน, สถานะที่ต้องการความสนใจ, ตัวทำเครื่องหมาย
RaspberryAccent, ตกแต่งแท็ก, badge, accent รอง, ตัวทำเครื่องหมายหมวดหมู่
EggplantAccent, พรีเมียมการเน้นคุณสมบัติ, ตัวบ่งชี้พรีเมียม, accent ตกแต่ง
White / สีกลางอ่อนพื้นหลัง, พื้นผิวพื้นหลังหน้า, พื้นผิวการ์ด, ตัวแบ่ง, เส้นขอบละเอียดอ่อน
Black / สีเทาข้อความ, โครงสร้างข้อความเนื้อหา, หัวเรื่อง, เส้นขอบ, ชั้นเงา

การตรวจสอบธีม

หัวข้อที่มีชื่อว่า “การตรวจสอบธีม”
  • เส้นขอบ .swatch ใช้ --sl-color-gray-5
  • พื้นหลัง .swatch-label ใช้ --sl-color-gray-6
  • ตัวอย่างสี --f5-* ทั้งหมดแสดงสีจริง (CSS custom properties แก้ไขค่าจาก custom.css)
  • ตัวอย่างสีมองเห็นได้ทั้งใน light mode และ dark mode
  • โทเค็น badge จะอัปเดตเมื่อสลับธีม