Color Palette
60-30-10 Rule
หลีกเลี่ยงสีดำสนิท (#000000), สี neon และ gradient ที่มากเกินไป — สีคือหัวใจของอัตลักษณ์แบรนด์ B.Grimm ให้ใช้ตามสัดส่วนนี้เสมอ:
- 60% White/Off-White — พื้นหลังหลัก (
#FFFFFFหรือ#FCFEFF) - 30% Grey — ตัวอักษร, เส้นขอบ, structural element
- Dark Grey:
#63666F(ใช้แทนสีดำสำหรับ text) - Light Grey:
#989AA5(decorative/secondary เท่านั้น — ดูข้อจำกัดใน Accessibility & Contrast)
- Dark Grey:
- 10% Orange (Highlight) — ใช้เฉพาะจุดเด่น, CTA, ไอคอนสำคัญ
- Primary:
#FF6727 - Dark:
#C43400 - Light:
#FF9956
- Primary:
คอร์ปอเรตไอเดนทิตี้ของ B.Grimm ให้ความสำคัญกับจานสีนี้มาก โดยเฉพาะการหลีกเลี่ยงสีดำในตัวอักษร — ให้ลดการใช้สีดำให้น้อยที่สุดเท่าที่จะทำได้เสมอ
Primary Colours
จานสีหลักคือแกนหลักของแบรนด์ในทุกช่องทาง — ให้ความสำคัญกับ B.Grimm Orange สำหรับไอคอนและตัวอักษรที่ต้องการเน้น (highlight text) — คลิกที่โค้ด HEX เพื่อคัดลอก
B.Grimm Orange
- Pantone
- 165
- RGB
- 255 / 103 / 39
- CMYK
- 0 / 68 / 96 / 0
B.Grimm Dark Grey
- Pantone
- Cool Grey 10
- RGB
- 99 / 102 / 111
- CMYK
- 57 / 46 / 40 / 25
B.Grimm Light Grey
- Pantone
- Cool Grey 7
- RGB
- 152 / 154 / 165
- CMYK
- 38 / 29 / 24 / 5
White
- Pantone
- —
- RGB
- 255 / 255 / 255
- CMYK
- 0 / 0 / 0 / 0
Secondary Colours
จานสีรองเสริมความยืดหยุ่นเชิงสร้างสรรค์ ช่วยให้จดจำแบรนด์และรักษาความสม่ำเสมอของภาพลักษณ์
B.Grimm Orange Light
- RGB
- 255 / 153 / 86
- CMYK
- 0 / 40 / 66 / 0
B.Grimm Orange Dark
- RGB
- 196 / 52 / 0
- CMYK
- 0 / 56 / 77 / 23
B.Grimm Off White
- RGB
- 252 / 254 / 255
- CMYK
- —
B.Grimm Grey Shade 0
- RGB
- 235 / 236 / 240
- CMYK
- 10 / 7 / 5 / 0
B.Grimm Grey Shade 1
- RGB
- 217 / 218 / 228
- CMYK
- 10 / 7 / 5 / 0
B.Grimm Grey Shade 2
- RGB
- 201 / 202 / 212
- CMYK
- 18 / 13 / 10 / 0
Accent Colours
สีเน้นสำหรับไฮไลต์ฟีเจอร์และเพิ่มสไตล์ทางภาพ ใช้อย่างประหยัด เทียบกับสีหลักและสีรอง — การใช้สีกลุ่มนี้เป็นทางเลือก (optional) ไม่ใช่ข้อบังคับ
B.Grimm Green
B.Grimm Light Green
B.Grimm Dark Green
B.Grimm Pink
B.Grimm Light Pink
B.Grimm Dark Pink
B.Grimm Yellow
B.Grimm Light Yellow
B.Grimm Dark Yellow
ค่าสี Accent ด้านบนคัดลอกมาจากคู่มือต้นฉบับตรงๆ ยังไม่มีการคำนวณ contrast ratio เหมือนสีหลัก/สีรอง — ห้ามใช้เป็นสีตัวอักษรบนพื้นขาวโดยไม่เช็ค contrast จริงก่อน (ดู Accessibility & Contrast) และควรใช้เฉพาะเป็น accent เล็กๆ เช่น ไอคอน/แท็ก/กราฟ ไม่ใช่ body text
Gradient Previews
การไล่เฉด (gradient) ใช้เพื่อเพิ่มมิติและความลึกให้กับงานออกแบบ — แต่ต้องใช้อย่างมีรสนิยม ไม่ฉูดฉาดเกินไป ใช้เฉพาะ gradient แบบ mono-tonal (สีเดียวกันไล่เฉด) หรือจากสีหลักไปยังสีที่เกี่ยวข้องกันเท่านั้น
ใช้เฉพาะ gradient แบบ mono-tonal (สีเดียว) หรือจากสีขาวไปส้ม — ห้ามใช้ gradient ข้ามกลุ่มสี (เช่น ส้มไปเขียว) หรือใช้เกิน 2 จุดหยุดสีในงานทั่วไป
ห้ามเด็ดขาด: gradient สายรุ้ง (rainbow), gradient neon, gradient ที่มีจุดหยุดสีเกิน 3 จุดใน element เดียว, gradient ตัดกันรุนแรง (เช่น แดง-น้ำเงิน) — gradient ที่ไม่เหมาะสมทำลายความน่าเชื่อถือของแบรนด์ B.Grimm ที่เน้นความเรียบหรูและมืออาชีพ
Color in UI Context
ตัวอย่างการใช้งานสีในองค์ประกอบ UI จริง — ปุ่ม, การ์ด, ช่องกรอกข้อมูล, และข้อความ — เพื่อให้เห็นภาพการใช้งานจริงตามสัดส่วน 60-30-10
ปุ่ม Primary ใช้สีส้มเฉพาะจุดสำคัญ (10%) — Secondary ใช้แบบ outline เพื่อรักษาสมดุล 60-30-10
การ์ดที่มี accent bar ด้านบนใช้สีส้มเพื่อสื่อถึงแบรนด์ — accent สีเขียวใช้กับเนื้อหาด้านความยั่งยืน
สถานะต่างๆ ของช่องกรอกข้อมูล — ใช้สีส้มเฉพาะตอน focus เพื่อสื่อถึง interactivity โดยไม่ใช้สีดำสนิท
ลำดับชั้นของสีตัวอักษรตามกฎ 60-30-10 — ไม่ใช้สีดำ #000000 ในทุกกรณี
Color Pairings
✅ การจับคู่สีที่แนะนำ (แนะนำให้ใช้)
คู่สีต่อไปนี้ผ่านการตรวจสอบ contrast ratio และสื่อถึงอัตลักษณ์แบรนด์ B.Grimm
#FF6727 on #FFFFFF#C43400 on #FFF0E8#63666F on #FFFFFF#FFFFFF on #63666F#202124 on #FFFFFF#FF6727 on #202124❌ การจับคู่สีต้องห้าม (ห้ามใช้เด็ดขาด)
คู่สีต่อไปนี้ละเมิดกฎการใช้งานสีของ B.Grimm — ทำให้แบรนด์ดูไม่เป็นมืออาชีพ, contrast ไม่ผ่าน WCAG, หรือขัดกับอัตลักษณ์องค์กร
#000000 on #FFFFFF#989AA5 on #FFFFFF#FFB92A on #FF6727#FF6727 on #000000#3BCEBD on #FF6727#FF9956 on #FFF0E8✅ ใช้: สีส้มเข้มบนพื้นอ่อน, สีเทาเข้มบนพื้นขาว, สีขาวบนพื้นเทา
❌ ห้าม: ดำสนิท (#000000) ทุกรูปแบบ, สีสว่างบนสีสว่าง, สีที่ contrast ต่ำกว่า WCAG AA
Adobe Swatch Library (.ase)
มีไฟล์ .ase (Adobe Swatch Exchange) สำหรับ Photoshop/Illustrator แยก 2 ชุด — Digital และ Print — ใช้แชร์จานสีระหว่างโปรแกรม Adobe ได้ตรงเป๊ะโดยไม่ต้องพิมพ์ hex เอง ดูลิงก์ดาวน์โหลดที่ Adobe Swatches
ติดต่อ brand@bgrimmgroup.com หากไม่แน่ใจโค้ดสีที่ถูกต้อง
Color Merge Game (Retro)
เกมเรโทรสไตล์ 2048 — เลื่อนไทล์สีให้ชนกัน สีเดียวกันจะรวมกันเป็นสีถัดไปในรามป์ของ B.Grimm ไล่จากส้มอ่อน #FF9956 ไปจนถึงไทล์สูงสุด B.GRIMM #FCFEFF ใช้ปุ่มลูกศร / WASD บนคีย์บอร์ด หรือปัดนิ้วบนกระดาน (บนมือถือกดปุ่มทิศทางได้) — คะแนนดีที่สุดจะถูกบันทึกไว้ในเครื่องของคุณ ลองทำลายสถิติดูสิ!
